force option from drop down before submit form Asked Feb 19 '14 at 16:54 Active Jun 14 '14 at 21:52 Viewed 2,976 times 0 I want the user to be forced to select any option in the drop down apart from the default "selected" option here is my drop down menu code; <form><label>Select Tank:</label> <select class="text2" name="tank" id="mySelect"> <option value="0" selected="selected">Select your tank</option> <option value="4"> Tank#1 </option> <option value="9"> Tank#2 </option> <option value="21"> Tank#3 </option> <option value="34"> Tank#4 </option> </select> <input type="button" id="btncheck" value="Submit"/> </form> and here is my java; $('#btncheck').click(function(){ if ($("#mySelect ")[0].selectedIndex <= 0) { alert("Please select a tank from the menu!"); return false; } }); jsfiddle: http://jsfiddle.net/36JZL/41/ for some reason it validates correctly but form isnt submitted. php forms edited Feb 19 '14 at 17:54 Stephen Jackson asked Feb 19 '14 at 16:54 Stephen Jackson 256 2 6 18 you want the php to stop processing? or form submittal? – Thomas Taylor Feb 19 '14 at 16:59 best option i think would be for form to submit but return error and not actually run the INSERT into database part of the page. Will link code now. – Stephen Jackson Feb 19 '14 at 17:01 http://pastebin.com/wytVN6gv – Stephen Jackson Feb 19 '14 at 17:02 3 Answers3 1 You can do it with jQuery on client side but its not a good option to validate things on client side. PasteBin: http://jsbin.com/zer/1 <form id="myForm"> <label>Select Tank:</label><br /> <select class="text" name="tank" id="tankSelector"> <option value="All" selected="selected"> Select Tank </option> <?QUERY HERE TO PULL AND LOOP FROM DATABASE?> <option value="<?php echo $row->id; ?>"> <?php echo $row->description; ?> </option> <? END LOOP ?> </select> <input type="submit"> </form> <script> $(function() { $('#myForm').submit(function(e){ if($('#tankSelector').val() == 'All') { alert('Select tank!'); e.preventDefault(); } }); }); </script> answered Feb 19 '14 at 17:05 Sergei Beregov 719 6 17 i used your script to no avail... but i did try some of the code: http://jsfiddle.net/36JZL/41/ but form isnt submitting now when i select a different drop down? – Stephen Jackson Feb 19 '14 at 17:43 Remove whole else clause, you have errors there and use input type submit. – Sergei Beregov Feb 19 '14 at 18:43

Answer 1

<label>Select Tank:</label><br />
<select class="text" id="seltank" name="tank">
    <option value="All" selected="selected"> Select Tank </option>
</select>

in the client side click event of your submit button add some javascript to check the value of your drop down.

if(document.getElementById("seltank").value == "All")
{
     //put some code to alert the user or show error
    return false; //this should prevent your post
}

Similar post is here How do I cancel form submission in submit button onclick event?

Answer 2

Here's what I do:

<select class="text2" name="tank" id="mySelect">
     <option></option>
     <option value="4"> Tank#1 </option>
     <option value="9"> Tank#2 </option>
     <option value="21"> Tank#3 </option>
     <option value="34"> Tank#4 </option>
</select>

If the user hits submit without making a selection, they will be prompted to select an option automatically. The limitation is that you don't get a pretty little "select an option" placeholder.