Billing to Shipping

‹ Back

Ornament.C.FormBillingToShipping.create is a really easy-to-use helper method to copy data from one group of fields to another group of fields when a checkbox is selected.

All you need to do is first pass in the checkbox selector, then an object of key/value pair selectors matching the fields up.

Combine with show.js to hide the second group of fields when the checkbox is selected for a nicer user experience.

Take a look at the JS tab below to see how it works.

<div class="inputs">
  <div class="control-group string required test_form_billing_address_1 form--medium"><div class="control-group--label"><label class="string required control-label" for="test_form_billing_address_1"><abbr title="required">*</abbr> Billing address 1</label></div><div class="controls"><input class="string required" required="required" aria-required="true" type="text" name="test_form[billing_address_1]" id="test_form_billing_address_1" /></div></div>
  <div class="control-group string required test_form_billing_address_2 form--medium"><div class="control-group--label"><label class="string required control-label" for="test_form_billing_address_2"><abbr title="required">*</abbr> Billing address 2</label></div><div class="controls"><input class="string required" required="required" aria-required="true" type="text" name="test_form[billing_address_2]" id="test_form_billing_address_2" /></div></div>
  <div class="control-group string required test_form_billing_state form--medium"><div class="control-group--label"><label class="string required control-label" for="test_form_billing_state"><abbr title="required">*</abbr> Billing state</label></div><div class="controls"><input class="string required" required="required" aria-required="true" type="text" name="test_form[billing_state]" id="test_form_billing_state" /></div></div>
  <div class="control-group string required test_form_billing_country form--medium"><div class="control-group--label"><label class="string required control-label" for="test_form_billing_country"><abbr title="required">*</abbr> Billing country</label></div><div class="controls"><input class="string required" required="required" aria-required="true" type="text" name="test_form[billing_country]" id="test_form_billing_country" /></div></div>
  <div class="control-group control-group__boolean boolean optional test_form_use_billing_address form--medium"><label class="control-group__boolean--wrapper"><div class="control-group__boolean--input checkbox"><input name="test_form[use_billing_address]" type="hidden" value="0" /><input class="boolean optional" type="checkbox" value="1" name="test_form[use_billing_address]" id="test_form_use_billing_address" /></div><div class="control-group__boolean--label"><label class="boolean optional control-label" for="test_form_use_billing_address">Use billing address</label></div></label></div>
  <div class="inputs" data-show="test_form_use_billing_address" data-show-inverse>
    <div class="control-group string required test_form_shipping_address_1 form--medium"><div class="control-group--label"><label class="string required control-label" for="test_form_shipping_address_1"><abbr title="required">*</abbr> Shipping address 1</label></div><div class="controls"><input class="string required" required="required" aria-required="true" type="text" name="test_form[shipping_address_1]" id="test_form_shipping_address_1" /></div></div>
    <div class="control-group string required test_form_shipping_address_2 form--medium"><div class="control-group--label"><label class="string required control-label" for="test_form_shipping_address_2"><abbr title="required">*</abbr> Shipping address 2</label></div><div class="controls"><input class="string required" required="required" aria-required="true" type="text" name="test_form[shipping_address_2]" id="test_form_shipping_address_2" /></div></div>
    <div class="control-group string required test_form_shipping_state form--medium"><div class="control-group--label"><label class="string required control-label" for="test_form_shipping_state"><abbr title="required">*</abbr> Shipping state</label></div><div class="controls"><input class="string required" required="required" aria-required="true" type="text" name="test_form[shipping_state]" id="test_form_shipping_state" /></div></div>
    <div class="control-group string required test_form_shipping_country form--medium"><div class="control-group--label"><label class="string required control-label" for="test_form_shipping_country"><abbr title="required">*</abbr> Shipping country</label></div><div class="controls"><input class="string required" required="required" aria-required="true" type="text" name="test_form[shipping_country]" id="test_form_shipping_country" /></div></div>
  </div>
</div>
  Ornament.onLoad(function(){
    Ornament.C.FormBillingToShipping.create("#test_form_use_billing_address", {
      "#test_form_billing_address_1": "#test_form_shipping_address_1",
      "#test_form_billing_address_2": "#test_form_shipping_address_2",
      "#test_form_billing_state": "#test_form_shipping_state",
      "#test_form_billing_country": "#test_form_shipping_country"
    });
  });