Adding multiple fields by clicking a button

[Atrisa Milani]

Hi. I have a form where I want to be able to add two consecutive fields for five times.

<script language="javascript">
fields = 0;
function addInput() {
if (fields != 5) {
document.getElementById('text').innerHTML += "<br>Name: <input type='text' name='name' /><br />Email: 
<input type='text' name='email' /><br>";
fields += 1;
} else {
document.getElementById('text').innerHTML += "<br />Olny five participants allowed. Thank you.";
document.form.add.disabled=true;
}
}
</script>

But it is complaining about this line:

document.getElementById('text').innerHTML += "<br>Name: <input type='text' name='name' /><br />Email: 
<input type='text' name='email' /><br>";

Looks like it is not correct to write those field names before the input tag. If not, how should that be done?

Thanks in advance.

[bionoid]

There wasn't much wrong with the code except that you are not allowed to have strings spanning over multiple lines in the source code. If you want to do that you would need to break them up and concatenate them again afterwards.

<div id="text"></div>

<script type="text/javascript">

	var fields = 0;
	function addInput()
	{
		var text = document.getElementById('text');
		if (fields++ < 5) {
			text.innerHTML += '<br />Name: <input type="text" name="name" /><br />Email: <input type="text" name="email" /><br />';
		} else {
			text.innerHTML += '<br />Only five participants allowed. Thank you.';
			document.form.add.disabled = true;
		}
	}

	addInput();
	addInput();
	addInput();
	addInput();
	addInput();
	addInput();
	addInput();
	addInput();

</script>

[Atrisa Milani]

Thanks alot bionoid. Now it works fine. One more question; I want to have those inputs inside <tr> and <td> tags, but the code seems to ignore them. When I look ad the browser's source code, they are not applied. Is there a way I could do this? This is my shot, but doesn't work.

text.innerHTML += '<br /><tr><td>Name: </td><td><input type="text" name="name" /><br /></td></tr><tr><td>Email: </td><input type="text" name="email" /></td></tr><br />';

[Atrisa Milani]

Got it working. Had to add the <table> tags. That easy.

[bionoid]

Cool. Sorry, I had forgotten to come back to this thread before.

As you are using a <table> now, don't forget to remove the <br /> tags in that string.

[Atrisa Milani]

No problem. Yep, I removed those <br /> tags. Thanks again.