Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
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.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.