1 00:00:09,290 --> 00:00:15,920 Hey, everyone, in this video, we're going to continue working with the forms, but now instead of 2 00:00:15,920 --> 00:00:23,750 sending the selected option only when clicking the button, let's try to track a change event. 3 00:00:24,020 --> 00:00:30,700 So any time we change the option, we are going to send the updated value to this element. 4 00:00:31,040 --> 00:00:38,870 So to do this, let's just copy this first example from the previous lesson, which is using. 5 00:00:40,030 --> 00:00:41,560 A select box. 6 00:00:44,010 --> 00:00:45,060 So here it is. 7 00:00:45,420 --> 00:00:47,970 Let me just uncommented this. 8 00:00:53,990 --> 00:00:57,020 So let's get the idea of this select box. 9 00:00:59,010 --> 00:01:01,680 Which is education level. 10 00:01:01,860 --> 00:01:04,830 I'm just going to copy this so now. 11 00:01:06,160 --> 00:01:16,630 Instead of tracking a click event to a button, we are just going to select that select box and the 12 00:01:16,630 --> 00:01:21,190 event that we are going to track is going to be the on. 13 00:01:22,340 --> 00:01:31,670 Change event, so before we continue, I'm just going to comment all this and I'm going to do cancel 14 00:01:32,270 --> 00:01:33,350 that log. 15 00:01:35,230 --> 00:01:40,600 Change it just so we can understand how this works, so I'm going to save this. 16 00:01:43,560 --> 00:01:52,020 Refreshing the page, so now nothing is going on, but every time we change the option here, we can 17 00:01:52,020 --> 00:01:55,100 see that we are sending this message to the council. 18 00:01:55,110 --> 00:01:57,650 So we are firing that event. 19 00:01:57,810 --> 00:01:59,540 Let's try to change it again. 20 00:02:00,390 --> 00:02:03,120 So now we just send the message one more time. 21 00:02:03,120 --> 00:02:07,770 So every time we do this, our function is going to be executed. 22 00:02:07,980 --> 00:02:14,370 So now, instead of just doing console dialogue, we can do the same thing we did before, which is 23 00:02:14,370 --> 00:02:16,780 sending the value to that element. 24 00:02:17,400 --> 00:02:19,950 So as you can see, this is pretty simple. 25 00:02:19,960 --> 00:02:22,230 This is pretty much what we've done before. 26 00:02:22,470 --> 00:02:31,320 But instead of using an unclick event to a button, we are just using the on change event to the select 27 00:02:31,320 --> 00:02:31,870 box. 28 00:02:32,250 --> 00:02:38,570 So now the idea of the elements that we want to get is the education level. 29 00:02:38,730 --> 00:02:42,780 So it's the same element that is the select few. 30 00:02:44,360 --> 00:02:51,140 And then the rest is going to be the same, just the element where we want to show the result is going 31 00:02:51,140 --> 00:02:52,080 to be different. 32 00:02:52,580 --> 00:02:57,620 So here we have an element with the idea of selected level. 33 00:02:59,040 --> 00:03:00,750 So changing it here. 34 00:03:02,200 --> 00:03:11,590 So let's do a recap, we are just selecting that select box element, then we are getting the selected 35 00:03:11,590 --> 00:03:12,340 index. 36 00:03:12,340 --> 00:03:18,010 We have this through the options property inside the selected index property. 37 00:03:18,310 --> 00:03:24,730 Then we are just selecting this whole element and getting its inner HDMI out. 38 00:03:25,150 --> 00:03:26,320 So by doing this. 39 00:03:27,410 --> 00:03:35,450 Refreshing the page every time we change this, we're going to automatically send the selected value 40 00:03:35,480 --> 00:03:36,630 to this element. 41 00:03:36,770 --> 00:03:39,590 So let's try again and again. 42 00:03:39,590 --> 00:03:42,460 So as you can see, this is working perfectly. 43 00:03:42,830 --> 00:03:45,130 So why would we want to do this? 44 00:03:45,140 --> 00:03:49,880 Well, let's say we have a sales page, so let's go to our post website. 45 00:03:51,160 --> 00:03:57,340 I've showed you this in the first lesson of the course, let's see it again, so I'm just going to click 46 00:03:57,340 --> 00:04:00,610 buy to start buying this phone. 47 00:04:00,760 --> 00:04:03,570 And as you can see, we have a few options here. 48 00:04:03,790 --> 00:04:05,680 So here we have the squares. 49 00:04:05,950 --> 00:04:08,740 But consider them to be an input field. 50 00:04:08,950 --> 00:04:13,630 So this could be a dropdown like the select box we have. 51 00:04:13,960 --> 00:04:17,980 This could be radio buttons or select boxes. 52 00:04:17,990 --> 00:04:20,200 So any time there's a change. 53 00:04:20,200 --> 00:04:23,050 So I'm selecting this, something is happening. 54 00:04:23,260 --> 00:04:25,560 We don't have to click an outside button. 55 00:04:25,570 --> 00:04:29,320 We don't have to select the option we want and then click a button. 56 00:04:29,470 --> 00:04:34,900 We just need to select an option and it is automatically changing the product photo. 57 00:04:36,270 --> 00:04:43,470 So this is exactly what we are doing here, any time we change the option, we are doing something here. 58 00:04:44,250 --> 00:04:50,580 In this case, instead of just sending these selected option to this element, we could be getting a 59 00:04:50,580 --> 00:04:54,970 photo, getting the price of the product or anything like this. 60 00:04:54,990 --> 00:04:57,570 So the other examples are going to be the same. 61 00:04:57,580 --> 00:05:06,150 I just want to show you one more example using the check boxes, because let's remember that these are 62 00:05:06,150 --> 00:05:07,760 individual elements. 63 00:05:08,070 --> 00:05:09,660 So it's going to be similar. 64 00:05:09,660 --> 00:05:16,740 But the only difference is that we are going to have to start a loop and add that on change events to 65 00:05:16,740 --> 00:05:18,320 each of these elements. 66 00:05:18,330 --> 00:05:20,460 So let's get started with this. 67 00:05:22,580 --> 00:05:30,830 So first of all, let's select all these elements, so let's go in to create a variable called check. 68 00:05:31,800 --> 00:05:33,870 And then I'm going to select. 69 00:05:34,830 --> 00:05:42,960 All the elements, but it's going to be by their names, so if we click on one of these options, we 70 00:05:42,960 --> 00:05:45,930 can see that all of them has a name of Neo. 71 00:05:46,230 --> 00:05:48,870 So meow, meow, meow. 72 00:05:50,000 --> 00:05:53,900 So get elements by name. 73 00:05:55,550 --> 00:05:57,290 And the name is MUE. 74 00:06:00,850 --> 00:06:02,680 Now we are going to start a loop. 75 00:06:07,290 --> 00:06:08,580 So, again, a. 76 00:06:12,120 --> 00:06:19,290 VA a equals zero, a house has to be smaller than check. 77 00:06:21,620 --> 00:06:22,190 Dot. 78 00:06:23,400 --> 00:06:29,910 Lenth, so check is going to be the array of elements, the array of options we have. 79 00:06:32,810 --> 00:06:34,770 And eight plus plus. 80 00:06:35,660 --> 00:06:44,360 So what we want to do when we enter this loop, we just want to set that event for each of these elements. 81 00:06:44,570 --> 00:06:49,940 So when we enter this loop, we are just going to get check. 82 00:06:51,330 --> 00:06:52,940 We have an index of a. 83 00:06:53,280 --> 00:07:00,780 So let's remember that each of the elements of this array are our age GML elements, so we can just 84 00:07:00,780 --> 00:07:07,230 select them by doing this and then applying the on change event. 85 00:07:11,220 --> 00:07:13,380 So let's start a function. 86 00:07:14,800 --> 00:07:22,200 And before we go ahead again, let's do something so we can see what's going on, so console that log 87 00:07:22,480 --> 00:07:26,890 first, let's just send a generic message, so. 88 00:07:27,930 --> 00:07:28,680 Changed. 89 00:07:30,540 --> 00:07:37,470 Let's refresh the page and let me go to the console, so every time we make a change, so I'm going 90 00:07:37,470 --> 00:07:40,980 to check Hamberger, we can see that it's changed. 91 00:07:41,160 --> 00:07:46,990 And when I uncheck this, it's also going to fire that function. 92 00:07:47,220 --> 00:07:52,700 So checking on checking, it's just calling the on change event. 93 00:07:52,710 --> 00:07:54,530 Same thing for the second one. 94 00:07:54,720 --> 00:07:56,550 Same thing for the third one. 95 00:07:56,700 --> 00:07:58,630 So now what do we need to do? 96 00:07:59,100 --> 00:08:00,270 Let's go back there. 97 00:08:02,460 --> 00:08:10,320 So every time there's a change in any of the elements, we are just going to get the inner turmoil of 98 00:08:10,320 --> 00:08:11,890 that element. 99 00:08:11,910 --> 00:08:13,450 So let's go back there. 100 00:08:13,470 --> 00:08:19,020 So here is going to be a list because we can select multiple items at the same time. 101 00:08:19,530 --> 00:08:23,490 So we have this selected check element. 102 00:08:36,180 --> 00:08:43,830 So now the inner age HTML of this parliament, we are going to start this with. 103 00:08:45,930 --> 00:08:47,860 And unordered list again. 104 00:08:48,180 --> 00:08:54,720 So every time there's a change on any of the elements, we are just going to erase all the inner turmoil 105 00:08:54,720 --> 00:08:59,820 of this element and we are going to start fresh with an unordered list. 106 00:08:59,970 --> 00:09:02,130 And after we finish the loop. 107 00:09:03,720 --> 00:09:13,320 We can just close our unordered list, but this time using the incremental operator, so plus equal 108 00:09:13,620 --> 00:09:15,240 in this time we are just. 109 00:09:16,510 --> 00:09:22,960 Closing the list, so inside here, what we need to do is sending to the list only the options that 110 00:09:22,960 --> 00:09:24,310 are select. 111 00:09:24,580 --> 00:09:25,800 So how do we do this? 112 00:09:26,080 --> 00:09:28,990 We are going to have to start another loop. 113 00:09:30,110 --> 00:09:32,420 So here, let's start a for loop. 114 00:09:36,050 --> 00:09:38,990 And why are we using nested loops? 115 00:09:39,020 --> 00:09:44,330 Well, because this first loop is only setting the on change event. 116 00:09:45,200 --> 00:09:52,340 So by doing this, any element that changes is going to fire this function because we are applying the 117 00:09:52,550 --> 00:09:54,950 change to each of these elements. 118 00:09:55,190 --> 00:09:56,990 This is why we needed this loop. 119 00:09:57,260 --> 00:10:05,990 But now inside here is different because now when any of these elements change, we are going to have 120 00:10:05,990 --> 00:10:12,410 to run a loop again through each of these elements to check which of them are selected. 121 00:10:12,770 --> 00:10:21,050 So now if we use the variable A here, we are going to have a conflict, because even though this for 122 00:10:21,050 --> 00:10:27,080 loop is inside a function, this variable here is in the global scope. 123 00:10:27,230 --> 00:10:34,600 So inside here, we are going to have access to this variable and there's going to be a conflict. 124 00:10:34,610 --> 00:10:37,540 So here we should use a different variable name. 125 00:10:37,550 --> 00:10:41,720 So let's use B, so var B equals zero. 126 00:10:45,780 --> 00:10:49,290 B has to be smaller than check. 127 00:10:51,310 --> 00:10:55,130 Not length and B plus plus. 128 00:10:55,930 --> 00:11:02,470 So now we are just going to run through each of the elements and when we find one of them with that 129 00:11:02,470 --> 00:11:04,060 checked attribute. 130 00:11:04,210 --> 00:11:05,140 So if. 131 00:11:08,960 --> 00:11:09,590 Check. 132 00:11:12,070 --> 00:11:13,690 With an index of B. 133 00:11:20,820 --> 00:11:23,010 Has that checked? 134 00:11:23,720 --> 00:11:30,200 And tribute, then we are going to do something and what we are going to do is just. 135 00:11:31,130 --> 00:11:34,070 Upending some e-mail to that element. 136 00:11:36,120 --> 00:11:45,570 So we are going to open a list item, so we're going to start it here and now we can just add check 137 00:11:45,570 --> 00:11:46,080 be. 138 00:11:48,370 --> 00:11:57,580 That value, don't forget the plus sign so we can concatenate and then after doing this, we can just 139 00:11:58,210 --> 00:11:58,960 close. 140 00:12:01,680 --> 00:12:10,020 The list item, so let's do a recap, may just reduce the font just so we can see the whole code for 141 00:12:10,020 --> 00:12:11,570 all those check boxes. 142 00:12:11,580 --> 00:12:13,320 They are individual inputs. 143 00:12:13,650 --> 00:12:18,970 So we are running a loop so we can set the on change event to all of them. 144 00:12:19,560 --> 00:12:23,100 So here we are setting the on change event for all of them. 145 00:12:23,370 --> 00:12:31,590 And any time any of these elements change, we're going to run through them and check each of them have 146 00:12:31,590 --> 00:12:34,560 the attribute of checked and the ones that do. 147 00:12:34,860 --> 00:12:38,870 We are going to add their values to a list item. 148 00:12:39,210 --> 00:12:47,070 We are going to send this list item to that age HTML element called Select the Check where we are printing 149 00:12:47,070 --> 00:12:47,930 the results. 150 00:12:48,240 --> 00:12:55,920 So if we save this and go back to the page now, we can see that any change we do. 151 00:12:55,920 --> 00:12:57,660 So let's try Hamberger. 152 00:12:57,900 --> 00:13:00,380 We are just creating a list item. 153 00:13:00,600 --> 00:13:07,230 Remember that any change we do if now I select Frys, I'm not just adding Frys. 154 00:13:07,620 --> 00:13:11,190 If any change happens, we are just starting over. 155 00:13:12,400 --> 00:13:18,430 So we are just scanning the e-mail of this element and starting an empty list. 156 00:13:19,320 --> 00:13:25,920 And then checking all these elements again, this is why we need another loop, so any time there's 157 00:13:25,920 --> 00:13:29,480 a change, we are just going to run through each of these elements. 158 00:13:29,730 --> 00:13:31,920 So the first element is this one. 159 00:13:34,010 --> 00:13:42,050 So this element has the exact attributes because it's checked, so if this happens, we are going to 160 00:13:42,050 --> 00:13:44,230 send its value to this list. 161 00:13:44,930 --> 00:13:46,790 So let's do it again. 162 00:13:47,000 --> 00:13:47,820 Do it again. 163 00:13:47,990 --> 00:13:54,430 Now, every time we change anything, we are starting over and building this list again. 164 00:13:55,420 --> 00:14:00,850 So that was all that I wanted to show for now, I know this is getting a bit more complex than what 165 00:14:00,850 --> 00:14:02,500 we've been doing so far. 166 00:14:02,770 --> 00:14:09,880 Now we are not only interacting with age HTML elements, but these elements are form fuds and they have 167 00:14:09,880 --> 00:14:10,690 values. 168 00:14:10,930 --> 00:14:14,140 Some of them are separate input fields. 169 00:14:14,440 --> 00:14:19,000 But the CELAC box is just one parent element with options. 170 00:14:19,180 --> 00:14:26,440 So I know this is a little complicated, but it just takes a bit of time to get used to this. 171 00:14:27,250 --> 00:14:33,110 When you start working with JavaScript for real, you are going to work with forms a lot of times. 172 00:14:33,310 --> 00:14:35,860 So this is going to be very easy for you. 173 00:14:36,070 --> 00:14:42,580 Like I said, if you need just watch this video again, watch the previous one again and use the Q&A 174 00:14:42,580 --> 00:14:43,180 section. 175 00:14:43,180 --> 00:14:50,170 If you have questions in the next list of exercises, I'm going to put some more examples with forms 176 00:14:50,320 --> 00:14:54,110 so you will have a lot of opportunities to practice. 177 00:14:54,160 --> 00:14:55,440 So that was all for now. 178 00:14:55,440 --> 00:14:56,980 I'll see you in the next video.