Run code on tab switch

Is there a way to execute some PHP code when a user changes between tabs on a multi-tab form? Specifically, I need a field on tab #5 to calculate based on answers input on tabs #1-#4.

Thanks!!!
Rick

Hi Rick,

PHP, No, that requires the form to be submitted to the server.

JavaScript, probably, though I'm not sure what event is fired on a tab change.

Bob

Ok, thanks! How would I do this:

I have people submitting an address to be using for sending travel documents (registering for a trip). Then, they will put in billing information to be submitted to PayPal for settling the trip deposit. I want a way to pre-populate the billing address info with the shipping info, and they can change it if necessary. Any idea how to do this?

Rick

For the last request, just in theory how would I do it? I am certainly not expecting you to do it for me!! LOL

Hi Rick,

Here are a couple of possibilities - though not linked to the tab switch yet.

The first one copies into the delivery address as the billing address is typed - this might work across the two tabs - but not tested. Demo form is here.

This uses two containers of type custom each with a div set up in it with ids billing_address and shipping address.

The inputs inside the containers are billing_address, billing_city, billing_state and shipping_address_shipping_city, shipping_state. The second part of the names must match!

Then this code in a Load JS action in the On Load event:

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;
    });
  });
});

The second option is to use a 'Copy address' button. Demo form is here

The form element setup is identical except for the button with is a Submit Button element with type = regular button and id copy_address.

The JavaScript for this version is

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;
      }
    });
  });
});

Bob

PS I'm sure that the first one could also work with drop-down selectors - just didn't get round to adding it.

Wow, thanks Bob!! That was WAY more than I expected to receive. I am going to use the copy button sample for my site. Thanks again for helping!!!!

Rick

I cannot get this to work. The customer first enters a shipping address with fields named:
shipping_street
shipping_city
shipping_state
shipping_zip
shipping_homephone

Then, on another tab, there are the following fields for billing:
billing_street
billing_city
billing_state
billing_zip
billing_homephone

The shipping section is contained within a div like:

<div id="shipping_address">

and the billing section within a div like:

<div id="billing_address">

The I insert the JS code above in a Load JS action in the On Load event. Nothing happens when clicking the button. I tried changing the JS code because your example copies the billing address to the shipping, so I thought that may be the cause of problems (copying the wrong direction). Nothing.

The live form can be found at http://phipsicruise.com/index.php?option=com_chronoforms&chronoform=trip_registration.

Thanks!
Rick

The changed JS code I am using is:

window.addEvent('domready', function() {
  $('copy_address').addEvent('click', function() {
    $$('div#shipping_address input, div#shipping_address select').each(function(item) {
      var target_id;
      target_id = item.id.replace('shipping_', 'billing_');
      if(typeof $(target_id) !== undefined) {
        $(target_id).value = item.value;
      }
    });
  });
});

Oh, I have it!! Looking at your JS code, I realized that each field had to have the ID set. For some reason, I was assuming that so long as I had the fields named the way you said it would work. But the code calls by field ID. So, after setting the field IDs correctly, everything worked. Thanks, Bob!!!
😀 😀 😀 😀 😀
Rick

Hi Rick,

I could probably have been clearer. I always (well 99.8% of the time) use IDs with JavaScript. The MooTools syntax works neatly with them and, unlike names, they should be unique.

Bob