Question

First off sorry for a re-post, I voted to delete my old post because I’m asking for help on the code now, not just which way is the better route. Any my code has changed several times

On my page there is a drop down to select a country, dynamically loaded from a db. Once the user selects a country two things can happen. 1) If they select Canada or the US a second drop-down appears and the user can select a region. 2) If the user selects any other country it creates an input box so that the user can type the region instead. This all works fine.

Now there is a third input which takes the province/state value so it can be posted. There are only two of us who will use this form so I’m not worried about JavaScript being turned off in the browser.

My issue is that when the user first selects the Canada/US and a region, nothing is filled into the third input unless they change the country selection. However, if they select a country other than Canada/US and have to type the region, it works as expected.

Here is an example of the issue: http://jsfiddle.net/owalsh/BQXZA/3/

If anyone can tell me why I’d appreciate it, thanks

Answer 1

Working here: http://jsfiddle.net/5A4v4/11/

HTML:

<form id="customer_bill_add_post" name="customer_bill_add_post">
<select id="country" name="country">
    <option value="0">Select a country</option>
    <option value="CA">Canada</option>
    <option value="US">United States</option>
    <option value="OT">Other</option>

</select>

<select id="province_select" name="province_select">
    <option value="0">Select a Province</option>
    <option value="AB">Alberta</option>
    <option value="AL">Alabama</option>
</select>

<input type="text" id="province_input" name="province_input">
<input type="text" id="province" name="province" />
    </form>

Jquery: code (there was some extra change event binding going on) you can prettify it.

        $(function(){
            //initially hide the textbox
            $("#province_input").hide();
            $("#province_select").hide();

            $('#country').change(function() {
                if($(this).find('option:selected').val() == "CA"){
                 $("#province_select").show();
                 $("#province_input").hide();
                 } else if($(this).find('option:selected').val() == "US"){
                 $("#province_select").show();
                 $("#province_input").hide();
                 } else {
                 $("#province_input").show();
                 $("#province_select").hide();
                }
             });


$('#country, #province_select, #province_input').bind("change", function() {
    if($('#country').find('option:selected').val() == "CA"){  
    document.customer_bill_add_post.province.value = document.customer_bill_add_post.province_select.value;
    } else if($('#country').find('option:selected').val() == "US"){
        document.customer_bill_add_post.province.value = document.customer_bill_add_post.province_select.value;
    } else {
        //alert('foo');
        document.customer_bill_add_post.province.value = document.customer_bill_add_post.province_input.value;
        }
});        


});

Cheers,