Actually, I used purely JS using this script, and got it to work, but still have one problem. When I change the select value from a higher number back to a lower number, it doest autopopulate back the name fields back to the amount of the lower number, any ideas?
<!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').getElementsByTagNam e('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>
