CODEWITHSUNDEEP
phpforms
NavyPixel
NavyPixel

Reputation: 260

force option from <select> drop down before submit form

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.

Upvotes: 0

Views: 3385

Answers (4)

Ishmael Mavor Raines
Ishmael Mavor Raines

Reputation: 320

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>

Upvotes: 0

Jacob McKay
Jacob McKay

Reputation: 2816

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.

Upvotes: 0

kale909
kale909

Reputation: 129

<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?

Upvotes: 0

Sergei Beregov
Sergei Beregov

Reputation: 738

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>

Upvotes: 1

Related Questions