I need to create a form that adds multiple fields depending on user input, and then have the results sent to my formMail.pl script.
Here's an example: an insurance company form for auto insurance. The first thing they want to know is how many drivers in the household. The form will then display fields for name, drivers licence number, etc. for each driver in the household.
I have found some code that updates the form correctly, but it doesn't pass the dynamic form variables to the formmail script. The email gets sent, but the dynamic form fields are blank.
Here's what I have:
Javascript:
Here's the first form to determine how many drivers to add:<SCRIPT LANGUAGE="JavaScript">
function createForm(drivers) {
data = "";
inter = "'";
if (drivers < 6 && drivers > -1) {
for (i=1; i <= drivers; i++) {
if (i < 10) spaces=" ";
else spaces=" ";
data = data + "<table><tr><td bgcolor='#F0F89D' colspan=2>DRIVER " + i + "</td></tr>"
+ "<tr><td>First Name: </td><td><input type='text' size=20 name=" + inter + "First Name" + i + inter + "'></td></tr>"
+ "<tr><td>Last Name: </td><td><input type='text' size=20 name=" + inter + "Last Name" + i + inter + "'></td></tr>"
+ "<tr><td>Date of Birth: </td><td><input type='text' size=20 name=" + inter + "Date of Birth" + i + inter + "'></td></tr>"
+ "<tr><td>Driver License #: </td><td><input type='text' size=20 name=" + inter + "Drivers License #" + i + inter + "'></td></tr>"
+ "<tr><td>Social Security Number: </td><td><input type='text' size=20 name=" + inter + "Social Security Number" + i + inter + "'></td></tr>"
+ "<tr><td>Occupation: </td><td><input type='text' size=20 name=" + inter + "Occupation" + i + inter + "'></td></tr></table>";
}
if (document.layers) {
document.layers.cust.document.write(data);
document.layers.cust.document.close();
}
else {
if (document.all) {
cust.innerHTML = data;
}
}
}
else {
window.alert("Please select up to 5 entries.");
}
}
// End -->
</script>
And finally, here is the form that displays the driver info:<form name=counter><table width="400" border="0" align="center" cellpadding="2" cellspacing="0" bgcolor="#A10035">
<tr>
<td><table width="400" border="0" cellpadding="6" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td width="325">How many drivers in your household?</td>
<td width="25"><input type=text name=drivers size=5></td>
</tr>
<tr>
<td colspan="2"><input name="button" type=button onClick="createForm(counter.drivers.value);" value="Update"></td>
</tr>
</table></td>
</tr>
</table></form>
Any help would be appreciated. Thanks!<form name="webform" method="post" action="cgi-bin/formMail.pl">
<table border=0 cellpadding="4">
<tr valign=top>
<td colspan="2" bgcolor="#8B0027" class="whiteBold">Step 2 - Application</td>
</tr>
<tr><td colspan=2>
<!-- Placeholder for dynamic form contents -->
<span id=cust style="position:relative;"></span>
</td></tr>
<tr>
<td></td>
<td><input type=submit value="Send"></td>
</tr>
</table>
</form>


Reply With Quote

Bookmarks