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>

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>

• javascript
• jquery

• you can listen for the select button on change events and then check to see if the selections have been made. – stevebot Commented Apr 5, 2011 at 23:55
• 1 You should try jQuery form validation: docs.jquery.com/Plugins/validation – Raisen Commented Apr 5, 2011 at 23:57
• change the type of your submit to "button" and when the select's fire then change it to "submit" a "button" doesn't submit the form – ITroubs Commented Apr 5, 2011 at 23:58
• Can anyone knock up a scribble ? – 422 Commented Apr 6, 2011 at 0:05
• just a thought on this subject: remember that you still need to validate server-side too, as javascript disabled would be the first way to try to hack your validation if its protecting interesting data. – BerggreenDK Commented Apr 6, 2011 at 0:11

5 Answers 5

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

$(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");
        }
    });
});

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.

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!

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