Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Lessons:7Length:40 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 Revealing Form Fields Based on Radio Selection

In this lesson you will learn how to use jQuery to hide and reveal a set of form fields based on which radio button the user selects. Fork the starter pen and follow along.

Useful Links

2.1 Revealing Form Fields Based on Radio Selection

Hello and welcome back. In this lesson, we're going to take a look at how to hide and reveal form fields based on the selection of a radio button. If you take a look at the form here on the page, what I wanna see when the page first loads is just these two radio buttons and their associated labels. I don't wanna see any of the text fields. And then when the user makes a selection by clicking on one of these radio buttons, at that point, the text fields associated with that particular option will show up and this is very easy to do with jQuery. So, let's start off by taking a look at our HTML. Now you can find the URL for this code pin in the course notes for this lesson and this is gonna be our starting pen if you want to make some changes yourself you can go ahead, and click on fork to create a new copy. And in this new copy, we'll make our changes. So I'm gonna expand out the HTML a little bit, so that we can see everything a little bit better and you'll notice that we have a div here with a class of form group that has our label and our radio input. And this is for the bank account radio button and you'll notice it has a name of payment. Our other radio button is down here a little bit further, but immediately after this form group that has that radio button in it. We also have a div with an ID of bank account in the class of payment type. This is the div that contains our bank name and account number text fields and both of the sections that contain text fields have a class of payment type, so we can target that class for what we're gonna be doing in a moment. But this particular one has an ID of bank account and the other one has an ID of credit card. So, that's basically how this is structured. And one of my favorite ways of getting something like this to work in JavaScript without having some unnecessary if, else or switch statements is I like to use data attributes. And this particular instance, I'm using one that I've called the data target. And the way a data attribute works is you give it a name starting with data hyphen and then whatever comes after the hyphen is whatever you wanna call it. And then in JavaScript or in jQuery, we can point to that data attribute in a very specific way and we'll talk about that in a moment. But you will notice it this particular data attribute has a value of pound bank account. So it's the CSS selector for this bank account section here, which contains our text fields. So we can use this data target attribute to tell JavaScript which set of form fields to open up, similarly with our credit card radio button. We have a data target attribute of pound credit card, which is the ID or the CSS selector for this div here which contains our credit card fields. So, let's see how to make this work. The first thing I wanna do is to jump into CSS and to make these text fields disappear. Now remember these text fields are contained within divs that have a class of payment type, so we can target that particular class. So, let's jump into CSS. We'll go down to the very bottom and we'll create a new rule for payment hyphen type. And inside that rule, we're simply going to set display to a value of none and that will immediately hide those and this is basically what I want to see when the page first loads just our radio buttons. So now, let's jump into JavaScript and let's expand the text fields whenever we click on one of these radio buttons. So we're gonna create a change event listener in JavaScript and we'll start by using a jQuery selector to point to those inputs, those radio buttons and I'm gonna point to them by pointing to the name attribute. So I'm gonna look at all elements where the name attribute is equal to a value of payment, because that's the name of these two buttons. So inside our selector, inside parenthesis and quotation marks, we're gonna use square brackets to point to an attribute. We're reporting to the name attribute and we're looking for instances where the name is equal to payment, and we're gonna create a change event listener for those items. So we're gonna say, .on. And then inside parentheses and inside quotation marks, we're gonna type in the word change. And after the quotation marks, excuse me, we'll type comma, space and then we'll have our function. So, this will be the function that runs anytime we change our selection here on these radio buttons. So when we change those values, whenever we click on one of those values, we basically want the associated text fields to slide down in jQuery parlance. There is a particular method in jQuery called slide down, which will reveal a hidden object and basically animate it onto the screen. So for example, if we wanted to expand out our credit card section, we could use a jQuery selector here to point to the credit card ID. So credit hyphen card and this is the div that has those text filled in it and we're simply gonna say, slideDown. So now anytime that we click on one of these radio buttons that has a name of payment, we're gonna see the credit card section slide down. So if we click on credit card, that slides down and make account's gonna do the same thing right now. Now we could do an if else statement to kinda look through the dom to kinda see which button we clicked on and to see which section we need to be opening up, but it's a lot easier to use these data attributes that we've created in our HTML. Remember those data attributes that are assigned to these radio buttons have these selectors stored in them. So, let's go ahead and create a variable that's gonna store our selector. So let's say, var selector and we're gonna set this equal to again, the data attribute of the radio button clicked on. And so, we're gonna point to this inside of our jQuery selector dot and the way we point to a data attribute is we type in the word data. And then inside parentheses and inside quotation marks, we will type in the word that comes after the hyphen in the data attribute and ours is data target. So, point to target here. And now, we have our selector stored in this variable. So instead of these quotation marks here, we can just type in the name of our selector variable and tell it to slide down. So now, the appropriate one should slide down no matter which one we click on. So if we click on credit card, that slides down click. If we click on bank account, that slides down. Because of those data target attributes. Now, we don't them both to be open at the same time. So before we slide one down, let's go ahead and slide them all up. That way, if we do a slide up method on all of our payment type objects which are the objects which contain these fields, then any of them that are open will animate closed and any of them that are already closed will just stay there. So before we do our slide down, we're gonna point to .payment-type which again is the class name that's applied to the containers of those text fields and we're gonna do a .slideUp. So now, let's test again. We'll click on Credit Card and that slides open, and we'll click on Bank Account, and Credit Card slides closed as the bank account information is sliding open. So, that's how you can use jQuery to hide and reveal text fields based on a radio button selection. Thank you for watching and I'll see you in the next lesson.

Back to the top