autopopulate form with javascript

planeboy747 · Jan 11, 2005

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?

trollacious · Jan 11, 2005

You could use a <div> and then write the table to the div using document.getElementById(divname).innerHTML and include as many rows and inputs as the number selected in the dropdown list. If a new number were selected, the <div> would be rewritten with the appropriate number of inputs.

Lee

planeboy747 · Jan 11, 2005

Hi Lee,

I feel so inadequate. I'm still learning JS and yet I can't figure out how to do something as simple as this. Can you explain further step by step?

I know how to create div tags, it's the JS part that I think I would have trouble with...

Thanks
J

trollacious · Jan 11, 2005

It'd be something like this:

Code:

var tstring = '<table>';
for (var si=1;si<=document.forms['request'].elements['select'].selectedIndex;si++)
  {
  tstring += '<tr>';
  tstring += '<td width="132" height="45" ';
  tstring += 'valign="top">*Last Name ' + si + ':<br>';
  tstring += '<input name="lname' + si + '" ';
  tstring += 'type="text" ';
  tstring += 'id="lname' + si + '" ';
  tstring += 'value="" ';
  tstring += 'size="18" maxlength="18"></td>';
  tstring += '<td height="45" ';
  tstring += 'valign="top>First Name ' + si + ':<br>';
  tstring += '<input name="fname' + si + '" ';
  tstring += 'type="text" ';
  tstring += 'id="fname' + si + '" ';
  tstring += 'value="" ';
  tstring += 'size="18" ';
  tstring += 'maxlength="22"></td>';
  tstring += '</tr>';
  }
tstring += '</table>'
document.getElementById(divname).innerHTML=tstring;

I didn't test this, but it shouldn't take too much to get this to work. Just place the code in a function and call it when the <select> is changed. The div should be below the <select> so it doesn't move things all over the place.

Lee

planeboy747 · Jan 12, 2005

Actually, I used 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 doesnt 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>

planeboy747 · Jan 12, 2005

I just tried this script and it worked, but have one problem, it puts the data into 4 cells in 1 row, when i need it in 2 cells with the actual labels stacked on top of the fields, like such:

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

Any ideas on what to do, here's the script I'm using below:
-----------------------------
<HTML>
<Head>
<Script Language=JavaScript>

function insertRows(isTable){

index = isTable.rows.length;
nextRow = isTable.insertRow(index);
isText1 = nextRow.insertCell(0);
txtArea1 = nextRow.insertCell(1)
isText2 = nextRow.insertCell(2);
txtArea2 = nextRow.insertCell(3);
index++;
index = index.toString();
nameStr1 = "Lname"+index;
nameStr2 = "Fname"+index;
txtStr1 = "Last Name "+index+":";
txtStr2 = "First Name "+index+":";
isText1.innerHTML = txtStr1;
isText2.innerHTML = txtStr2;
txtArea1.innerHTML = "<input name="+nameStr1+" type='text' size='18' maxlength='18'>"
txtArea2.innerHTML = "<input name="+nameStr2+" type='text' size='18' maxlength='22'>"
}

function adjustRows(isVal,isTable){

currRows = isTable.rows.length;
newRows = isVal;
if (currRows > 0){for (i=0; i<currRows-0; i++){isTable.deleteRow()}}
for (i=0; i<newRows; i++){insertRows(isTable)}
}

</Script>
</Head>
<Body>
<form name="request">
<select name="select" onchange="adjustRows(this.value,nameSet)">
<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>
<Table id='nameSet'>
<tr>
<td>Last Name 1:<br>
<input name="Lname1" type="text" size="18" maxlength="18"></td>
<td>First Name 1:<br>
<input name="Fname1" type="text" size="18" maxlength="22"></td>
</tr>
</Table>
</Form>
</Body>
</HTML>

planeboy747 · Jan 12, 2005

hey i figured it out!

<HTML>
<Head>
<Script Language=JavaScript>

function insertRows(isTable){

index = isTable.rows.length;
nextRow = isTable.insertRow(index);
isText1 = nextRow.insertCell(0);
isText2 = nextRow.insertCell(1);
index++;
index = index.toString();
nameStr1 = "Lname"+index;
nameStr2 = "Fname"+index;
txtStr1 = "Last Name "+index+":<br><input name="+nameStr1+" type='text' size='18' maxlength='18'>";
txtStr2 = "First Name "+index+":<br><input name="+nameStr2+" type='text' size='18' maxlength='22'>";
isText1.innerHTML = txtStr1;
isText2.innerHTML = txtStr2;
}

function adjustRows(isVal,isTable){

currRows = isTable.rows.length;
newRows = isVal;
if (currRows > 0){for (i=0; i<currRows-0; i++){isTable.deleteRow()}}
for (i=0; i<newRows; i++){insertRows(isTable)}
}

</Script>
</Head>
<Body>
<form name="request">
<select name="select" onchange="adjustRows(this.value,nameSet)">
<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>
<Table id='nameSet'>
<tr>
<td>Last Name 1:<br>
<input name="Lname1" type="text" size="18" maxlength="18"></td>
<td>First Name 1:<br>
<input name="Fname1" type="text" size="18" maxlength="22"></td>
</tr>
</Table>
</Form>
</Body>
</HTML>

planeboy747 · Jan 12, 2005

however, got one more issue, i'm trying to apply 150px to the first cell and 400px to the second sell, where would i insert that into the script?

trollacious · Jan 12, 2005

In the <td>, put in width="150" or width="400"

Lee

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

autopopulate form with javascript

planeboy747

Technical User

trollacious

Programmer

planeboy747

Technical User

trollacious

Programmer

planeboy747

Technical User

planeboy747

Technical User

planeboy747

Technical User

planeboy747

Technical User

trollacious

Programmer

Similar threads

Part and Inventory Search

Sponsor