Question

My contact form page, for user edit details, has two drop-down fields, ‘country’ and ‘city’.
I would like when a user is edit his details that the ‘city’ field will be disabled until something is selected in the ‘country’ drop-down menu.

<form name="item" action="<?php echo base_url(true) ?>" method="post">

<label><?php _e('Country', 'my_theme'); ?></label>
<?php ItemForm::country_select(get_countries(),user()) ; ?>

<label><?php _e('City', 'my_theme'); ?></label>
<?php ItemForm::cities_select(get_cities(),user()) ; ?>

<button class="itemFormButton" type="submit"></button>
</form>

I’ve tried ‘onchange’ in javascript, probably with wrong syntax…

How can I create this?
Thx.

Answer 1

This might help you http://jsfiddle.net/GZ269/. This uses jquery.

Country:<br />
<select id="drop1">
    <option value="">Select Country</option>
    <option value="c1">Country 1</option>
    <option value="c2">Country 2</option>
</select>
<br />
City:<br />
<select id="drop2" disabled >
    <option value="">Select Country</option>
    <option value="c1">Country 1</option>
    <option value="c2">Country 2</option>
</select>

Javascript function:

$("#drop1").change(function(){
    var country = $(this).val();

    if(!country){
        $("#drop2").attr("disabled", true);
        return false;
    }

    $("#drop2").attr("disabled", false);
});​