Javascript Help

[Coolnat2004]

I am working on a website where I need multiple input boxes. I want a new box to be formed when a button is clicked. It works fine so far, but whenever a new box is formed, the data inputted in the previous boxes are reset.

<script type="text/javascript">	
	function addLink() {
		x = document.getElementById("addl_links");
		x.innerHTML += '<br /><input type="text" name="addl_links[]" value="http://" size="20" />';
		reloadBottomBar();
		return false;
	}
</script>


...


<tr>
	<td class="row2 tableLabel">Additional Links</td>
	<td class="row2">
		<input type="text" name="addl_links[]" value="http://" size="20" />
		
		<span id="addl_links"></span>
		<br />
		<input class="button" type="button" value="Add Another Link" onclick="addLink();" style="width: 100%;" />
	</td>
</tr>

How can I add to the innerHTML without resetting the input box values?

 

[jeremy.king]

May want to consider the DOM way...seems to work fine.

Good Luck

PS. Instead of <br>, consider using CSS to space these.

	<script type="text/javascript">	
		function addLink() {
			x = document.getElementById("theLinks");
			var input = document.createElement("input");
			input.name = "addl_links[]";
			input.type = "text";
			input.value="http://";
			x.appendChild(input);
			return false;
		}
	</script>


<table>
	<tr>
		<td class="row2 tableLabel">Additional Links</td>
		<td class="row2">
			<span id="theLinks">
			<input type="text" name="addl_links[]" value="http://" size="20" />
			<br />
			</span>
			
			<input class="button" type="button" value="Add Another Link" onclick="addLink();" style="width: 100%;" />
		</td>
	</tr>
</table>

 

[Coolnat2004]

Awesome, thank you! I am kind of playing this Javascript stuff by ear.

 

[bhess]

For the record, the reason that the input boxes kept resetting themselves is that

x.innerHTML += (Code)

is basically a shorthand way of writing

x.innerHTML = x.innerHTML + (Code)

so all the input fields were created anew, rather than just one being added, if that makes any sense.