with the following page, the dynamically generated fields are not recognized when i try to submit the form, or add more elements.
when i hit my submit button, the address bar has only x1 - x5 in the query string, and does not append any of the dynamically generated fields.
any ideas how to fix this?
[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html401/loose.dtd">
<html>
<head>
<title>form</title>
<script type="text/Javascript">
function addContent(initialize)
{
initializeHTML = '<table border="1" cellspacing="0" cellpadding="3"><tr><td>Guest Name<\/td><td>Guest Email Address<\/td><\/tr>';
if (initialize) { for (x=1;x<=6;x++) { initializeHTML += '<tr><td><input type="text" class="guestName" name="guest'+x+'" value="" /><\/td><td><input type="text" name="guestEmail'+x+'" value="" /><\/td><\/tr>'; } }
else
{
var inputValues = howManyFriends();
for (x=0;x<inputValues.length;x++)
{
var splitVals = inputValues[x].split('|');
initializeHTML += '<tr><td><input type="text" class="guestName" name="guest'+x+'" value="'+splitVals[0]+'" /><\/td><td><input type="text" name="guestEmail'+x+'" value="'+splitVals[1]+'" /><\/td><\/tr>';
}
initializeHTML += '<tr><td><input type="text" class="guestName" name="guest'+x+'" value="" /><\/td><td><input type="text" name="guestEmail'+x+'" value="" /><\/td><\/tr>';
}
initializeHTML += "<\/table>";
document.getElementById("guestList").innerHTML = initializeHTML;
}
function howManyFriends()
{
gn = "guest"; gne="guestEmail";
f = document.invitation;
var friendCounter = 0;
previous=-1;
counter=0;
var menuItem = new Array();
alert(f.length);
for (x = 0; x < f.length; x++)
{
var count=x+1; var friendCounter=0;
var filterName = /guest[0-9]+/;
var filterEmail =/guestEmail[0-9]+/;
if ( filterName.test(f[x].name) || filterEmail.test(f[x].name) )
{
whichone = (filterName.test(f[x].name)) ? gn : gne;
whichNumber = parseInt(f[x].name.replace(whichone, ""));
if (isNaN(whichNumber)){alert("not numb");}
if (whichNumber==previous)
{
temp = temp + "|" + f[x].value;
menuItem[counter]= temp;
previous=-1;
counter++;
}
else { temp=f[x].value; previous=whichNumber; }
}
}
return menuItem;
}
</script>
</head>
<body onload="addContent(true);">
<form name="invitation">
<div id="guestList"></div>
<input type="" name="x1"><br>
<input type="" name="x2"><br>
<input type="" name="x3"><br>
<input type="" name="x4"><br>
<input type="" name="x5"><br>
<a href="#" onclick="addContent(); return false;">add</a>
<a href="#" onclick="howManyFriends(); return false;">Test</a>
<input type="submit">
</form>
</body>
</html>[/HTML]