Trouble displaying results

[milams]

Hi everyone,
I am some what new to JavaScript and I'm having a problem displaying my results from a function. The function is working, but the problem is that I have a form with a dropdown list that is a quantity field. What I would like it to do is when the user selects a number in the quantity field it would create a number of textboxes according to the number selected in the quantity field. Well, that seems to work, but the problem is when the quantity is selected the form disappears and only the textboxes show up at the top of the screen. I can't seem to place the textboxes where I want them to go. Is the code I have wrong? And why is it that the rest of the form disappears? I can really use some insight to this, I am totally confused.disappears? I can really use some insight to this, I am totally confused.

<script language="javascript" type="text/javascript">
var qty = document.testform.element.qty.value;
		
function testfor(qty){
for (var i=0; i<qty; i++) {

document.write('<input type="text" name="' + i + '" size="20">' + '&nbsp' + i + '<br>');
	
}
} 
</script>

HTML Form

<form name="testform" method="POST">
<table border="1" width="100%">
<tr>
<td width="22%">
	<select size="1" name="qty" onchange="testfor(this.value)">
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	</select>
</td>
<td width="77%">
<script language="javascript" type="text/javascript">
	<!--
	testfor();
	//-->
	</script>
</td>
</tr>
<tr>
<td colspan="2">
   <input type="submit" value="Submit" name="B1">
   <input type="reset" value="Reset" name="B2"></p>
</td>
</tr>
</table>
</form>

 

[BillyRayPreachersSon]

It's because you are using document.write after the page has loaded - this causes anything on the page to be overwritten.

Try giving this td an id:

<td width="77%" [!]id="targetTD"[/!]>

Try changing your "testfor" function to this:

function testfor(qty) {
	var target = document.getElementById('targetTD');
	var html = '';
	for (var loop=0; loop<qty; loop++) {
		html += '<div>';
		html += '<input type="text" name="input' + loop + '" size="20">' + loop;
		html += '</div>';
    }
    target.innerHTML = html;
}

I've not tested it, but it looks good to me.

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BillyRayPreachersSon]

Oh yes - and remove the script block from within that TD.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BillyRayPreachersSon]

milams,

Did you resolve your problem?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]