In the second part of our five parts jQuery tutorial, we will extend our class roster example to add more interactivity. We will learn Forms Handling Events which we can listen for and respond to by using our jQuery library.
If you have missed part one of the tutorial, you can read it here: Getting Started with jQuery (Part 1): How to Manipulate the DOM or you can continue using a completed solution.
What Is Forms Handling?
You can tell jQuery to listen for text changes such as input in a form text field, or selection changes such as radio button changes, or if the user selects any check boxes and code the response if the event occurs.
In this tutorial, we will explore some of jQuery’s Event Handling code and how we can easily and quickly build Event Handlers for the fired events.
Turning Our Class Roster into an Interactive One
Previously, in part one, we have learned how to show or hide student names when different selection buttons are pressed.
In this tutorial, we will add a panel to show the selected student’s detail. We will also learn how jQuery can access additional attributes in a HTML element via the HTML5 data attribute.
Adding Radio Buttons to Student Names
Let’s change all our student names into radio option buttons, so that we can select a name and have jQuery respond to our selection accordingly.
To start, add a new HTML “form” element tag before the start of our list of students and close the “form” element tag to enclose all the students and option buttons into a HTML form. Your HTML code should now look as follows:
For each of the names, which are now expressed as list items, we will need to enclose each of them as a radio button. The syntax to add a new radio button is:
<input type='radio' name='studentname' value='Value of the radio button'>Text to Display
NOTE: Usually in a real-world application, the value of the radio button is the unique identifier of the option, e.g the unique database key of the value.
Your HTML code should look like this:
A Little Refresher on Radio Buttons
Notice that the name attribute on all our radio buttons is the same: “studentname”. Can you guess why that is so? What makes the behavior of radio button special from other kinds of input like checkboxes or text fields?
If you have guessed that they are named the same because they belong in the same group, you are correct! Radio buttons should only allow users to select only one choice. To let the web browser know that a certain number of radio buttons should behave in a group you just have to set the name attribute to be the same for all the radio buttons in that group.
Showing Student Details
Your rendered output should look like this:
If you click on any of the radio button choices, only one of them will be selected at one time.
Next, we are going to add a panel at the bottom of the list to show the selected student detail. We can do this by inserting placeholders HTML label elements and getting jQuery to populate the content of the label when the respective student is selected.
We will add a label to show the name of the selected student. Your HTML code should look like the following:
Telling jQuery to Listen to Radio Button Selections
Now that we have the HTML in place to provide the interface for us to select a particular student, we will need to tell jQuery to listen to the changes in the radio button selections. How can we do that?
Remember, previously we have set our radio buttons to have a name attribute of value “studentname”! We can tell jQuery to listen to changes for HTML elements that have that attribute name.
Breaking down the code
The first line tells jQuery to listen for changes to any of the HTML input element which has a name attribute of “studentname”. Then it tell jQuery to listen for the event of “change” which is fired when the user chooses different students.
In the “change” event, we can add a function which jQuery will run when it encounters the event. In our code example, we assign the variable “selectedName” to the value of the radio button that was selected. Notice we have also included the “:checked” modifier. We can use this modifier to detect which radio button in our radio button group was selected.
Next, we populate our “studentnamedisplay” label by assigning the value we retrieved above via the “.html” property. This will cause jQuery to display the variable into the element that you have specified, which in the case is the element that has the id of “studentnamedisplay” because we have used an id selector.
Adding Custom Attributes to the HTML Element Tag
Now we know how to retrieve values from selected radio buttons and also how to display values in HTML placeholder element tags. Let’s explore how we can include additional attributes, e.g student scores, to each of the students.
To include additional attributes to our HTML element tags, we will use the HTML data attribute. The data attribute is a HTML5 standard and allows you to store and embed custom data values on any HTML element tags. The data attribute can be specified as “data-(name)” where name describes what the data tag will be storing. In our example, we would like to store the student score. Hence, we will insert a “data-score” attribute to store the custom data.
Our HTML code now looks like this:
Accessing and Displaying the Custom Attribute
Let’s modify our jQuery code a little to fetch the custom data score attribute too. We cannot use “val()” to get the value in this case, because it will just return the name specified in the “value” attribute. jQuery provides us a convenience function “.attr(attributename)” to retrieve values from custom attributes.
To retrieve the “data-score” value, we will need to modify our jQuery function like this:
Now, when we select a student, the name and score is also shown.
Exercise 1: Add a Custom Attribute Named Hobby
Let’s try to add another custom attribute called “hobby” to each of the students. The name of the new custom attribute should be named “data-hobby”. Also, add a new HTML placeholder element to display the hobby of the selected student. Try it out yourself first before looking at the solution.
The HTML code solution:
The jQuery code solution is:
Challenge: Display a Label When the Top Student Is Selected
For the challenge, we are going to show a label that displays “NAME is a Top Student” when a student with the highest score is selected. In part one of this tutorial, we have learned how to show or hide a HTML element tag. We will combine this knowledge with the lesson we have learned in part two of the tutorial on accessing the custom attributes with jQuery.
In this challenge, you need to accomplish the following:
Add a HTML element for a placeholder to show the top student message.
Add a custom attribute to indicate that the student is a top student.
Modify the existing jQuery code to check if the selected student is a top student.
If the selected student is a top student, then display the name of the student as well as the text “is a Top Student”, e.g if Joseph is a top student, the text should read “Joseph is a Top Student”. If the student selected is not a top student, then the placeholder should be hidden.
Do try to solve it yourself first before referring to the solution.
If you stuck and need help, you can refer to the completed .
Congratulations on completing the second part of this tutorial!
You are now pretty savvy on HTML DOM Manipulation using the jQuery library!
In this part, you have learned how to add custom attributes to your HTML element tags and how to get jQuery to read values from these custom attributes. You have explored the event handling of HTML input element using jQuery and getting the selected value from them.
In the next part of the tutorial, we will learn how to add and remove HTML elements on the page without refreshing the page or retrieving new information from the server.