CODEWITHSUNDEEP
javascriptjquery
422
422

Reputation: 5770

Disable SUBMIT button until select box choices

I have a small form.

Two select box elements and a submit button.

The select box elements collectively when selections are chosen, fire off an ajax request.

What I want to do is, disable the submit button UNTIL user has made selections from the select drop downs.

They must make a selection from BOTH select drop downs, before the Submit button is enabled.

I dont mind if the submit button is hidden until selections made.

Brief Code:

<form id="ad_form" method="post" action="">
    <p>
        <select id="ad_type" name="ad_type">
            <option value="" selected="selected">Select premium ad type</option>
            <option value="<?php echo TYPE_USER;?>">Featured Agent</option>
            <option value="<?php echo TYPE_LISTING;?>">Featured Listing</option>
        </select>
        <label for="ad_type" class="labelStrong">Advertising Type</label>
    </p>
    <p>
        <select id="ad_duration" name="ad_duration">
            <option value="" selected="selected">Select premium ad duration</option>
            <option value="weekly">Weekly</option>
            <option value="fortnightly">Fortnightly</option>
            <option value="monthly">Monthy</option>
        </select>
        <label for="ad_duration" class="labelStrong">Advertising Duration</label>
    </p>

    <p>
        <div id="calender">
        </div>
    </p>
    <p>
        <input type="submit" name="submit" value="Submit" id="submitorder" />
    </p>
</form>

Upvotes: 4

Views: 19739

Answers (5)

Ceezey
Ceezey

Reputation: 21

Gah, I'll have to agree with Kon on this one - fix-now-worry-about-it-later answers have their place but an elegant solution that is simple at the same time has to be the way to go.

My solution: (with credit from a thread at: JQuery Enable / Disable Submit Button in IE7)

$('select.required').change(function() {
  var total =  = $('select.required').length;
  var selected = $('#ad_form').find("select.required option[value!='':selected").length;

  $('#submitorder').prop('disabled', (selected != total));
});

Incidentally, thanks ctcherry for demoing the code on the JSFiddle site - I've not seen that before and will make use of it in the future!

Upvotes: 2

Kon
Kon

Reputation: 27451

If you give all your selects a common class name (like 'required') , you can do something like this: 

$('select.required').change(function() {
  var total = $('select.required').length;
  var selected = $('select.required option:selected').length;

  $('#submitorder').attr('disabled', (selected == total));
});

This is not tested code. This documentation might help. This jquery discussion might help too.

Upvotes: 2

Chris Cherry
Chris Cherry

Reputation: 28574

Here's a demo that seems to do what you want:

http://jsfiddle.net/Yr59d/

That javascript code would go in a $(document).ready() block

Upvotes: 7

Malk
Malk

Reputation: 12003

$(function() {
    $("#submitorder").css("visibility", "hidden");

    $("#ad_form select").bind("change", function() { 
        if ($("#ad_type").val().length > 0 && $("#ad_duration").val().length > 0) {
           $("#submitorder").css("visibility", "visible");
        } else {
           $("#submitorder").css("visibility", "hidden");
        }
    });
});

Upvotes: 2

Rasika
Rasika

Reputation: 1998

Use listeners on both select buttons for change and check whether the other is also set. If set, enable the submit button.

Upvotes: -1

Related Questions