1
00:00:08,400 --> 00:00:14,770
Hey, everyone, in this video, we're going to start setting the change event for the filters, so

2
00:00:14,770 --> 00:00:18,760
let's get started with the quantity, which is an input field.

3
00:00:18,920 --> 00:00:19,870
So here it is.

4
00:00:20,110 --> 00:00:22,190
It has the ID of quantity.

5
00:00:22,690 --> 00:00:23,830
Let's copy this.

6
00:00:25,200 --> 00:00:26,580
Let's go to Visual Studio.

7
00:00:26,740 --> 00:00:33,030
So after the page loads, we're going to update the parameters and do everything we know we are doing

8
00:00:33,270 --> 00:00:36,110
and then we can start setting the event.

9
00:00:36,570 --> 00:00:38,400
So let's select that element.

10
00:00:39,360 --> 00:00:46,500
Which has the idea of quantity, and in January, the name of the event is Change, which is also a

11
00:00:46,500 --> 00:00:48,970
method inside the method.

12
00:00:48,990 --> 00:00:50,610
We need a function.

13
00:00:52,900 --> 00:00:58,210
And inside here is the code that will be executed when the change event is detected.

14
00:00:59,580 --> 00:01:06,480
If you want, you can try other events, like on key up or on key down, but I think in this case it's

15
00:01:06,480 --> 00:01:14,670
better to use the change event because let's say we want to write one thousand if we use the on key

16
00:01:14,670 --> 00:01:18,420
up event when we type one, this is going to update everything.

17
00:01:18,660 --> 00:01:21,150
Then we type zero, it's going to update again.

18
00:01:21,330 --> 00:01:23,970
So I don't think this is good user experience.

19
00:01:24,400 --> 00:01:27,470
So in this case, I prefer to use the change event.

20
00:01:27,750 --> 00:01:32,160
So this is only going to work when we click out of the element.

21
00:01:33,220 --> 00:01:39,730
So, again, if you want, you can try other events to see which one you prefer.

22
00:01:39,910 --> 00:01:44,200
So inside here, when there's a change to this element, I'm just.

23
00:01:45,370 --> 00:01:47,830
Going to update the.

24
00:01:49,020 --> 00:01:51,340
Search programs, not quantity.

25
00:01:51,750 --> 00:01:58,590
I'm just going to do this, I don't have to update everything again because only the quantity is changing.

26
00:01:59,010 --> 00:02:02,130
So I'm just going to change this property.

27
00:02:02,130 --> 00:02:09,870
And then instead of calling the update programs, because here it should be up to date, I can just

28
00:02:09,870 --> 00:02:13,920
call the update or the details function.

29
00:02:18,890 --> 00:02:23,510
So this is all we have to do in order for the quantity feud to work.

30
00:02:23,540 --> 00:02:24,650
Let's try it out.

31
00:02:24,920 --> 00:02:26,300
I'm just going to save this.

32
00:02:28,640 --> 00:02:34,280
All right, so let me refresh the page now, we have 10, I'm going to try 100.

33
00:02:34,700 --> 00:02:38,480
So as I said, nothing happens until I click out of it.

34
00:02:38,870 --> 00:02:40,490
So I just clicked out.

35
00:02:40,730 --> 00:02:43,400
And now we are seeing the updated value.

36
00:02:43,640 --> 00:02:47,600
Like I said, we need to format this number to force to do that.

37
00:02:47,610 --> 00:02:53,540
Some places to include thousand separators, like let's try 1000.

38
00:02:54,510 --> 00:02:57,810
So as you can see, we need thousands separators.

39
00:02:58,960 --> 00:03:00,550
But let's do this later.

40
00:03:00,790 --> 00:03:02,050
This is fine for now.

41
00:03:02,350 --> 00:03:07,780
We can see that the quantity filter is already working.

42
00:03:09,710 --> 00:03:11,280
So let's go back to ten.

43
00:03:11,330 --> 00:03:15,300
It's up to date again, so this seems to be working well.

44
00:03:16,130 --> 00:03:23,800
Now, let's go to style, because this is also a form feud and then we can take care of these two elements.

45
00:03:24,110 --> 00:03:28,610
So for the style, we can also use a change event the same way.

46
00:03:28,610 --> 00:03:29,300
So.

47
00:03:30,380 --> 00:03:32,600
The idea is style.

48
00:03:39,990 --> 00:03:45,450
So the structure is going to be pretty much the same, let me copy this, I'm also going to use the

49
00:03:45,450 --> 00:03:46,560
change event.

50
00:03:47,640 --> 00:03:54,690
I'm also going to update the all the details, but here, instead of changing the quantity, I'm going

51
00:03:54,690 --> 00:03:56,710
to change the style.

52
00:03:56,820 --> 00:03:59,010
So here it is.

53
00:04:00,030 --> 00:04:03,960
Search programs that style, then I'm going to get the new value.

54
00:04:07,290 --> 00:04:15,100
And after getting the new value, we are going to update the order details again, pretty cool.

55
00:04:15,330 --> 00:04:16,380
Let's save this.

56
00:04:17,350 --> 00:04:23,140
Refresh the page and now it's going to be cool because if this works, not only the price is going to

57
00:04:23,140 --> 00:04:27,620
be updated, but we are also going to see a different photo.

58
00:04:27,940 --> 00:04:31,360
So let's cross our fingers to see if this is working.

59
00:04:31,390 --> 00:04:36,790
I'm going to change this to plain and now pretty cool the price.

60
00:04:37,900 --> 00:04:43,150
Has been updated and now we are seeing a plain shirt instead of a printed shirt.

61
00:04:43,600 --> 00:04:45,740
Let's try to change it again to print it.

62
00:04:46,270 --> 00:04:53,710
Now we are seeing the colored printed shirt and the price is correct, or at least it seems to be.

63
00:04:53,710 --> 00:04:55,540
We're going to test this later.

64
00:04:55,690 --> 00:04:56,490
So pretty cool.

65
00:04:56,500 --> 00:04:59,890
I'm just going to stop this video for now so it doesn't get too long.

66
00:04:59,890 --> 00:05:04,020
And in the next video, we're going to take care of these two elements of.

67
00:05:04,040 --> 00:05:04,690
See you then.