...

View Full Version : auto populate form with javascript



planeboy747
01-12-2005, 05: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, 11:40 AM
You may try something starting from this DOM example:



<!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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum