Question

So, my hope was to create a checkbox that upon clicking would call a function to populate values of one part of a form into another. This is useful when creating a button that says “Use my Main Address” for the Billing or Shipping address. Javascript wise, I’ve created this:

function fillBilling() {
    if (document.getElementById('useMain').checked) {
        document.getElementById('ccFName').value = document.getElementById('firstName').value;  
        document.getElementById('ccLName').value = document.getElementById('lastName').value;  
        document.getElementById('ccAddr1').value = document.getElementById('address1').value;  
        document.getElementById('ccAddr2').value = document.getElementById('address2').value;
        document.getElementById('ccCity').value = document.getElementById('city').value;
        document.getElementById('ccZip').value = document.getElementById('zip').value;
        document.getElementById('ccState').innerHTML = document.getElementById('state').innerHTML;
    }
}

And you know… it works perfectly in Firefox. I’ve used “innerHTML” in the case of the state code because the state code is selected via dropdown, as opposed to a text input.

I’ve seen how there is a problem with innerHTML with regard to tables, but… this isn’t a table. It’s a SELECT tag. Is there a workaround? I’m not looking to add options to the select statement, but in a perfect world, I’d make the same selection from the “state” to the “ccState” value. They’re both populated from the same table, so the list of possible values is identical. Suggestions?

Answer 1

If they’re identical, try updating just the selectedIndex

document.getElementById('ccState').selectedIndex =
    document.getElementById('state').selectedIndex;