---

Note: this article based on v1.11

I had to edit content today on the checkout at myPMCinside.com. They need the checkbox on their "copy shipping address to billing address" to actually work!

Here's what they had:
function copy_shipping_to_billing(checkbox) {
  if (checkbox.checked) {
    var elements_to_copy = Array('first_name', 'last_name', 'address1', 'address2', 'city', 'zip', 'phone');
    for (var i in elements_to_copy) {
      document.getElementById('b_' + elements_to_copy[i]).value = document.getElementById('s_' + elements_to_copy[i]).value;
    }
    document.getElementById('b_state_id').selectedIndex = document.getElementById('s_state_id').selectedIndex;
  }
}


Now using mootools (and ignoring as much of the existing code as possible) this is what I gave them:


function copy_shipping_to_billing() {
  if ($('billing_address_same').getProperty('checked')==true) {
    var elements_to_copy = Array('first_name', 'last_name', 'address1', 'address2', 'city', 'zip', 'phone');
    for (var i in elements_to_copy) {
      if (document.getElementById('s_' + elements_to_copy[i])) document.getElementById('b_' + elements_to_copy[i]).value = document.getElementById('s_' + elements_to_copy[i]).value;
    }
    document.getElementById('b_state_id').selectedIndex = document.getElementById('s_state_id').selectedIndex;
  }
}

window.addEvent('domready',function() {
  $$('input').forEach(function(item,index) {
    alert(item.getProperty('id'));
    item.addEvent('mousedown',function() {
      copy_shipping_to_billing();
    });
    item.addEvent('keyup',function() {
      copy_shipping_to_billing();
    });
  });
});


You can check this out by going through the checkout process (when you get there, click "buy"). Once you've checked the shipping box, note how the billing address box responds instantly thanks to the mootools addEvent that I placed on all the input elements.

So, lemme mention two things I did to the existing function. I didn't want to pass in the checkbox, so I let mootools get the result of that property for me (no other element checkboxes or shipping forms existed on this page).

Secondly, I did a test on whether or not the particular element in the array existed because the final element in the array was a function! It was causing a javascript error...and if you didn't notice, you should have...but I SHOULD have used mootools dollar to pick up the element and then replace all the other useless document.getElementById hoo-ha in there.

But I didn't cause I needed to hurry up and go home cause it's FRIDAY!

Last Updated: 2008-09-18 07:50:09