Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Web and personalized recommendations.Start Your Free Trial Now
- View Offline
- What is jQuery?
- Installing jQuery
- Performing multiple operations with chaining
- Using classes
- Adding, modifying, and removing content dynamically
- Triggering a change with event binding
- Creating a dynamic contact form
- Building a slideshow gallery
- Creating simple jQuery animations
Skill Level Intermediate
Working in jQuery there's going to be many times when you want to find out, in your code, what the contents of something you selected are. Let's look at some ways to do that now. This page has a form, as you can see, and obviously, a lot of other HTML. So first let's look at the stuff that's not in the form. I'm just going to scroll down a little bit here, and here's my header, which I happen to know is replaced by this image over here. Let's take a look at it. So, I'm going to select the header ID, like this, and then I'm going call to the HTML method on it. This will return all the HTML inside that selected element.
Like this. If I want to strip out all that HTML and just see the text, wouldn't you know it, there's a method called text. Now, as you can see, both of these return the HTML or the text with some white space. Depending on which browser you're using you might get differing amounts of white space. This is one area that jQuery does not smooth out for you. So it also includes a trim method that can take care of that if you want, like this. And the HTML method works bidirectionally, so I can read stuff out, and I can also write stuff back in. I'm not going to use this header for now, because it's got that image over it.
Let's look at this one. I happen to know that that one has the ID of, Page ID. So, let's select that Page ID, and now I am going to set its HTML to an h1 tag that says, hi, there we go. So, you can read from or write to any element that you've selected using these methods, that's pretty handy. Now, let's switch over to the jQuery code that's at the bottom of this file And, look at working with a web form. There's is a different set of methods that are used for this application. If you have ever worked with a web form before, you know that getting values out of certain form type can be a little bit of a pain or at least different between different form types.
In jQuery you can use a clever selector and do it all on one line. So, in this case, I'm selecting input and I'm using the radio filter, which is built into jQuery, and then, beyond that, I'm looking for a set of radio buttons where their name is station2, which, if you look in the HTML, is what these are, and then, I'm looking for the one that's checked. And then I'm using the same val method on this multiselect, and this works on all of them. So let's check couple of things, open the console and submit this form. There we have it. All these values are coming out. And this is interesting.
I'm getting an array back from my multi-select. So, I can get all of these values, or just the one. Try this again, there we go. It's still an array, because it was a multi-select, but it just has the one item in there. And just like with the HTML and text methods, you can use val to write values back into these fields. So let's try that here in the console. Let's say I want to modify that value of that email field. Let's make it email@example.com. I'll scroll up so you can see this and once I hit return, wowie zowie, it changes and this works on many other field types. So I can do this on the state field.
Be careful when you're doing this because you want to make sure that the value matches the actual value attributes and in this state field, I scroll up. You can see that the values are state codes, not the spelled out version. So, were going to set the value here to NJ for New Jersey, and there it is. And finally we know that we get an array out of your favorite magazine. Can we put an array back in? Let's find out. So I'm going to use square braces for my array and then I'm going to set the values, and again you need to be careful of the values that are displayed here and the ones that are shown because this is a select box again.
I know that these are all the same thing, just with the spaces removed, so I'm going to set the value to mountain biking and modern cyclist. There we go, you can also do this just with a string or a single value just like that. If you've ever worked with a check box you know that checking the value is not sufficient with a check box because the value doesn't change to checked or unchecked depending on the state of the check box. There's another way to work with check boxes that we'll look at next.