Don’t send default selected option value

I am creating a custom search form and I have this code with first option

<select name="something">
    <option selected>Choose</option>
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c">C</option>
</select>

<select name="something2">
    <option selected>Choose</option>
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c">C</option>
</select>

This is what I get in url if I select only something from second select options.

Read More
?s=&something=ChooseB&something2=B

Is it possible for form to not send this “Choose” value? Can it be done using Html or do I have to use Jquery? I am doing this in WordPress if it matters.

Related posts

Leave a Reply

3 comments

  1. Try This:

    <select name="something">
    <option value="">Choose</option>
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c">C</option>
    </select>
    
    <select name="something2">
    <option value="">Choose</option>
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c">C</option>
    </select>
    
  2. No it is not possible because “choose” is also an option.
    One condition is possible, first write html code and set the value of choose option empty.

    <form  name="myform" >
    <select id="ddlViewBy">
    <option selected  value="">Choose</option>
            <option value ="A">A</option>
             <option value ="B">B</option>
            <option value ="C">C</option>
            <option value ="D">D</option>
    </select>
    <input type="submit" />
    </form>
    

    and then add this javascript code ,this code return false and not submit form if select option is choose that is empty.

    <script>
       document.myform.onsubmit = function()
       {
    
         var e = document.getElementById("ddlViewBy");
         var strUser = e.options[e.selectedIndex].value;
         if((strUser)=="")
         {
           return false;
         } else { 
          return true;
         }
       }
    </script>
    

    OR Simple you can do this

    <select name="something">
    <option value="">Choose</option>
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c">C</option>
    </select>
    
    <select name="something2">
    <option value="">Choose</option>
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c">C</option>
    </select>