javascript - Submit a form on condition that atleast one drop-down option is selected -

javascript - Submit a form on condition that atleast one drop-down option is selected -

i have form 8 select (drop-down) fields. need form submitted when @ to the lowest degree 1 alternative 8 select fields has been selected. if none of options selected, need alert pop-up when user tries submit without selecting @ to the lowest degree 1 option.

i have no knowledge in javascript or php.

i hope i'm clear enough.

thanks guys.

here's jsfiddle.

here's code:

<select class="dropdown1"> <option value="">select</option> <option value="1">option 1</option> <option value="2">option 2</option> </select> <select class="dropdown2"> <option value="">select</option> <option value="1">option 1</option> <option value="2">option 2</option> </select> <select class="dropdown3"> <option value="">select</option> <option value="1">option 1</option> <option value="2">option 2</option> </select> <select class="dropdown4"> <option value="">select</option> <option value="1">option 1</option> <option value="2">option 2</option> </select> <select class="dropdown5"> <option value="">select</option> <option value="1">option 1</option> <option value="2">option 2</option> </select> <select class="dropdown6"> <option value="">select</option> <option value="1">option 1</option> <option value="2">option 2</option> </select> <select class="dropdown7"> <option value="">select</option> <option value="1">option 1</option> <option value="2">option 2</option> </select> <select class="dropdown8"> <option value="">select</option> <option value="1">option 1</option> <option value="2">option 2</option> </select> <button class="submit-btn">submit</button> <script type="text/javascript"> $(".submit-btn").click(function(){ var dropdown_selected = false; // select selected dropdown values var dropdown_values_arr = new array(); dropdown_values_arr.push($(".dropdown1 option:selected").val()); dropdown_values_arr.push($(".dropdown2 option:selected").val()); dropdown_values_arr.push($(".dropdown3 option:selected").val()); dropdown_values_arr.push($(".dropdown4 option:selected").val()); dropdown_values_arr.push($(".dropdown5 option:selected").val()); dropdown_values_arr.push($(".dropdown6 option:selected").val()); dropdown_values_arr.push($(".dropdown7 option:selected").val()); dropdown_values_arr.push($(".dropdown8 option:selected").val()); // loop on these values for(var i=0; i<dropdown_values_arr.length; i++){ // if value not empty, break loop // status met: @ to the lowest degree 1 dropdown selected if(dropdown_values_arr[i].length > 0){ dropdown_selected = true; break; } } // if there's no selected values in of dropdowns, throw alert message if(dropdown_selected == false){ alert("please fill @ to the lowest degree 1 dropdown"); } }); </script>

javascript php jquery html validation