CODEWITHSUNDEEP
jqueryhtml
Jd Bohn
Jd Bohn

Reputation: 35

enable / disable fields based on previous options

I am trying to create a form that will gray out the States list if the user selects a Country other then the US. So this is what I have:

<select id="idfrom_country" name="nmfrom_country" title="From Country">
   <option value="United States">United States</option>
   <option value="...">...</option>
</select>

<select id="idfrom_state" name="nmfrom_state" title="From State">
   <option value="Outside U.S.">Outside U.S.</option>
   <option value="Arizona">Arizona</option>
   <option value="...">...</option>
</select>

and then

<script>
    var from_country = $('#idfrom_country option:selected').val();

    if (from_country != "United States") {
        $('#idfrom_country').attr("disabled", true);
        $('#idfrom_country').val("Outside U.S.");
    }
    else {
        $('#idfrom_country').attr("disabled", false);
        $('#idfrom_country').val("Arizona");
    }
</script>

I'm a real noob with this stuff so please be gentle.

Thanks

Upvotes: 0

Views: 50

Answers (3)

Mat Richardson
Mat Richardson

Reputation: 3606

Think this is what you're after - a slight amendment to previous code.

$("select").on("change", function () {
        var from_country = $(this).val();
        if (from_country != "United States") {
            $('#idfrom_state').attr("disabled", true);
            $('#idfrom_state').val("Outside U.S.");
        } else {
            $('#idfrom_state').attr("disabled", false);
            $('#idfrom_state').val("Arizona");
        }
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="idfrom_country" name="nmfrom_country" title="From Country">
    <option value="United States">United States</option>
    <option value="...">...</option>
</select>
<select id="idfrom_state" name="nmfrom_state" title="From State">
    <option value="Outside U.S.">Outside U.S.</option>
    <option value="Arizona">Arizona</option>
    <option value="...">...</option>
</select>

Upvotes: 0

user2019037
user2019037

Reputation: 762

I think you want to use jquery change event:

$("select").on("change", function () {
        var from_country = $(this).val();
        if (from_country != "United States") {
            $('#idfrom_country').attr("disabled", true);
            $('#idfrom_country').val("Outside U.S.");
        } else {
            $('#idfrom_country').attr("disabled", false);
            $('#idfrom_country').val("Arizona");
        }
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="idfrom_country" name="nmfrom_country" title="From Country">
    <option value="United States">United States</option>
    <option value="...">...</option>
</select>
<select id="idfrom_state" name="nmfrom_state" title="From State">
    <option value="Outside U.S.">Outside U.S.</option>
    <option value="Arizona">Arizona</option>
    <option value="...">...</option>
</select>

Upvotes: 2

David Lounsbrough
David Lounsbrough

Reputation: 430

Add onselect="your_function()":

<select id="idfrom_country" name="nmfrom_country" title="From Country" onselect="your_function()">
   <option value="United States">United States</option>
   <option value="...">...</option>
</select>

<script>
function your_function() {
    var from_country = $('#idfrom_country option:selected').val();

    if (from_country != "United States") {
        $('#idfrom_country').attr("disabled", true);
        $('#idfrom_country').val("Outside U.S.");
    }
    else {
        $('#idfrom_country').attr("disabled", false);
        $('#idfrom_country').val("Arizona");
    }
}
</script>

Upvotes: 0

Related Questions