We've already seen how to gather input from text fields, but there are a variety of other types of form fields as well: Select boxes, radio buttons and checkboxes are perhaps the most prominent.
HTML5, finalized in 2014 and now widely supported, also introduced a number of additional input types, including date, color, email, tel, url, number, and many others. See the MDN for a full list of HTML input types. Bootstrap also has more information about them here.
Generally as you come across the need to gather input in a particular way, you'll do some research to figure out how to read input in that way. We'll introduce a few of the most common input field types. But first, a note of warning:
type="number" just means that the browser will do some preliminary checking to encourage the user to enter a number rather than some text. But when you use
Simple select boxes (where the user can only select one item) are pretty easy to implement.
This goes inside the form in your html:
<select class="form-control" id="beverage"> <option>Coffee</option> <option>Tea</option> <option>Kombucha</option> <option>Water</option> </select>
And this is one way to read out the value in your form submit event handler:
var beverage = $("#beverage").val();
If you wanted to instead give each option a value different from the text the user sees, you could change your
select to look like this:
<select class="form-control" id="beverage"> <option value="1">Coffee</option> <option value="2">Tea</option> <option value="3">Kombucha</option> <option value="4">Water</option> </select>
Now when you gather the input with
$("#beverage").val() you'll get "1", "2", "3" or "4". Note that they still come in as strings, so in this case you would probably want to use
parseInt() to convert the inputted data to a number.
Radio buttons allow the user to select one and only one option from a list.
Here's an example of doing radio buttons (this would go inside the form in your html):
<div class="radio"> <label> <input type="radio" name="flavor" value="chocolate" checked> Chocolate </label> </div> <div class="radio"> <label> <input type="radio" name="flavor" value="vanilla"> Vanilla </label> </div> <div class="radio"> <label> <input type="radio" name="flavor" value="cookiesandcream"> Cookies & Cream </label> </div>
And a way to read the value selected:
var flavor = $("input:radio[name=flavor]:checked").val();
Checkboxes work similarly to radio buttons, but allow users to select multiple options. Because we want to be able to collect all of a user's selections, we will first need to learn about something called an array, which we will do next week. In its simplest form, an array is simply a list of multiple items packaged together.
The date input type provides an easier interface for users to browse, select, and input dates:
<div class="form-group"> <label for="born">Date of birth:</label> <input id="born" class="form-control" type="date"> </div>
var dob = $("#born").val();
You may not have seen this one before! The color form input type, when clicked, opens a special panel where users can fine-tune and select specific colors:
<div class="form-group"> <label for="color">What is your favorite color?</label> <input id="color" class="form-control" type="color"> </div>
var favoriteColor = $("#color").val();