[SOLVED] Checkbox to copy data from fields to other fields

Hello,

I have a form that collects both billing address and service address info. Most times these are the same and for some people they are different. For the folks who have the same billing and service addresses is there any way to create a checkbox that when selected it will pre fill their service address with the data they already enterd in the billing address fields? This way they won't have to enter the same info twice.

Thanks, Gabe

Hi Gabe,

You will need a piece of JS code which will set the value attributes of the shipping fields to the same values of billing ones on the checkbox onChange event, you can do this easily if you have some Mootools knowledge, if not then please let us know and I will try to post an example soon.

Regards,
Max

Thanks Max,

I will definitly need the code. I will also do some searching and if I find it, I will post back.

Gabe

Any chance on getting the code for this that will work in V4 from anyone?

Hi gabedaly,

What is the Form HTML you want to use it with?

Bob

Standard form (name email address etc) with authorize.net plugin. I can map all my fields if you can provide a small example. Hope this helps.

Thanks Bob,
Gabe

Hi Gabe,

Simple example as requested.
Form HTML:

<div class="ccms_form_element cfdiv_text" id="label_text_container_div">
    <label for="invoice_name">Label Text</label>
    <input id="invoice_name" maxlength="150" size="30" class="" title="" type="text" value="" name="invoice_name" />
    <div class="clear"></div>
    <div id="error-message-invoice_name"></div>
</div>
<div class="ccms_form_element cfdiv_checkbox" id="copy_invoice_to_shipping__container_div">
    <input value="1" id="copy" title="" type="checkbox" name="copy" class="label_right" />
    <label for="copy" class="full_label">Copy invoice to shipping?</label>
    <div class="clear"></div>
    <div id="error-message-copy"></div>
</div>
<div class="ccms_form_element cfdiv_text" id="label_text_container_div">
    <label for="shipping_name">Label Text</label>
    <input id="shipping_name" maxlength="150" size="30" class="" title="" type="text" value="" name="shipping_name" />
    <div class="clear"></div>
    <div id="error-message-shipping_name"></div>
</div>

Load JS:

window.addEvent('domready', function() {
  $('copy').addEvent('click', function() {
    if ( $('copy').checked ) {
      $('shipping_name').value = $('invoice_name').value;
    } else if ( $('shipping_name').value === $('invoice_name').value ) {
      $('shipping_name').value = '';
    }
  });
});

When the checkbox is Clicked. If it is checked then the invoice_name is copied to the shipping_name; if it's not checked and the two values are the same then the shipping_name is cleared.

Bob

Thank you for the example Bob! But I cannot get it to work. I have placed the following code in a Load JS action as the first On Load event. The field names are correct and when I click on the checkbox nothing happens. Does this info copy only after the user hits the submit button or is it supposed to dynamically change when clicked or unclicked?

window.addEvent('domready', function() {
  $('copyaddress').addEvent('click', function() {
    if ( $('copyaddress').checked ) {
      $('bilingaddress').value = $('serviceaddress').value;
    } else if ( $('billingaddress').value === $('serviceaddress').value ) {
      $('billingaddress').value = '';
 $('bilingcity').value = $('servicecity').value;
    } else if ( $('billingcity').value === $('servicecity').value ) {
      $('billingcity').value = '';
    }
  });
});

Thank you,
Gabe

Hi Gabe,

It works when the checkbox is clicked, or should do.

You have different spellings of 'biling'/'billing' which are probably breaking the code and the if logic looks a bit dodgy. I suggest that you get the basic version working on one input then add another input to see how to scale it.

Worth using a web developer tool to check for errors too: FireBug on FireFox, F12 in IE8/9 shift+ctrl+i on Chrome.

Bob

Bob thank you again. I guess I was too tired and missed the spelling. Got it to work as you know it should. Can you please help me with mapping other fields? I tried this but only the first field copies. I know it's simple coding error but I don't know what to change or add.

window.addEvent('domready', function() {
  $('copyaddress').addEvent('click', function() {
    if ( $('copyaddress').checked ) {
      $('billingaddress').value = $('serviceaddress').value;
    } else if ( $('billingaddress').value === $('serviceaddress').value ) {
      $('billingaddress').value = '';
      $('billingcity').value = $('servicecity').value;
    } else if ( $('billingcity').value === $('servicecity').value ) {
      $('billingcity').value = '';
    }
  });
});

Hi Gabe,

This appears to be working

window.addEvent('domready', function() {
  var invoice_items = Array(
    'invoice_name',
    'invoice_phone'
  );
  var shipping_items = Array(
    'shipping_name',
    'shipping_phone'
  );
  $('copy').addEvent('click', function() {
    Array.each(invoice_items, function(item, index) {
      if ( $('copy').checked ) {
        $(shipping_items[index]).value = $(item).value;
      } else if ( $(shipping_items[index]).value === $(item).value ) {
        $(shipping_items[index]).value = '';
      }
    });
  });
});

The two arrays at the beginning take the id's of the inputs you want to copy (invoice_items) and to copy to (shipping_items). There should be the same number of items in each array and the order should match i.e. the third item in the first array will be copied to the third item in the second array.

Bob

THANK YOU THANK YOU!! Works perfect even with a drop down state select. Beer is on its way.