Loading a form with input text rows equal to a passed variable number using the clone function
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;
开发者_StackOverflow 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>
You could just use a "for" statement. For instance (no pun intended):
function addRow(seats)
htmlValue=document.forms[0].innerHTML;
for(i=seats;i<=0;i--)
{
htmlValue=htmlValue+"<input type='text' id='seat"+i"'/>";
document.forms[0].innerHTML=htmlValue;
}
}
Basically, the above function sets the value of the variable 'i' to the same value as 'seats', creates a new form element with a unique id, and adds it to the existing contents of the form. One is subtracted from i and the process is repeated until i = 0. It is by default accessing the first form on the page (forms[0]), to select the second, use forms[1], etc.
You'd end up with 'seats' number of rows, each with a unique id, in your form. This is what you meant right?
加载中,请稍侯......
精彩评论