HTML Form: Drop-down

Photo by Sigmund on Unsplash

Back when I was doing my JavaScript project, I had to work on a form that allowed me to enter in a subscription with the corresponding price and website. With forms, you can actually specify what will be entered into the form based on it’s input type. In my code snippet below is a good example of that.

<!--Subscription Information--><div>
<span>Name:</span>
<input type="text" id="subname" placeholder="Subscription Name">
</div>
<div>
<span>Link:</span>
<input type="url" id="link" placeholder="Website">
</div>
<div>
<span>Price:</span>
<input type="number" id="price" placeholder="Subscription Price"></div>
<div id="button">
<input class="btn" type="submit" value="Submit">
</div>
This is what the subscription form button looked like with the added drop-down menus.

In my experience starting out with forms, drop-down menus seemed to be the bane of every form coded in existence. Any time I asked someone about drop-downs, it was a rather painful subject.

This code snippet is an example of how the category drop-down worked.

<div>
<h2>Add Subscription</h2>
<div id="category">
<span>Category:</span>
<select name="type" id="type">
<option value=""></option>
<option value="Nourishment">Nourishment</option>
<option value="Membership">Membership</option>
<option value="Entertainment">Entertainment</option>
<option value="Service">Service</option>
<option value="Other">Other</option>
</select>
</div>
</div>

In HTML, you can hard-code the options of a drop-down menu rather than it being an input-type of text. That way you can easily grab what was selected in one of the options. You might be wondering why the very first option is a blank “ “. That’s because when I was coding this for my JavaScript project, it would rely solely on the user-input instead of immediately choosing the very first option that’s available. Here is what that code looks like in my .js file.

saveSub() {const save = document.getElementById("subform");
save.addEventListener("submit", (e) => {
e.preventDefault();
// Sub Form
const subCategory = document.getElementById("type").value;
const subName = document.getElementById("subname").value;
const subLink = document.getElementById("link").value;
const subDate = document.getElementById("date").value;
const subPrice = document.getElementById("price").value;
const sub_id = document.getElementById("sub-save").value;
// Validate then POST
if (
subName === "" ||
subCategory === "" ||
subLink === "" ||
subPrice === "" ||
subDate === ""
) {
alert("Fill in all fields.");

Basically, this code is telling JavaScript that before anything gets saved and pushed into the database it must make sure nothing is entered blank or else an alert will be sent to the user telling them to “Fill in all the fields”. If all is well, then everything entered will be saved as a subscription.

When I started out with the drop-down menu, I had all the options filled out and it kept choosing the very first option regardless of what option was entered. By choosing to have a blank option available, the validation process ensures that what the user enters is exact.

And that is how you do a simple drop-down menu. If you have an alternative solution, let me know and I will happily learn from you!

(BTW, I posted twice today!)

_____________________________________________________________

Social Links

LinkedIn

GitHub

Twitter

Instagram

YouTube

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store