0

I was learning how to use the select tag in HTML to create dropdowns. And then I found out that dropdown selections could be sent as an email. After some experimenting with the tag, I figured out that I couldn't 'not include' the 'None' keyword in my email if the user hadn't made a dropdown selection. This was very frustrating.

<html>
<body>

<form action="mailto:test@gmail.com">
  <label for="cars">Choose a car:</label>
  <select name="cars" id="cars">
    <option value="None">None</None>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select>

  <label for="bike">Choose a bike:</label>
  <select name="cars" id="cars">
    <option value="None">None</None>
    <option value="bike1">Volvo</option>
    <option value="bike2">Saab</option>
  </select>
  <br><br>
  <input type="submit" value="Submit">
</form>


</body>
</html>

(Code Credits: W3 Schools)

Basically, when I make 1 out of the 2 dropdown selections and leave the other as none when I click submit the label with the value None is included

For example, If I choose Audi for Car dropdown selection and none for Bike selection, in the mail it's displayed as: cars=volvo bike=None or something like that. How do I not include 'none' in the email if the user doesn't make a selection for that particular label?

Apologies for not framing the question clearly

Night_Falcon_X
  • 181
  • 2
  • 14

1 Answers1

1

required the select tag and empty the first element to set as a placeholder

<select name="cars" id="cars" required>
    <option value="">None</option>

complete code will be like follows:

<html>
<body>

<form action="mailto:test@gmail.com">
  <label for="cars">Choose a car:</label>
  <select name="cars" id="cars" required>
    <option value="">None</None>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select>

  <label for="bike">Choose a bike:</label>
  <select name="cars" id="cars" required>
    <option value="">None</None>
    <option value="bike1">Volvo</option>
    <option value="bike2">Saab</option>
  </select>
  <br><br>
  <input type="submit" value="Submit">
</form>


</body>
</html>

i hope this will be helpful for you

Robin Hood
  • 710
  • 3
  • 16
  • It now displays it as car=audi, bike= – Night_Falcon_X May 16 '22 at 15:13
  • It doesn't include the 'None' as it did before. But how do you get rid of the empty 'bike='? In that way, if the user hasn't made a selection, both the 'None' and the the label wont be displayed in the email – Night_Falcon_X May 16 '22 at 15:16
  • Btw, I didn't want to use 'required' statement because I don't want to force the users to make a selection – Night_Falcon_X May 16 '22 at 15:18
  • you are a beginner. You have to start learning from w3school I think that's best for you. – Robin Hood May 17 '22 at 07:25
  • Sure, I will. Thanks for all your help. Btw, I found the solution here: https://stackoverflow.com/questions/8605516/default-select-option-as-blank – Night_Falcon_X May 17 '22 at 07:30
  • For your question, the answer is when you add a value attribute to an option tag which is then it takes the value "sample" and if you use the tag without value attribute like this then it takes "Test" as value. in the above you used a value attribute so you must have something on it otherwise value will be empty. i hope this will clear your mind. – Robin Hood May 17 '22 at 07:30