Hey, everyone, in this video, we're going to start setting the change event for the filters, so
let's get started with the quantity, which is an input field.
So here it is.
It has the ID of quantity.
Let's copy this.
Let's go to Visual Studio.
So after the page loads, we're going to update the parameters and do everything we know we are doing
and then we can start setting the event.
So let's select that element.
Which has the idea of quantity, and in January, the name of the event is Change, which is also a
method inside the method.
We need a function.
And inside here is the code that will be executed when the change event is detected.
If you want, you can try other events, like on key up or on key down, but I think in this case it's
better to use the change event because let's say we want to write one thousand if we use the on key
up event when we type one, this is going to update everything.
Then we type zero, it's going to update again.
So I don't think this is good user experience.
So in this case, I prefer to use the change event.
So this is only going to work when we click out of the element.
So, again, if you want, you can try other events to see which one you prefer.
So inside here, when there's a change to this element, I'm just.
Going to update the.
Search programs, not quantity.
I'm just going to do this, I don't have to update everything again because only the quantity is changing.
So I'm just going to change this property.
And then instead of calling the update programs, because here it should be up to date, I can just
call the update or the details function.
So this is all we have to do in order for the quantity feud to work.
Let's try it out.
I'm just going to save this.
All right, so let me refresh the page now, we have 10, I'm going to try 100.
So as I said, nothing happens until I click out of it.
So I just clicked out.
And now we are seeing the updated value.
Like I said, we need to format this number to force to do that.
Some places to include thousand separators, like let's try 1000.
So as you can see, we need thousands separators.
But let's do this later.
This is fine for now.
We can see that the quantity filter is already working.
So let's go back to ten.
It's up to date again, so this seems to be working well.
Now, let's go to style, because this is also a form feud and then we can take care of these two elements.
So for the style, we can also use a change event the same way.
So.
The idea is style.
So the structure is going to be pretty much the same, let me copy this, I'm also going to use the
change event.
I'm also going to update the all the details, but here, instead of changing the quantity, I'm going
to change the style.
So here it is.
Search programs that style, then I'm going to get the new value.
And after getting the new value, we are going to update the order details again, pretty cool.
Let's save this.
Refresh the page and now it's going to be cool because if this works, not only the price is going to
be updated, but we are also going to see a different photo.
So let's cross our fingers to see if this is working.
I'm going to change this to plain and now pretty cool the price.
Has been updated and now we are seeing a plain shirt instead of a printed shirt.
Let's try to change it again to print it.
Now we are seeing the colored printed shirt and the price is correct, or at least it seems to be.
We're going to test this later.
So pretty cool.
I'm just going to stop this video for now so it doesn't get too long.
And in the next video, we're going to take care of these two elements of.
See you then.