Hey, everyone, earlier in the course, we learn how to work with different types of form feuds with
JavaScript.
Now let's see how we can do the same thing using J.
Querrey.
So let's start by the vol method, which is used to get or change the value of farm fields.
So here I have an input.
Let's see what's the idea of this input.
So here it is.
Let's go to Visual Studio Code.
Now, again, let's create a variable.
I'm going to call it content.
Input.
So let's go back to our page, as you can see, I already have something written here.
This is not the placeholder.
This is actually the value.
I can write it again just to make sure.
So here's my name.
So going back here.
Let's use Jake Query to select this element, so let's use the idea and then let's use the viral method.
And again, as you can see, there's a logic behind Jake where so pretty much everything we do is very
similar.
So we are not passing anything, any argument here.
So what it's going to do is just getting the value for us.
So let's do it.
And so that log.
And let's see what we have inside this variable.
I'm also going to copy this so we can make some tests, so saving this, refreshing the page.
Let's go to the console.
So as you can see, we just got the value inside this field.
So now let's change this.
I'm just going to change this to John.
Doe, for example, and now we have a different value in this field, so if we call this method again
now, we were able to get its value.
So now, following the same logic, if we pass an argument instead, so I'm just going to pass a name.
So Peter Green, for example.
Now, we just changed the value inside this field using Querrey.
Now let's see some other field types, so let's start by deselect box.
If we want to get the selected value, we can use the same method.
So let's see the idea of this element.
So here it is.
It's called options.
So I'm just going to select this element, and then if I call the Volle method, we can see that we
were able to get the value.
This is Hoppity one, because as you can see, one thing is the text inside this element.
So the e-mail content in one thing is the value.
So what we did now is just getting the value if we just want to get the text that it's selected.
So in this case, Bech, let's remember that with JavaScript, it was a little complicated.
We needed to get the index and then just select the option and get the inner HTML.
But with Jake Wery, it's more simple because Jake warit is very good to select element since we can
use VSS selectors.
This is as easy as doing this.
So let's just get the.
Options element.
And now inside it, if we add a space here, then we are selecting the children of this element, so
the children of this element are the option element and then.
We just want the one.
That has the selected attribute.
So if we do this and then just call the text method, as you can see, with just one line of code,
we were able to get the selected text.
So now let's select a different one.
So, Mt..
Let's run the same code again, and now we have the text of the selected option, so now let's try to
do something.
Every time we change this element, let's send this text to the console.
So let's go to Visual Studio Code.
So here we have that option at.
Element.
So we are going to track the change event, so in January, the name of the event is not on change,
but change.
So change.
And again, this is a method so open and close parentheses to execute the method, semicolon to end
the statement, and inside here we need a function.
So function open and close parentheses, open and close, curly braces, and inside here, what we want
to do is just.
Getting the value every time it changes, so let's create a new variable called new.
Value.
And going back.
To what we've just done, so let's get this selecter.
Pretty good.
And now let's just send it to the council just for testing purposes.
Let's send this variable.
And now refreshing the page every time we select a different option, so Mountain, as you can see,
we are getting the text inside it and sending it to the council.
So city.
Beach, this is pretty cool, and we are using much less lines of code than if we were working with
vanilla JavaScript.
All right.
So moving forward, let's see how we can work with radio buttons.
So this is going to be similar.
All we need to do is adjust the selector.
So let's go to Visual Studio code again first.
Let's see what they have in common.
So we have a form and inside the form we have input few types with the name of gender.
So this is what they all have in common and this is what we are going to use in our code.
So let's go back to visuals to record.
And now, instead of selecting the options, we are just going to select any input.
That has the name of.
Gender.
So any time we detect a change on these elements, we are going to execute something, so just to see
if this is working.
Let's just do that log and let's just send something like changed.
This is something I like to do to see if this is working.
So let me save this.
So, again, the selecter we used here is just pure success, if you're familiar with success, you
know that you can select element by using attributes.
Using the braces, so let's go back there, I'm going to save this and let's try to change first, let
me go to the cons. I'm just going to change it now.
So as you can see, it is detecting the change event.
So change changed again.
Pretty cool.
Now we want to get the value.
So inside here, let's use the same selector.
So we want to get the input, but we just need the one that has the checked attribute so we can just
do it like this.
And then again, the.
Volle method, so when we do this, let's go back there, refresh the page every time we change it.
Now we're getting the value.
So F Norn AM.
So if we inspect these elements, we can see that these values are the ones inside the value attribute,
but what if we just want the text?
Well, let's see how it is in HTML.
With radio buttons, it's a bit more complicated because as you can see, the text is not part of this
element.
So this is not inside an attribute.
This is not the content of the element.
Maybe it's a little bit better to see it in the HTML file.
So let's just go to this file.
So jury forms.
So here we have the radio button, so as you can see, we have an input that starts here and ends here.
And then we just have this tax here that is not part of the element, so how can we get it?
Well, this is easy to do if we use a parent element.
So in this case, I just wrapped every input field with a SPEN.
So this way, instead of getting the voucher attribute, I'm just going to use a method called parent.
So in January, this method is going to select the parent of this element, so in this case, the parent
of this input viewed is this SPEN.
All right, so what happens if we get the age TML?
Of this spane.
Let's try it out.
So when I click a different one, as you can see, we are able to get all the HTML inside this span,
but this is not what we want.
We just want this value.
How can we do this?
Well, let's remember that we also have the text method that is just going to ignore any HTML text.
So it is just going to ignore all this, which is exactly what we need.
So instead of using the HTML method, we are going to use the text method.
So when we do this.
Now, when we change values, we can see that we were able to just get the text that is next to these
input food, so male, female and not informed.
So now let's break this video into two parts, because I don't want it to get too long.
Now, I want to talk about checkboxes, which is going to be similar.
But since we can choose multiple items at the same time, I think it's better to talk about it in a
separate video.
So I'll see you then.