JSFiddle - React, Tailwind, and code Playground
HTML
<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
$('#submitorder').attr('disabled', 'disabled');
function updateFormEnabled() {
if (verifyAdSettings()) {
$('#submitorder').attr('disabled', '');
} else {
$('#submitorder').attr('disabled', 'disabled');
}
}
function verifyAdSettings() {
if ($('#ad_duration').val() != '' && $('#ad_type').val() != '') {
return true;
} else {
return false
}
}
$('#ad_duration').change(updateFormEnabled);
$('#ad_type').change(updateFormEnabled);