0

I am creating a form with a dropdown menu but the problem is, you could select the ‘please select’ option which I don’t want

 <p class="text-grey">Membership type? (please select)</p>
    <select class="city-town font"  name="eventtype" required>
    <option>Bronze</option>
    <option>Silver</option>
    <option>Gold</option>
    </select>

So I created this instead so the ‘please select text is greyed out’ But then the ‘required’ part of the code won’t work, not sure why?

<p class="text-grey">Membership type? (please select)</p>
    <select class="city-town font"  name="eventtype" required>
    <option disabled="" selected="" value="0" >Please Select</option>
    <option value="">Bronze</option>
    <option value="">Silver</option>
    <option value="">Gold</option>
    </select>

Any ideas?

strek
  • 1,190
  • 1
  • 9
  • 19
Tim Cross
  • 69
  • 5

1 Answers1

0

Credit where credit's due. The original post came from @Gambit on this thread. Please upvote his solution.

The submits will always register a field that is selected on a <option> element even when it is disabled. I don't know exactly why that is, but it is there.

Instead of having the selected and disable attributes set a hidden attribute on the element. It requires no styling and makes the <option> greyed out, un-selectable and with no default value set.

So the code written down here:

<option disabled="" selected="" value="0" >Please Select</option>

Should be written as: 

<option hidden value="">Please Select</option>

Check it out in this example:

<form>
  <label for="eventtype">Choose Membership</label>
  <select id="eventtype" class="city-town font" name="eventtype" required>
    <option hidden value="" >Select Membership</option>
    <option value="bronze" >Bronze</option>
    <option value="silver" >Silver</option>
    <option value="gold" >Gold</option>
  </select>
  <input type="submit" value="Choose">
</form>
Emiel Zuurbier
  • 19,095
  • 3
  • 17
  • 32