javascript - jQuery - How to evaluate two select option values for an if/else statement? -

i have continue button class "options-btn" on page (it's multi-step booking process), 2 select fields on page. 1 of these dropdown select fields needs have value selected user before can click submit button on page while disabling click event?

each dropdown field has default select option 0, other choice of "1". how can write function "if neither 1 of these options has value of 1 selected - alert message "please select option" , disable button.

the 2 id's associated these select fields are:

#extra_units_7 & #extra_units_4

this wrote far, it's not working:

jquery(document).ready(function($) { $(".options-btn").click(function() {   if ( $('#extra_units_7').val() === 0  ||  $('#extra_units_4').val() === 0 )     alert("please select option");     return false;       } else {       $('.options-btn').trigger('click');   } }); 

i re-factored html in order enable feedback end user without being obtrusive alert() boxes.

<!-- use id attach in js --> <form id="form_units" action="#" method="post">     <div>       <!-- labels, because... well, labels. -->       <label for="extra_units_4">extra_units_4</label>       <!-- use data-attr identify elements should validated , how. future proofs code, , it's pattern follow. -->       <select id="extra_units_4" data-validate="notempty">         <option value="0">0</option>         <option value="1">1</option>         <option value="2">2</option>       </select>     <!-- hidden element provide feedback it's better ux -->     <div class="fielderror">please make selection</div>   </div>   <div>     <label for="extra_units_7">extra_units_7</label>       <select id="extra_units_7" data-validate="notempty">         <option value="0">0</option>         <option value="1">1</option>         <option value="2">2</option>       </select>       <div class="fielderror">please make selection</div>   </div>   <!-- included input[type="text"] fun, , because future proofing -->   <div>     <label for="extra_units_8">extra_units_8</label>     <input type="text" id="extra_units_8" data-validate="notempty" />     <div class="fielderror">please make selection</div>   </div>   <!-- there appeared no reason not use input[type="submit"] in code. not doing adds tiny amount of complexity - slimmed example down. re-factor if <button> requirement. -->   <input type="submit" class="options-btn" value="submit" /> </form> 

now have simple js capture <input>s data-validate="notempty".

// make sure you're specific selector form $('#form_units').on('submit',function(e) {   // hide .fielderror elements within context of 'this' form.   // means next time submit error messages reset   $('.fielderror', this).hide();   // select 'not empty' validations   $('[data-validate="notempty"]').each(function (index, item) {      // check if it's input[type="text"] - future proofing "not empty" requirements. expand on idea "radio" , "checkbox" inputs if , when required.     if ($(item).attr('type') === 'text') {        // text empty if length less 1 char       if ($(item).val().length < 1) {         // we've found 1 invalid stop from sending         e.preventdefault();         // show .fielderror text associated input being validated         $(item).siblings('.fielderror').show();       }     } else {         // selects empty if val() less 1. warned, dependant on having numerical values - , assumes 0 means no answer.         if ($(item).val() < 1) {           // we've found 1 invalid stop from sending           e.preventdefault();           // show .fielderror text associated input being validated           $(item).siblings('.fielderror').show();         }       }   }) }); 

lastly, add little css hide error messages , style them when become shown.

.fielderror { display: none; color: red;} 

jsfiddle of working example update html structure , text input - https://jsfiddle.net/likestothink/xllvzps2/9/