Getting Form Values With jQuery
--
In this blog post, we’ll use different jQuery selectors and methods to get values from our form.
Here is our form to make a sandwich!
Text Box
Getting the value from a text box is easy peasy. Here’s the HTML code for the text box:
<label>Give your sandwich a name:</label><br>
<input type="text" id="name"><br>For this example, I’ll create a sandwich with a name of “Egg salad sammie.”
Now let’s write the jQuery code to get the value of this text box. Notice that <input> has an id attribute which is set to “name”? Well, to get the value of the input, all we have to do is use an id selector:
$("#name").val()// return value:
// "Egg salad sammie"
See? Easy peasy!
Select (aka Drop Down)
Here’s the HTML code for the select element:
<label>Choose your bread:</label><br>
<select id="bread">
<option value="white">White</option>
<option value="wheat">Wheat</option>
<option value="sourdough">Sourdough</option>
</select><br>And I want my sandwich to be on sourdough bread:
Just like with our text box, the <select> element also has an id attribute. Can you guess how we get the value of the selected bread? Did I hear id selector? Good job! Here’s the jQuery code:
$("#bread").val()// return value:
// "sourdough"
You may have noticed that in the drop down menu the text is “Sourdough” (with a capital “S”), yet the value we just got was “sourdough” (with a lowercase “s”). That’s because we’re getting the value of the value attribute, not the text that is between the option tags. (Would it make it less confusing if I said the word “value” a few more times?)
Let’s say that for some reason we also want to know the text that is associated with our selected bread, ie “Sourdough”. (This may come in handy if you want to render the selected text, rather than render the selected value.) Here’s the jquery code that will do that:
$("#bread option:selected").text()// return value:
// "Sourdough"
What this code does is look for the bread option that was selected, and then it gives us the text for it. If we don’t specify option:selected, we will get the text for all the breads, not just sourdough.
Now let’s look at some of the more challenging form elements!
Radio Buttons
Part 1:
Our form has two sets of radio buttons: one set for the protein and one set for the cheese. Here’s the HTML code for the first set:
<label>Choose your protein:</label><br><input type="radio" name="protein" value="turkey" checked> <label>Turkey</label><br><input type="radio" name="protein" value="ham"> <label>Ham</label><br><input type="radio" name="protein" value="roast beef"> <label>Roast beef</label><br><input type="radio" name="protein" value="egg salad"> <label>Egg salad</label><br><input type="radio" name="protein" value="tofu"> <label>Tofu</label><br>
If you couldn’t guess by the name of my sammie, I want egg salad as my protein:
Do you see how each of the<input> elements have a name attribute which is set to “protein”? That is how our program knows that these radio buttons are part of the same set. And the name attribute comes in handy in our jQuery code:
$("input[name='protein']:checked").val()// return value:
// "egg salad"
This code will look for the input elements that have a name of “protein”, find the one that is checked, and return its value.
Just like with our bread, let’s say that we also want to get the text that’s next to our radio button (“Egg salad” with a capital “E”). Here’s a reminder of what the HTML code looks like for the egg salad button:
<input type="radio" name="protein" value="egg salad"> <label>Egg salad</label><br>Since the text is coming from the <label> element that’s right after the <input> element, we can use jQuery’s .next() method:
$("input[name='protein']:checked").next().text()// return value:
// "Egg salad"
This code finds the checked protein radio button, then finds the next element, then returns its text.
Part 2:
Here’s the HTML code for our second set of radio buttons:
<label>Choose your cheese:</label><br><input type="radio" name="cheese" id="cheddar" value="cheddar" checked> <label for="cheddar">Cheddar</label><br><input type="radio" name="cheese" id="provolone" value="provolone"> <label for="provolone">Provolone</label><br><input type="radio" name="cheese" id="swiss" value="swiss"> <label for="swiss">Swiss</label><br><input type="radio" name="cheese" id="pepper-jack" value="pepper jack"> <label for="pepper-jack">Pepper jack</label><br><input type="radio" name="cheese" id="no-cheese" value="none"> <label for="no-cheese">No cheese</label><br>
If you’ve read any of my previous blog posts, you’ll know that I have an obsession with cheese, so of course I’m not going to choose “no cheese” for my sandwich. Provolone sounds good:
We can get the value of our cheese just like we did for protein, except this time we’ll look for an input with a name of “cheese”. Here’s the jQuery code:
$("input[name='cheese']:checked").val()// return value:
// "provolone"
And again we can get the text that’s next to our radio button (“Provolone” with a capital “P”). You may remember that we used the .next() method with the other set of radio buttons. One problem with that method is that it relies on <label> to be the element immediately after <input>. What happens if the HTML code changes and the label is no longer right after the input? The .next() method will no longer return what we want it to.
Let’s revisit the HTML code for provolone:
<input type="radio" name="cheese" id="provolone" value="provolone"> <label for="provolone">Provolone</label><br>Do you see how the label has a for attribute of “provolone”? And see how this matches the id of the input? We can use this connection to get the text of the label. Here’s the jQuery code:
const $cheeseId = $("input[name='cheese']:checked").attr("id")
$(`label[for=${$cheeseId}]`).text()// return value:
// "Provolone"
First we have to get the id of the checked cheese input. Then we can find the label whose for attribute matches the input id.
Checkboxes
Lastly, we have the HTML code for our checkboxes:
<label>Choose your veggies and condiments:</label><br><label><input type="checkbox" name="condiment" value="lettuce">Lettuce</label><br><label><input type="checkbox" name="condiment" value="tomato">Tomato</label><br><label><input type="checkbox" name="condiment" value="onion">Onion</label><br><label><input type="checkbox" name="condiment" value="peppers">Peppers</label><br><label><input type="checkbox" name="condiment" value="mustard">Mustard</label><br><label><input type="checkbox" name="condiment" value="mayo">Mayo</label><br>
For the egg salad sammie I’ll have lettuce, tomato, and peppers:
Getting the values of checkboxes is a little more tricky since multiple inputs can be checked. Here’s the jQuery code:
$.map($("input[name='condiment']:checked"), function(el){
return $(el).val()
})// return value:
// ["lettuce", "tomato", "peppers"]
What the code is doing is mapping over all of the condiment inputs that were checked and collecting each of their values. What we end up with is an array of the values. Not too bad, huh?
Now let’s look at one last way to the get the text (“Lettuce”, “Tomato”, “Peppers”). Here’s a reminder of the HTML code for one of our checkboxes:
<label><input type="checkbox" name="condiment" value="lettuce">Lettuce</label><br>While doing research for this blog post, I noticed that a lot of people wrap their <input> tag inside of their <label> tags. So I used that format for the condiments checkboxes.
Since <label> is the parent of <input>, we can make use of jQuery’s .parent() method to get the label’s text. Again, we’ll need to iterate over the checked inputs, and I want to store these text values inside of an array. Here’s the jQuery code:
$.map($("input[name='condiment']:checked"), function(el){
return $(el).parent().text()
})// return value:
// ["Lettuce", "Tomato", "Peppers"]
The first line of code is the same as when we collected the values of the checked inputs. On the second line we are finding the parent of <input>, which is <label>, and getting the label’s text.
And we’re done! Now let’s go enjoy a sammie!
