All I want to do (and it would be easy enough with PHP, but I'm pushing myself to learn more javascript and jQuery and front end coding right now by modifying scripts to understand what they do) is to build a form with the same number of rows as the "Seats" variable stipulates from a previous form. Then the registrant can enter the names of the guests they are bringing. I'm trying to use the cloneNode functionality. But I can't figure out what's happening in here enough to understand how to stipulate the number of rows created without using the Add Row form button contained in this script.
Here is the code I'm working with. I just want a variable names "seats" to equal the number of rows created. Thanks!:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Guest Registration</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 type="text/javascript">
var clone;
function addRow(but){
var tbo=but.parentNode.parentNode.parentNode;
tbo.appendChild(clone);
var rows=tbo.getElementsByTagName('tr');
textAreas = getVar("seats");
clone=rows[rows.length-1].cloneNode(true);
orderNames(rows)
}
function removeRow(but){
var thisRow=but.parentNode.parentNode;
var tbo=thisRow.parentNode;
tbo.removeChild(thisRow);
var rows=tbo.getElementsByTagName('tr');
orderNames(rows)
}
function orderNames(rows){
var r = 4;
var i=0,r,j,inp,t,k;
while(r=rows[i++]){
inp=r.getElementsByTagName('input');j=0;k=1;
while(t=inp[j++]){
if(t.type=="text"){t.name='col_'+k+'_row_'+i;k++;}
}
}
}
/*onload=function(){
clone=document.getElementById('mytab').getElementsByTagName('tr')[0].cloneNode(true)
}*/
function getVar(name)
{
get_string = document.location.search;
return_value = '';
do { //This loop is made to catch all instances of any get variable.
name_index = get_string.indexOf(name + '=');
//alert (name);
if(name_index != -1)
{
get_string = get_string.substr(name_index + name.length + 1, get_string.length - name_index);
end_of_value = get_string.indexOf('&');
if(end_of_value != -1)
value = get_string.substr(0, end_of_value);
else
value = get_string;
if(return_value == '' || value == '')
return_value += value;
else
return_value += ', ' + value;
}
} while(name_index != -1)
//Restores all the blank spaces.
space = return_value.indexOf('+');
while(space != -1)
{
return_value = return_value.substr(0, space) + ' ' +
return_value.substr(space + 1, return_value.length);
space = return_value.indexOf('+');
}
return(return_value);
}
</script>
</head>
<body>
<form action="">
<script>
onload=function(){
for(i=0; i<4; i++)
clone=document.getElementById('names').getElementsByTagName('tr')[0].cloneNode(true)
addRow(this)
}
</script>
<table width="600" border="1" cellpadding="0" cellspacing="0" id="names">
<tr>
<td>Attendee First Name:<input type="text" name="col_1_row_1" value="Enter First Name"></td>
<td>Attendee Last Name:<input type="text" name="col_2_row_1" value="Enter Last Name"></td>
<td>Attendee Badge Name:<input type="text" name="col_3_row_1" value="Enter Badge Name Name"></td>
<td>Attendee Email Address:<input type="text" name="col_4_row_1" value="Enter Email"></td>
<td><input type="button" value="ADD NEW ROW" onclick="addRow(this)"><br><br>
<input type="button" value="REMOVE THIS ROW" onclick="removeRow(this)"></td>
</tr>
</table>
</form>
</body>
</html>