Billing Address Same as Shipping Address jQuery

Question

I am having trouble getting the Billing Address to copy over the Shipping Address using jQuery. I have successfully done this using a plain-jane form with no custom jQuery elements. But when I add the custom UI to the checkbox, it seems to break the code. I have tried several code changes but none of them are working.

When a user clicks on "My billing address is the same as my shipping address", nothing is happening. Here is my jQuery code:

<script type="text/javascript">
$(document).ready(function(){ 
    $('#check-address').click(function(){
        if($('#check-address').attr('checked')){
            $('#address-field1').val($('#address-field').val());
            $('#city-field1').val($('#city-field').val());
            $('#zip-field1').val($('#zip-field').val());
            var state = $('#state-field option:selected').val();
            $('#state-field1 option[value=' + state + ']').attr('selected','selected');
        } else { 
            //Clear on uncheck
            $('#address-field1').val("");
            $('#city-field1').val("");
            $('#zip-field1').val("");
            $('#state-field1 option[value=Nothing]').attr('selected','selected');
        };

    });
});
</script>

Any help is greatly appreciated!

Answer 1

Demo of options

$('#check-address').attr('checked')

should could be

$('#check-address').is(':checked')

---

As pointed out in comments, there are many ways to skin this cat. http://jsfiddle.net/sRt6G/1/ this.checked seems to be the simplest.

Answer 2

The plugin you're using to prettify your checkbox (or whatever it does), is replacing the <input type="checkbox"/> with a div , and simulating events on the checkbox.

It doesn't propagate a click event, but it does propagate a change , so you should listen for that instead;

$('#check-address').change(/* function */);

To improve your code you might want to substitute the check for attr('checked') with prop('checked') , but your code will still work regardless. Reasons for this are outlined on the jQuery documentation for prop() ; http://api.jquery.com/prop

Answer 3

You are using jquery 1.7 . You should use prop instead of attr

  $('#check-address').prop('checked')



       $(elem).attr('checked')    // returned true (Boolean) prior to 1.6
        $(elem).attr('checked')   // now returns "checked" (string) versions after 1.6
        $(elem).prop('checked')    // now returns true (Boolean) versions after 1.6

Answer 4

It could be that you're trying to go on a click event of a checkbox. Have you tried:

$('#check-address').on('change', function (e) {...

and

 if ($('#check-address').is(":checked")....

Answer 5

This might help too.

$('input[name=city\\[' + this.value + '\\]]').val($('input[name=city\\[1\\]]').val());

Demo

Fill out the form on top, then use the check boxes to copy the values of the fields.

It works with dynamically created fields. If the form is hard-coded, replace this.value with the index of the field.

Answer 6

you might wanna try the following code: $("input.billingAddress").on("change",function(){

            var val1 = $("input.street").val();
            var val2 = $("input.suitNumber").val();
            var val3 = $("input.city").val();
            if(this.checked)
            {
                $("input.streetb").val(val1);
                $("input.suitNumberb").val(val2);
                $("input.cityb").val(val3);
            }

            else
            {
                $("input.streetb").val("");
                $("input.suitNumberb").val("");
                $("input.cityb").val("");
            }

            });