Using jQuery, how can I change an input value to equal another by clicking a checkbox?

Question

I'm trying to create a form where the a user can click a checkbox and their physical address properties get populated to their billing address properties.

My checkbox looks like this:

<label for="UseAccountAddress">Use Account Address</label>
<input id="UseAccountAddress" type="checkbox" value="true" name="UseAccountAddress"/>

And a sample address looks like this:

<input id="Street1" type="text" value="" name="Street1"/>
<input id="PrimaryAddressLine1" type="hidden" value="123 Hi Street" name="PrimaryAddressLine1"/>

I tried adding this jquery to my form which is non-functional:

<script type="text/javascript">
    $().ready(function() {
        $("UseAccountAddress").click(function() {
            if ($(this).attr("checked")) {
                $("Street1").value = $("PrimaryAddressLine1").value;
                $("Street2").value = $("PrimaryAddressLine2").value;
                $("City").value = $("PrimaryCity").value;
                $("State").value = $("PrimaryStateID").value;
                $("PostalCode").value = $("PrimaryZip").value;
            }
            else {
                $("Street1").value = "";
                $("Street2").value = "";
                $("City").value = "";
                $("State").value = "";
                $("PostalCode").value = "";
            }
        });
    });
</script>

Using Firebug I can see that my .click function above never gets hit. I'm guessing that I must be referring to the ID of the checkbox incorrectly, but I'm not sure what else it should be. Since thats incorrect, then the way I'm referring to the elements inside the if block are probably incorrect also.

Whats the correct syntax for this?

Answer 1

You should use #UseAccountAddress, and likewise use # elsewhere in your code to indicate to JQuery that you want to operate on the element with a specific ID. Generally "#abc" means select the element with ID abc, ".def" means select the element(s) with CSS class def.

Answer 2

You want to use the val() method to both get and set the properties on the jQuery objects, not a value property. You also need to change your selector(s) When you do a selection based on an id you need to qualify it with the hash/pound sign (#).

$().ready(function() {
    $("#UseAccountAddress").click(function() {
        if ($(this).attr("checked")) {
            $("#Street1").val( $("#PrimaryAddressLine1").val() );
            $("#Street2").val( $("#PrimaryAddressLine2").val() );
            $("#City").val( $("#PrimaryCity").val() );
            $("#State").val( $("#PrimaryStateID").val() );
            $("#PostalCode").val( $("#PrimaryZip").val() );
        }
        else {
            $("#Street1").val('');
            $("#Street2").val('');
            $("#City").val('');
            $("#State").val('');
            $("#PostalCode").val('');
        }
    });
});

Answer 3

<script type="text/javascript">
$(document).ready(function() {
    $("#UseAccountAddress").click(function() {
        if ($(this).is(":checked")) {
            $("#Street1").val($("#PrimaryAddressLine1").val());
            $("#Street2").val($("#PrimaryAddressLine2").val());
            $("#City").val($("#PrimaryCity").val());
            $("#State").val($("#PrimaryStateID").val());
            $("#PostalCode").val($("#PrimaryZip").val());
        } else {
            $("#Street1, #Street2, #City, #State, #PostalCode").val('');
        }
    });
});
</script>