Duplicate Form Fields Using JavaScript

 

This script will duplicate form fields when a user checks the check box. Very useful for order forms etc….

 

 

Example

 

 First Information
First Name:
Last Name:
E-Mail:
Company:
Address:
 Second Information (Check to use First Information: )
First Name:
Last Name:
E-Mail:
Company:
Address:

 

 

Script Source

 

<The Form >

<form method="post" action="" name="myForm">
<table border="1" cellspacing="0" cellpadding="3" width="400">

<tr bgcolor="#006600">
<td colspan=2 width="100%" bgcolor="#006600">
<b><font color=white size="3" face="tahoma, arial">First Information</font></b>
</td>
</tr>
<tr>
<td>
<font size="-1" face="arial, helvetica">First Name:</font>
</td>
<td>
<input type="text" size="15" maxlength="50" name="BFirstName">
</td>
</tr>
<tr>
<td>
<font size="-1" face="arial, helvetica">Last Name:</font>
</td>
<td>
<input type="text" size="15" maxlength="50" name="BLastName">
</td>
</tr>
<tr>
<td>
<font size="-1" face="arial, helvetica">E-Mail:</font>
</td>
<td>
<input type="text" size="15" name="BEmail">
</td>
</tr>
<tr>
<td>
<font size="-1" face="arial, helvetica">Company:</font>
</td>
<td>
<input type="text" size="25" maxlength="100" name="BCompany">
</td>
</tr>
<tr>
<td>
<font size="-1" face="arial, helvetica">Address:</font>
</td>
<td>
<input type="text" size="40" maxlength="35" name="BAddress1">
</td>
</tr>
<tr>
<td>

</td>
<td>
<input type="text" size="40" maxlength="35" name="BAddress2">
</td>
</tr>
<tr>
<td colspan=2 align=center>
</td>
</tr>

<tr bgcolor="#006600">
<td colspan=2 width="100%" bgcolor="#006600">
<b><font color=white size="3" face="tahoma, arial">Second Information</font></b>
<font color=white size="-2" face="arial, helvetica">
(Check to use First Information: <input type="checkbox" name="copy"
OnClick="javascript:infoCopy(this.form);" value="checkbox"> )</font>
</td>
</tr>
<tr>
<td>
<font size="-1" face="arial, helvetica">First Name:</font></td>
<td>
<input type="text" size="15" maxlength="50" name="SFirstName">
</td>
</tr>
<tr>
<td>
<font size="-1" face="arial, helvetica">Last Name:</font>
</td>
<td>
<input type="text" size="15" maxlength="50" name="SLastName">
</td>
</tr>
<tr>
<td>
<font size="-1" face="arial, helvetica">E-Mail:</font>
</td>
<td>
<input type="text" size="15" name="SEmail">
</td>
</tr>
<tr>
<td>
<font size="-1" face="arial, helvetica">Company:</font>
</td>
<td>
<input type="text" size="25" maxlength="100" name="SCompany">
</td>
</tr>
<tr>
<td>
<font size="-1" face="arial, helvetica">Address:</font>
</td>
<td>
<input type="text" size="40" maxlength="35" name="SAddress1">
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="text" size="40" maxlength="35" name="SAddress2">
</td>
</tr>
<tr>
<td colspan=2 align=center>
</td>
</tr>
<tr>
<td colspan=2 align=center>
</td>
</tr>
</table>
</form>

<The JavaScript >

<script type="text/javascript">

<!-- Hide script form old browsers

var SFirstName = "";
var SLastName = "";
var SEmail = "";
var SCompany = "";
var SAddress1 = "";
var SAddress2 = "";

function InitSaveVariables(form) {
SFirstName = form.SFirstName.value;
SLastName = form.SLastName.value;
SEmail = form.SEmail.value;
SCompany = form.SCompany.value;
SAddress1 = form.SAddress1.value;
SAddress2 = form.SAddress2.value;
}

function infoCopy(form) {
if (form.copy.checked) {
InitSaveVariables(form);
form.SFirstName.value = form.BFirstName.value;
form.SLastName.value = form.BLastName.value;
form.SEmail.value = form.BEmail.value;
form.SCompany.value = form.BCompany.value;
form.SAddress1.value = form.BAddress1.value;
form.SAddress2.value = form.BAddress2.value;
}
else {
form.SFirstName.value = SFirstName;
form.SLastName.value = SLastName;
form.SEmail.value = SEmail;
form.SCompany.value = SCompany;
form.SAddress1.value = SAddress1;
form.SAddress2.value = SAddress2;
}
}
// End hide -->
</script>

 

Please let me know if this script was helpful to you.

[rating]