auto populate form with javascript

planeboy747 · 01-12-2005, 04:45 AM

I have a select field with a drop down menu where you can select the number 1 through 9. Basically this field is used to determne the number of names that will be entered into the form. Example, if you select 5, then the form will need to have places for you to enter those names. So here's my info on this form:

I have a form
<form name="request">

I have a select field
<select name="select">
<option value="Select one">Select one
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
<option value="5">5
<option value="6">6
<option value="7">7
<option value="8">8
<option value="9">9
</select>

And I have a table row already created which should be the default table row already displayed in the form.

<tr>
<td width="132" height="45" valign="top">*Last Name 1<br>
<input name="lname1" type="text" id="lname1" value="" size="18" maxlength="18"></td>
<td height="45" valign="top>First Name 1:<br>
<input name="fname1" type="text" id="fname1" value="" size="18" maxlength="22"></td>
</tr>

Basically, when the user selects another number for the select field ("number"), say the number 5, I wll need to have 5 table rows instead of the 1 that's already displayed. So what I need to figure out is how to do that?

Kor · 01-12-2005, 10:40 AM

You may try something starting from this DOM example:

PHP Code:


			
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<meta http-equiv="Content-Style-Type" content="text/css">

<meta http-equiv="Content-Script-Type" content="text/javascript">

<script language="JavaScript" type="text/JavaScript">

function insR(s){

if(s>1){//if selected index>1

var rRows = document.getElementById('tab').getElementsByTagName('tr');//rows collection

var root = rRows[0].parentNode;//the root

var ind = rRows.length+1;//the indent's base for names/id's

var len= s-rRows.length;//loop limit

if(len>0){//to create extra rows

for(var i=0;i<len;i++){

var cloneR = rRows[0].cloneNode(true);//clones the first row

var cloneC = cloneR.getElementsByTagName('td');//the cells collection of the clone

var cloneI = cloneR.getElementsByTagName('input');//the fields collection of the clone

for(var j=0;j<cloneI.length;j++){

cloneI[j].setAttribute('value','');//sets the values to ''

cloneC[j].removeChild(cloneC[j].firstChild)//removes the text nodes

}

var nr = ind+i;//the indent

cloneI[0].setAttribute('name','lname'+nr);//indents the name

cloneI[0].setAttribute('id','lname'+nr);//indents the id

cloneI[1].setAttribute('name','fname'+nr);//indents the name

cloneI[1].setAttribute('id','fname'+nr);//indents the id

var txt1 = document.createTextNode('*Last Name '+nr+':');//creates text

var txt2 = document.createTextNode('First Name '+nr+':');//creates text

cloneC[0].insertBefore(txt1,cloneC[0].getElementsByTagName('br')[0]);//inserts text

cloneC[1].insertBefore(txt2,cloneC[1].getElementsByTagName('br')[0]);//inserts text

root.appendChild(cloneR);//appends the new row

}

}

}

}

</script>

</head>

<body>

<form>

<select name="select" onchange="insR(this.selectedIndex)">

<option value="Select one">Select one

<option value="1">1

<option value="2">2

<option value="3">3

<option value="4">4

<option value="5">5

<option value="6">6

<option value="7">7

<option value="8">8

<option value="9">9

</select><br>

<br>

<table id="tab">

<tbody>

<tr>

<td width="132" height="45" valign="top">*Last Name 1:<br>

<input name="lname1" type="text" id="lname1" value="" size="18" maxlength="18"></td>

<td height="45" valign="top">First Name 1:<br>

<input name="fname1" type="text" id="fname1" value="" size="18" maxlength="22"></td>

</tr>

</tbody>

</table>

</form>

</body>

</html>