Published on
The most common example of this request is when you need to have both a billing address and a shipping address and you want to copy the address over to save the user filling out the same or similar details twice. This FAQ looks at some ways to do this with JavaScript.
First a non-JavaScript comment. The simplest solution is to show a checkbox that asks if the shipping address is the same as the billing address. If the user checks it then you can do all of the copying using PHP in a custom code action after the form is submitted.
I have worked up simple examples of two other methods to do this using JavaScript that might be useful to you in different places.
Each form uses two containers of type custom each with a div set up in it with ids billing_data and shipping_data.
The inputs inside the containers are billing_address, billing_city, billing_state and shipping_address_shipping_city, shipping_state. You can use any names but the prefixes should be consistent and the second part of the names must match!
Copy as you type
This version completes the second matching input as you type in the first one. To use it add this code in a Load JavaScript action before the HTML (Render form) action in the form On Load event (or in the event loading this page in a multi-page form):
ChronoForms v4
window.addEvent('domready', function() {
var inputs;
inputs = ['address', 'city', 'state'];
inputs.each(function(item) {
$('billing_' + item).addEvent('keyup', function(event) {
var source, target_id;
source = event.target;
target_id = source.id.replace('billing_', 'shipping_');
$(target_id).value = source.value;
});
});
});
ChronoForms v5
jQuery(document).ready(function (jQ) {
var inputs;
inputs = ['address', 'city', 'state'];
inputs.each(function(item) {
jQ('#billing_' + item).on('keyup', function() {
var source, source_id, target_id;
source = jQ(this);
source_id = source.attr('id');
target_id = source_id.replace('billing_', 'shipping_');
jQ('#'+target_id).val(source.val());
});
});
});
Note: There are some potential problems with this example; if the user edits the second set of boxes directly, then goes back and changes the same box in the first set the edits will be over-written.
Copy on a button click
This uses an extra button element in the form set-up - a Submit Button element with type = regular button and id copy_address.
The JavaScript in the Load JS action is:
ChronoForms v4
window.addEvent('domready', function() {
$('copy_address').addEvent('click', function() {
$$('div#billing_address input, div#billing_address select').each(function(item) {
var target_id;
target_id = item.id.replace('billing_', 'shipping_');
if(typeof $(target_id) !== undefined) {
$(target_id).value = item.value;
}
});
});
});ChronoForms v5
jQuery(document).ready(function (jQ) {
jQ('#copy_address').on('click', function() {
var inputs,source, source_id, target_id;
inputs = jQ('#billing_data :input');
jQ.each(inputs, function() {
source = jQ(this);
source_id = source.attr('id');
target_id = source_id.replace('billing_', 'shipping_');
jQ('#'+target_id).val(source.val());
});
});
});
These scripts copy over the entries when the button is clicked and so are less open to accidental errors. If the user goes back and makes changes to the first set then they will only be copied to the second set if the button is clicked again.
I also added a drop-down select to this example.
All these code snippets should be taken as basic examples that may well need editing to work with your forms.
Comments: