Disable SUBMIT button until select box choices

Question

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>

Answer 1

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