MistOnline

JavaScripts

Javascript copy paste form fields

Apr 26, 2011

Last updated on October 4th, 2022 at 01:44 pm

This script will simply copy the form field value from one form to another with ease, ie It allows the user to click a checkbox on a form to duplicate information.

For example, if you have a form which ask user to input billing and shipping details, they can easily copy their billing information into the shipping information fields (assuming they are the same) with one click! .Very simple. In this we have 2 form one is the Bill Form and other is the Shipping form.

Step 1, Add the javascript

Add the script below within the HEAD tag

<SCRIPT LANGUAGE="JavaScript">
var ShipFirst = "";
var ShipLast = "";
var ShipEmail = "";
var ShipCompany = "";
var ShipAddress1 = "";
var ShipAddress2 = "";
var ShipCity = "";
var ShipState = "";
var ShipStateIndex = 0;
var ShipZip = "";
var ShipConfirm = 0;

function InitSaveVariables(form) {
ShipFirst = form.ShipFirst.value;
ShipLast = form.ShipLast.value;
ShipEmail = form.ShipEmail.value;
ShipCompany = form.ShipCompany.value;
ShipAddress1 = form.ShipAddress1.value;
ShipAddress2 = form.ShipAddress2.value;
ShipCity = form.ShipCity.value;
ShipZip = form.ShipZip.value;
ShipStateIndex = form.ShipState.selectedIndex;
ShipState = form.ShipState[ShipStateIndex].value;
ShipConfirm = form.ShipConfirm.checked;
}

function ShipToBillPerson(form) {
if (form.copy.checked) {
InitSaveVariables(form);
form.ShipFirst.value = form.BillFirst.value;
form.ShipLast.value = form.BillLast.value;
form.ShipEmail.value = form.BillEmail.value;
form.ShipCompany.value = form.BillCompany.value;
form.ShipAddress1.value = form.BillAddress1.value;
form.ShipAddress2.value = form.BillAddress2.value;
form.ShipCity.value = form.BillCity.value;
form.ShipZip.value = form.BillZip.value;
form.ShipState.selectedIndex = form.BillState.selectedIndex;
form.ShipConfirm.checked = form.BillConfirm.checked;
}
else {
form.ShipFirst.value = ShipFirst;
form.ShipLast.value = ShipLast;
form.ShipEmail.value = ShipEmail;
form.ShipCompany.value = ShipCompany;
form.ShipAddress1.value = ShipAddress1;
form.ShipAddress2.value = ShipAddress2;
form.ShipCity.value = ShipCity;
form.ShipZip.value = ShipZip;       
form.ShipState.selectedIndex = ShipStateIndex;
form.ShipConfirm.checked = ShipConfirm;
   }
}
</script>

As you might have noticed from the Javascript above we are basically getting all the text values by calling each input tag name from the BILL form and assigning in to the SHIP form input fields as their value (if the bill form is filled otherwise it will be left blank/null), for example

ShipFirst = form.ShipFirst.value;
ShipLast = form.ShipLast.value;
ShipEmail = form.ShipEmail.value;
ShipCompany = form.ShipCompany.value;
ShipAddress1 = form.ShipAddress1.value;
ShipAddress2 = form.ShipAddress2.value;
ShipCity = form.ShipCity.value;
ShipZip = form.ShipZip.value;
ShipStateIndex = form.ShipState.selectedIndex;
ShipState = form.ShipState[ShipStateIndex].value;
ShipConfirm = form.ShipConfirm.checked;

Step 2, Copy the FORM

Insert the code below within the BODY tag

<form method="post" action="http://www.your-web-site-address-here.com/script.cgi" name="billform">
<table border="1" cellspacing="0" cellpadding="3" width="400">
<tbody><tr bgcolor="#000">
<td colspan="2" width="100%" bgcolor="#000">
<b><font color="white" size="-1" face="arial, helvetica">Billing 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="BillFirst">
</td>
</tr>
<tr>
<td>
<font size="-1" face="arial, helvetica">Last Name:</font>
</td>
<td>
<input type="text" size="15" maxlength="50" name="BillLast">
</td>
</tr>
<tr>
<td>
<font size="-1" face="arial, helvetica">E-Mail:</font>
</td>
<td>
<input type="text" size="15" name="BillEmail">
</td>
</tr>
<tr>
<td>
<font size="-1" face="arial, helvetica">Company:</font>
</td>
<td>
<input type="text" size="25" maxlength="100" name="BillCompany">
</td>
</tr>
<tr>
<td>
<font size="-1" face="arial, helvetica">Address:</font>
</td>
<td>
<input type="text" size="40" maxlength="35" name="BillAddress1">
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="text" size="40" maxlength="35" name="BillAddress2">
</td>
</tr>
<tr>
<td>
<font size="-1" face="arial, helvetica">City:</font>
</td>
<td>
<input type="text" size="25" maxlength="21" name="BillCity">
</td>
</tr>
<tr>
<td>
<font size="-1" face="arial, helvetica">State:</font>
</td>
<td>
<select name="BillState"><option selected="">
</option><option value="AL">ALABAMA
</option><option value="AK">ALASKA
</option><option value="AZ">ARIZONA
</option><option value="AR">ARKANSAS
</option><option value="CA">CALIFORNIA
</option><option value="CO">COLORADO
</option><option value="CT">CONNECTICUT
</option><option value="DE">DELAWARE
</option><option value="FL">FLORIDA
</option><option value="GA">GEORGIA
</option><option value="HI">HAWAII
</option><option value="ID">IDAHO
</option><option value="IL">ILLINOIS
</option><option value="IN">INDIANA
</option><option value="IND">INDIA
</option><option value="IA">IOWA
</option><option value="KS">KANSAS
</option><option value="KY">KENTUCKY
</option><option value="LA">LOUISIANA
</option><option value="ME">MAINE
</option><option value="MD">MARYLAND
</option><option value="MA">MASSACHUSETTS
</option><option value="MI">MICHIGAN
</option><option value="MN">MINNESOTA
</option><option value="MS">MISSISSIPPI
</option><option value="MO">MISSOURI
</option><option value="MT">MONTANA
</option><option value="NE">NEBRASKA
</option><option value="NV">NEVADA
</option><option value="NH">NEW HAMPSHIRE
</option><option value="NJ">NEW JERSEY
</option><option value="NM">NEW MEXICO
</option><option value="NY">NEW YORK
</option><option value="NC">NORTH CAROLINA
</option><option value="ND">NORTH DAKOTA
</option><option value="OH">OHIO
</option><option value="OK">OKLAHOMA
</option><option value="OR">OREGON
</option><option value="PA">PENNSYLVANIA
</option><option value="RI">RHODE ISLAND
</option><option value="SC">SOUTH CAROLINA
</option><option value="SD">SOUTH DAKOTA
</option><option value="TN">TENNESSEE
</option><option value="TX">TEXAS
</option><option value="UT">UTAH
</option><option value="VT">VERMONT
</option><option value="VA">VIRGINIA
</option><option value="WA">WASHINGTON
</option><option value="DC">WASHINGTON, D.C.
</option><option value="WV">WEST VIRGINIA
</option><option value="WI">WISCONSIN
</option><option value="WY">WYOMING
</option></select>
 
 
<input type="text" size="10" maxlength="10" name="BillZip">
 
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="checkbox" name="BillConfirm" selected=""> <font face="arial, helvetica" size="-2">Send confirmation email via email</font>
</td>
</tr>
<tr bgcolor="#003399">
<td colspan="2" width="100%" bgcolor="#883399">
<b><font color="white" size="-1" face="arial, helvetica">Shipping Information</font></b>
<font color="white" size="-2" face="arial, helvetica">
(Check to use Billing Information: <input type="checkbox" name="copy" onclick="javascript:ShipToBillPerson(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="ShipFirst">
</td>
</tr>
<tr>
<td>
<font size="-1" face="arial, helvetica">Last Name:</font>
</td>
<td>
<input type="text" size="15" maxlength="50" name="ShipLast">
</td>
</tr>
<tr>
<td>
<font size="-1" face="arial, helvetica">E-Mail:</font>
</td>
<td>
<input type="text" size="15" name="ShipEmail">
</td>
</tr>
<tr>
<td>
<font size="-1" face="arial, helvetica">Company:</font>
</td>
<td>
<input type="text" size="25" maxlength="100" name="ShipCompany">
</td>
</tr>
<tr>
<td>
<font size="-1" face="arial, helvetica">Address:</font>
</td>
<td>
<input type="text" size="40" maxlength="35" name="ShipAddress1">
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="text" size="40" maxlength="35" name="ShipAddress2">
</td>
</tr>
<tr>
<td>
<font size="-1" face="arial, helvetica">City:</font>
</td>
<td>
<input type="text" size="25" maxlength="21" name="ShipCity">
</td>
</tr>
<tr>
<td>
<font size="-1" face="arial, helvetica">State:</font>
</td>
<td>
<select name="ShipState"><option selected="">
</option><option value="AL">ALABAMA
</option><option value="AK">ALASKA
</option><option value="AZ">ARIZONA
</option><option value="AR">ARKANSAS
</option><option value="CA">CALIFORNIA
</option><option value="CO">COLORADO
</option><option value="CT">CONNECTICUT
</option><option value="DE">DELAWARE
</option><option value="FL">FLORIDA
</option><option value="GA">GEORGIA
</option><option value="HI">HAWAII
</option><option value="ID">IDAHO
</option><option value="IL">ILLINOIS
</option><option value="IN">INDIANA
</option><option value="IND">INDIA
</option><option value="IA">IOWA
</option><option value="KS">KANSAS
</option><option value="KY">KENTUCKY
</option><option value="LA">LOUISIANA
</option><option value="ME">MAINE
</option><option value="MD">MARYLAND
</option><option value="MA">MASSACHUSETTS
</option><option value="MI">MICHIGAN
</option><option value="MN">MINNESOTA
</option><option value="MS">MISSISSIPPI
</option><option value="MO">MISSOURI
</option><option value="MT">MONTANA
</option><option value="NE">NEBRASKA
</option><option value="NV">NEVADA
</option><option value="NH">NEW HAMPSHIRE
</option><option value="NJ">NEW JERSEY
</option><option value="NM">NEW MEXICO
</option><option value="NY">NEW YORK
</option><option value="NC">NORTH CAROLINA
</option><option value="ND">NORTH DAKOTA
</option><option value="OH">OHIO
</option><option value="OK">OKLAHOMA
</option><option value="OR">OREGON
</option><option value="PA">PENNSYLVANIA
</option><option value="RI">RHODE ISLAND
</option><option value="SC">SOUTH CAROLINA
</option><option value="SD">SOUTH DAKOTA
</option><option value="TN">TENNESSEE
</option><option value="TX">TEXAS
</option><option value="UT">UTAH
</option><option value="VT">VERMONT
</option><option value="VA">VIRGINIA
</option><option value="WA">WASHINGTON
</option><option value="DC">WASHINGTON, D.C.
</option><option value="WV">WEST VIRGINIA
</option><option value="WI">WISCONSIN
</option><option value="WY">WYOMING
</option></select>
 
 
<input type="text" size="10" maxlength="10" name="ShipZip">
 
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="checkbox" name="ShipConfirm" selected=""> <font face="arial, helvetica" size="-2">Send confirmation email via email</font>
</td>
</tr>
</tbody></table>
</form>

DEMO

Related Tutorials:

Related Post

JavaScripts

How to toggle password in input field using Javascript(show / hide)

admin May 16, 2016
JavaScripts

How to create custom right click menu using Javascript

admin May 12, 2016
JavaScripts PHP

How to force download file using php

admin Feb 10, 2015

Leave a Reply

Your email address will not be published. Required fields are marked *