CODEWITHSUNDEEP
html
prakashchhetri
prakashchhetri

Reputation: 1816

Select option tag with "Please select" message

I want a dropdown list with say the following options and to show please select when no option is selected. I have implemented it with the code below and the form is submitted when an option is selected as expected.

The problem is when I navigate back to the page, and select the first option i.e --Please Select--, my form gets submitted for that option too. Is there any way to display a --Please Select-- option when no option is selected and prevent the form from being submitted for that particular --Please Select-- option?

<select onchange="this.form.submit()">
    <option>--Please Select--</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>

Upvotes: 3

Views: 11841

Answers (4)

Andy
Andy

Reputation: 14575

You can use <option selected="selected" disabled="true">

Selected means it will be default, and then disabled stops it being clicked on.

Demo

<select onchange="this.form.submit()">
  <option selected="selected" disabled="true">--Please Select --</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Upvotes: 7

Kris Zani
Kris Zani

Reputation: 216

you could do it in javascript. 

<select onchange="if (this.selectedIndex !=0) { this.form.submit(); }">
    <option>--Please Select --</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>

since this is a php you're probably dynamically generating your select options so you might need to change the code a bit.

Upvotes: 1

raidenace
raidenace

Reputation: 12836

Here you go:)

<select onchange="if(this.value!='') this.form.submit();">
    <option value="">--Please Select --</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>

Upvotes: 1

Austin Brunkhorst
Austin Brunkhorst

Reputation: 21130

Make the "Please Select" option disabled. This way the option will be initially selected but it can't be selected again.

<select onchange="this.form.submit()">
    <option disabled="true">--Please Select --</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>

Upvotes: 1

Related Questions