Dropdown list issues

I’ve also been trying to set a default value in a dropdown box on HTML from the data I retrieved from MySQL.

However, I noticed that if the user did not click on the dropdown box and clicked on one item from it. In other words, if they assumed the displayed value is the value they would like to submit (even though this is simply for displaying purpose and this is no value). The website would default as the value is none and can’t be added to the MySQL database.

Therefore, I’m wondering is there a way to force users must click on the dropdown box and choose one from the list?

    <select name="plan" id="plan" required>
    <option value="{{database[1]}}" selected disabled hidden>{{database[1]}}</option>
    {% for result in database2 %}
    <option value={{result[0]}}>{{result[0]}}</option>
    {% endfor %}
    </select>

JavaScript
​x
 
    <select name="plan" id="plan" required>
    <option value="{{database[1]}}" selected disabled hidden>{{database[1]}}</option>
    {% for result in database2 %}
    <option value={{result[0]}}>{{result[0]}}</option>
    {% endfor %}
    </select>
​

Answer

Try the required attribute and make the first options a prompt to select. If the value is blank, the form cannot be submitted

<select name="plan" id="plan" required>
  <option value="" selected disabled>Please select</option>

JavaScript
 
<select name="plan" id="plan" required>
  <option value="" selected disabled>Please select</option>
​

Advertisement

Answer