force option from drop down before submit form Asked Feb 19 '14 at 16:54 Active Aug 02 '22 at 09:50 Viewed 3,252 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 260 2 6 20 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 4 Answers4 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 738 7 19 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.

Answer 3

Maybe this can help. Im yet to find a stable answer

If using php:

$val = $_POST['select_input'];  <--- works fine

or $val = $request->select_input <---- can be problematic

On Html

<select id="select_input" name="select_input" >                                                                                           
    <option value="0">Pending</option>                                                                                                                                                                                    
    <option value="1">Approved</option>                                                                                                                                                                                                                                                                                                                                                                                  
    <option value="0" selected>Pending</option>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            
</select>