This is a simple little exercise to show how to copy form values from one set of fields into another. The sample will be a “check box if billing information is the same as contact information.”

To set this up, first we create the form fields:

<fieldset>
<legend>Contact Information</legend>
<b>Name</b> (first, last)<br>
<input id="ContactFirstName" name="ContactFirstName" style="width: 100px;" value="" type="text">&amp;nbsp;
<input id="ContactLastName" name="ContactLastName" style="width: 120px;" value="" type="text">
<br><br>

<b>Address</b><br>
<input id="ContactAddress1" name="ContactAddress1" style="width: 150px;" value="" type="text"><br><br>
<input id="ContactAddress2" name="ContactAddress2" style="width: 150px;" value="" type="text">
<br><br>

<b>City, State</b><br>

<input id="ContactCity" name="ContactCity" style="width: 100px;" value="" type="text">,&amp;nbsp;
<select id="ContactState" name="ContactState"><option value="AK">Alaska</option>
</select>
<br><br>

<b>Zip Code</b><br>
<input id="ContactZip" name="ContactZip" style="width: 70px;" value="" type="text">
</fieldset><br/>

<fieldset>
<legend>Billing Information</legend>
<input onclick="CopyContactInfo()" type="checkbox"> Check box if same as Contact Information
<b>Name</b> (first, last)<br>
<input id="MailingFirstName" name="MailingFirstName" style="width: 100px;" value="" type="text">&amp;nbsp;
<input id="MailingLastName" name="MailingLastName" style="width: 120px;" value="" type="text">
<br><br>

<b>Address</b><br>
<input id="MailingAddress1" name="MailingAddress1" style="width: 150px;" value="" type="text"><br><br>
<input id="MailingAddress2" name="MailingAddress2" style="width: 150px;" value="" type="text">
<br><br>

<b>City, State</b><br>

<input id="MailingCity" name="MailingCity" style="width: 100px;" value="" type="text">,&amp;nbsp;
<select id="MailingState" name="MailingState"><option value="AK">Alaska</option>
</select>
<br><br>

<b>Zip Code</b><br>
<input id="MailingZip" name="MailingZip" style="width: 70px;" value="" type="text">
</fieldset>

Next we paste in the jquery code:

function CopyContactInfo() {
$("#BillingAddress1").val($("#ContactAddress1").val());
$("#BillingAddress2").val($("#ContactAddress2").val());
$("#BillingCity").val($("#ContactCity").val());
$("#BillingState").val($("#ContactState").val());
$("#BillingZip").val($("#ContactZip").val());
}

That’s it!