1 00:00:07,530 --> 00:00:08,880 In this video. 2 00:00:08,910 --> 00:00:13,980 Let's talk about form event types. 3 00:00:14,490 --> 00:00:21,110 But I regard this particular video as how to handle forms. 4 00:00:21,120 --> 00:00:27,810 That is, we are going to use some of the form event types to handle forms. 5 00:00:27,960 --> 00:00:36,360 Well, this particular video of how to handle form is really, really important you need to pay attention 6 00:00:36,360 --> 00:00:45,540 to because with this concept we are you can build complex application and if want to be a full stack 7 00:00:45,540 --> 00:00:50,820 developer, handling form is the first thing we need to be familiar with. 8 00:00:50,820 --> 00:00:52,500 So let's get started. 9 00:00:52,860 --> 00:01:00,300 This is a project that we are going to build to show you in and out how to handle forms well. 10 00:01:00,300 --> 00:01:01,410 So let's get started. 11 00:01:01,560 --> 00:01:08,520 So you can see that when I refresh this particular project or form, there is no information going on 12 00:01:08,520 --> 00:01:09,070 here. 13 00:01:09,300 --> 00:01:16,410 So one cool thing I like about this application is that we'll check it out as soon as I focus all my 14 00:01:16,410 --> 00:01:17,210 input. 15 00:01:17,220 --> 00:01:19,620 It tells me that you are typing. 16 00:01:20,330 --> 00:01:25,730 And I believe you've seen this kind of functionality in most of the chart applications. 17 00:01:26,560 --> 00:01:31,270 This is possible because of form or input event type. 18 00:01:31,450 --> 00:01:37,220 But the cool thing is that how are we going to handle the actual values? 19 00:01:37,240 --> 00:01:39,220 A user entered into the form. 20 00:01:39,550 --> 00:01:45,040 So let's say that this is a form for adding product to our website. 21 00:01:45,250 --> 00:01:52,360 So after entering all this data, we need to send the data we've entered to our server of which we are 22 00:01:52,360 --> 00:01:55,930 going to create when you get back to back end development. 23 00:01:56,590 --> 00:02:01,780 The main objective is how can we get the values we type in here? 24 00:02:02,200 --> 00:02:02,800 Like that. 25 00:02:02,800 --> 00:02:04,750 So let me try again first. 26 00:02:04,810 --> 00:02:07,730 So let's say that let me start providing some product name. 27 00:02:07,750 --> 00:02:09,940 So let's say that this is a mock. 28 00:02:11,930 --> 00:02:19,190 And then the price is $5,000 and then quantity is, let's say, ten. 29 00:02:19,190 --> 00:02:22,400 And description, I would say the best. 30 00:02:23,270 --> 00:02:24,020 Laptop. 31 00:02:25,320 --> 00:02:30,240 Laptop and then I would select the category and the electronics. 32 00:02:30,240 --> 00:02:37,590 So the good thing is that when I hit submit, I want to take these values, okay. 33 00:02:37,680 --> 00:02:40,890 And send it to a server for processing. 34 00:02:40,920 --> 00:02:41,470 Okay. 35 00:02:41,490 --> 00:02:45,600 But for now, let's just take the value and dump it into the console. 36 00:02:45,630 --> 00:02:47,310 That's what we are going to do. 37 00:02:47,400 --> 00:02:56,340 So when I open the console and when I hit submit, it will see that the values I entered has been displayed 38 00:02:56,340 --> 00:02:56,580 here. 39 00:02:56,580 --> 00:02:59,800 So I can take these values and do whatever I want with it. 40 00:02:59,820 --> 00:03:04,850 I can check validation or any logic I want to implement in this. 41 00:03:04,860 --> 00:03:07,050 So this is what we are going to do. 42 00:03:07,260 --> 00:03:14,430 And then as soon as I click on Reset, check it out and see that I have emptied my form. 43 00:03:14,970 --> 00:03:15,870 That is good, right? 44 00:03:15,900 --> 00:03:19,690 So let's see how we are going to build this particular project. 45 00:03:19,710 --> 00:03:28,020 So always, since this section is about HTML and CSS, I have provided the HTML for you. 46 00:03:28,440 --> 00:03:28,740 All right. 47 00:03:28,740 --> 00:03:32,970 So let's go through the semantic of our syntax for HTML. 48 00:03:33,000 --> 00:03:41,850 We have H1 core form events, which is this one, and we have one, two, three, four, five input 49 00:03:41,850 --> 00:03:46,320 field one being select input field that we have here. 50 00:03:46,350 --> 00:03:50,370 We have the first input that is the product name. 51 00:03:50,400 --> 00:03:54,360 The second input is the price of the product. 52 00:03:54,660 --> 00:04:03,240 The third input is going to be the quantity of the product, and then the next one going to be the description. 53 00:04:03,240 --> 00:04:06,900 And lastly, the option or the category. 54 00:04:07,020 --> 00:04:11,820 So this one tool we have talked about before, how to create a form. 55 00:04:12,120 --> 00:04:12,600 Great. 56 00:04:12,600 --> 00:04:15,690 And you can see down here I have added two buttons. 57 00:04:15,690 --> 00:04:19,029 One is submit and one is reset. 58 00:04:19,050 --> 00:04:23,910 It will see that a button can be saved for different purposes. 59 00:04:23,940 --> 00:04:30,870 It can use to take an action for deleting, or it can be used for submitting data to back end. 60 00:04:30,870 --> 00:04:33,250 Or it can be used as research in form. 61 00:04:33,270 --> 00:04:41,310 So the type you provide into a button determines the functionality or what the button supposed to do. 62 00:04:41,400 --> 00:04:44,490 So for this one, we see that we provided reset. 63 00:04:46,000 --> 00:04:47,220 It type reset. 64 00:04:47,230 --> 00:04:50,170 So this is not me or you who made it. 65 00:04:50,170 --> 00:04:51,310 That is from JavaScript. 66 00:04:51,310 --> 00:04:54,880 So that is about a syntax for the HTML. 67 00:04:54,880 --> 00:05:02,350 So now back to the JavaScript again because I have taught you how to select elements, this one to have 68 00:05:02,350 --> 00:05:03,250 done it for you. 69 00:05:03,250 --> 00:05:04,510 So let's look through. 70 00:05:04,810 --> 00:05:09,730 We see we have the class name for the individual input field. 71 00:05:09,730 --> 00:05:18,190 So this one is going to be product name P name, product name, product price, product description, 72 00:05:18,190 --> 00:05:23,710 product quantity, category and message is this P tag here? 73 00:05:23,740 --> 00:05:25,840 That's what we see when I type. 74 00:05:25,870 --> 00:05:26,650 Check it out. 75 00:05:26,650 --> 00:05:33,730 You see that when I start typing, I have the message that's functionality for this text. 76 00:05:34,030 --> 00:05:35,950 So that is it about a select. 77 00:05:35,950 --> 00:05:38,020 So let's come back to the JavaScript again. 78 00:05:38,020 --> 00:05:43,870 Now the first event that we will talk about is called On Change. 79 00:05:43,870 --> 00:05:53,650 So these are the commonly used for event, but the most common ones are the change and submit, focus 80 00:05:53,650 --> 00:05:54,940 and on play. 81 00:05:55,090 --> 00:05:56,740 I can see four of them by list. 82 00:05:56,740 --> 00:05:57,610 Let's see five. 83 00:05:57,610 --> 00:05:59,560 These are most commonly used ones. 84 00:05:59,560 --> 00:06:03,460 So let's start with the on change event. 85 00:06:03,550 --> 00:06:09,610 Where on change event is an event that is applied to input fields. 86 00:06:09,880 --> 00:06:15,280 For this of this input, we have a method or event called on change. 87 00:06:15,280 --> 00:06:23,830 So let's select the first one, which is the P name which represents the first input field, which is 88 00:06:23,830 --> 00:06:24,460 this one. 89 00:06:24,490 --> 00:06:27,400 See, I have a class of P name. 90 00:06:27,430 --> 00:06:29,890 That's what I have selected it here. 91 00:06:30,250 --> 00:06:30,820 All right. 92 00:06:30,820 --> 00:06:35,230 Let's start with on change event type. 93 00:06:35,230 --> 00:06:38,140 So what is on change event type? 94 00:06:38,200 --> 00:06:48,040 The on change event occurs when the value of an element has been changed and this event type can be 95 00:06:48,040 --> 00:06:55,090 used with any input field, for example, select text area and many more. 96 00:06:55,240 --> 00:06:58,600 So let's see how we are going to implement this one. 97 00:06:58,720 --> 00:07:05,860 So like I said, we are going to target the first input field with the class name, p name if you check 98 00:07:05,860 --> 00:07:08,650 it out inside the semantic or for form. 99 00:07:08,650 --> 00:07:14,200 This is the input field that I want to target that is with the class P name. 100 00:07:14,200 --> 00:07:18,670 So I have selected that that is P name. 101 00:07:18,820 --> 00:07:27,190 So for all input fields, we have all the events that comes after dot or period. 102 00:07:27,580 --> 00:07:38,200 So for this input field, what we want is call on change, which is equal to my custom function as that. 103 00:07:38,200 --> 00:07:39,970 And here we go. 104 00:07:40,000 --> 00:07:47,980 The same logic I have access to the event type as E, but for the meantime let's just console.log a 105 00:07:47,980 --> 00:07:49,750 text and say that. 106 00:07:50,580 --> 00:07:51,930 On change. 107 00:07:53,650 --> 00:07:54,700 Ties. 108 00:07:55,510 --> 00:07:56,320 Okay. 109 00:07:57,480 --> 00:07:57,930 Great. 110 00:07:57,930 --> 00:07:59,340 So let's see now. 111 00:07:59,340 --> 00:08:01,020 Let's open the terminal. 112 00:08:01,170 --> 00:08:07,320 Sorry, the console now, because I have selected the first one. 113 00:08:07,350 --> 00:08:10,520 This is what the event is going to be fired on. 114 00:08:10,530 --> 00:08:14,490 So when I type in anything, then I click outside. 115 00:08:14,490 --> 00:08:22,230 You can see that we have on change has been okayed because right now I have caused change to this input 116 00:08:22,230 --> 00:08:22,830 field. 117 00:08:23,280 --> 00:08:25,200 That is why I have that. 118 00:08:25,200 --> 00:08:30,420 When you say a value, remember all input field has a value property. 119 00:08:30,420 --> 00:08:36,539 If I want to have a default value, we can say that value is equal to let's say I mark. 120 00:08:36,750 --> 00:08:40,770 So when I save it by default, I'm going to see this. 121 00:08:40,770 --> 00:08:46,800 I mark if you don't provide it means is undefined or empty string. 122 00:08:46,800 --> 00:08:53,010 So in that case, if I type anything here, it means that I'm causing change to the value. 123 00:08:53,280 --> 00:08:58,170 So as soon as I click outside, it means that on change has been occurred. 124 00:08:58,200 --> 00:08:59,190 That is it. 125 00:08:59,190 --> 00:09:03,870 So with this one we can also take the text. 126 00:09:03,870 --> 00:09:08,730 We type in here or just display some text and says that you are typing. 127 00:09:09,030 --> 00:09:15,330 As soon as I click inside, I will display a text that you are typing, or when I click outside I will 128 00:09:15,330 --> 00:09:18,180 say that you have stopped typing. 129 00:09:18,210 --> 00:09:19,020 Do you get it? 130 00:09:19,020 --> 00:09:19,620 Yes. 131 00:09:19,620 --> 00:09:22,590 So that is it about the on change. 132 00:09:22,590 --> 00:09:24,920 So let's move on. 133 00:09:25,320 --> 00:09:32,700 The next event type, which is the most important one we need to pay attention to, is what you call 134 00:09:32,700 --> 00:09:34,380 on submit. 135 00:09:34,800 --> 00:09:35,340 Great. 136 00:09:35,340 --> 00:09:40,230 So on submits or case when a form is submitted. 137 00:09:40,740 --> 00:09:41,130 Right. 138 00:09:41,130 --> 00:09:46,260 So let's say that you want to submit a form or a data to our server for processing. 139 00:09:46,290 --> 00:09:50,040 We are going to use the method called on submit. 140 00:09:50,040 --> 00:09:54,090 So here we go on submit. 141 00:09:54,390 --> 00:09:55,050 Great. 142 00:09:55,050 --> 00:10:02,220 So the way this one works is that we need to select the entire form, this form, because this what 143 00:10:02,220 --> 00:10:03,990 we are targeting the form. 144 00:10:04,260 --> 00:10:08,430 So the form wraps everything inside it, right? 145 00:10:08,430 --> 00:10:13,350 So if we target the form, we have a method called on submit. 146 00:10:13,350 --> 00:10:21,060 It means that it's going to submit every value inside the input field of this particular form. 147 00:10:21,060 --> 00:10:23,190 So we are going to select the form. 148 00:10:23,400 --> 00:10:25,860 We can do it up here. 149 00:10:25,890 --> 00:10:38,400 So let's save const form now is equal to document dot query selector and our target the form. 150 00:10:39,260 --> 00:10:40,270 Has that. 151 00:10:40,280 --> 00:10:48,590 So if I console.log the form, you can see that I have the form which is my HTML. 152 00:10:48,590 --> 00:10:51,740 Symantec has done so on this form. 153 00:10:51,740 --> 00:10:57,830 That's where we are going to add our event lists on so form dot. 154 00:10:57,830 --> 00:11:08,990 Now the method we want is called on submit or lowercase and is equal to my normal function. 155 00:11:09,050 --> 00:11:14,270 That is anonymous function and I have access to E and I start. 156 00:11:14,540 --> 00:11:18,650 So when I console.log, let's say that form. 157 00:11:19,300 --> 00:11:20,860 Submitted. 158 00:11:21,490 --> 00:11:22,000 Great. 159 00:11:22,000 --> 00:11:22,980 So let's see. 160 00:11:22,990 --> 00:11:30,670 Now, let me open the console or let me remove this console log and let me also remove this event type 161 00:11:30,670 --> 00:11:33,640 here for the meantime, and let's focus on this. 162 00:11:33,790 --> 00:11:34,960 So check it out. 163 00:11:34,990 --> 00:11:39,040 Let's reduce the screen size here of my console. 164 00:11:39,070 --> 00:11:46,960 Now, as soon as I click on submit, you see something happens at a flash, I see the result. 165 00:11:47,530 --> 00:11:48,670 Put your eyes here. 166 00:11:49,090 --> 00:11:54,370 When I click submit you can see that something happens, but all of a sudden it disappeared. 167 00:11:54,370 --> 00:11:55,930 So we need to avoid that. 168 00:11:55,930 --> 00:11:59,440 And we have a method called prevent default. 169 00:11:59,650 --> 00:12:06,790 So this is default behavior, meaning when we submit the browser refresh, put eyes here also on this 170 00:12:06,790 --> 00:12:07,630 icon here. 171 00:12:07,840 --> 00:12:10,420 As soon as I submit the form, check it out. 172 00:12:10,570 --> 00:12:13,270 You see that it refresh it, you see. 173 00:12:13,270 --> 00:12:14,590 And we don't want that. 174 00:12:14,980 --> 00:12:19,030 We need to prevent this kind of default behavior of the browser. 175 00:12:19,030 --> 00:12:23,440 And we have a method called e dot prevent default. 176 00:12:23,440 --> 00:12:26,320 So let me give you a comment here is really important. 177 00:12:26,350 --> 00:12:31,060 Pay attention to this, which is prevents the default. 178 00:12:32,930 --> 00:12:36,200 Behavior of the form behavior. 179 00:12:37,560 --> 00:12:41,160 Behavior of the phone. 180 00:12:41,430 --> 00:12:45,960 So here we go on e, we have a method called Prevent. 181 00:12:46,750 --> 00:12:49,750 Default type it as we see on the screen. 182 00:12:50,080 --> 00:12:53,620 So with this one, check it out when I click. 183 00:12:53,650 --> 00:12:56,440 You see that nothing seems to be refreshing. 184 00:12:56,470 --> 00:13:03,160 Therefore, we can have access to the text we are requesting or we are accessing all we want. 185 00:13:03,580 --> 00:13:04,960 When I click on Submit. 186 00:13:04,990 --> 00:13:11,830 Now you see that I have it being displayed on line number 29 or my code form submitted. 187 00:13:11,890 --> 00:13:19,660 So it means that we can do any logic here by taking the values we type in here and then we can console.log 188 00:13:19,660 --> 00:13:21,010 it or we can send it. 189 00:13:21,220 --> 00:13:26,050 So how can we get a value from these forms as simple as this? 190 00:13:26,050 --> 00:13:33,340 So here gets the value for the input. 191 00:13:35,350 --> 00:13:39,430 In peut feels great. 192 00:13:39,430 --> 00:13:41,350 So let's start with the name. 193 00:13:41,350 --> 00:13:43,000 That's the product name, right? 194 00:13:43,330 --> 00:13:49,750 So it's going to be commerce can give it as product name or name is equal to. 195 00:13:49,750 --> 00:13:55,150 Now I want the first value for my first input field going to be. 196 00:13:55,990 --> 00:13:56,860 P name. 197 00:13:56,860 --> 00:14:02,590 There is a product name and on that we have a property called value. 198 00:14:02,680 --> 00:14:05,870 So all selected impute element. 199 00:14:05,890 --> 00:14:13,750 We have a property on this selected impute as value and that one contains the value in the form. 200 00:14:13,870 --> 00:14:19,510 Before I do this one, let me come up here and let's console.log this p name here. 201 00:14:19,540 --> 00:14:21,400 Our first P. 202 00:14:22,170 --> 00:14:24,390 Talk or p impede your eyesight. 203 00:14:24,420 --> 00:14:29,460 So check it out inside the cone so you can see that we have the PPI. 204 00:14:29,640 --> 00:14:37,800 And if I scroll down, we have a value that contains the text or the data inside the form. 205 00:14:38,100 --> 00:14:40,080 So scroll down. 206 00:14:40,080 --> 00:14:44,130 We have a bunch of methods here, but what we want is this. 207 00:14:44,460 --> 00:14:48,030 You remember we provided a value of iMac. 208 00:14:48,060 --> 00:14:49,080 Check it out here. 209 00:14:49,110 --> 00:14:51,330 This is what I'm referring to. 210 00:14:51,810 --> 00:14:57,360 So I don't want to give it a static value here, but instead I want to give a value. 211 00:14:57,360 --> 00:15:00,540 When I type in here, I can get a value. 212 00:15:00,540 --> 00:15:06,120 I'm typing from this form so we can do that inside our submit handler. 213 00:15:06,120 --> 00:15:08,340 So let me move this one. 214 00:15:08,340 --> 00:15:10,350 Now you know how we can get a name. 215 00:15:10,350 --> 00:15:11,700 We're going to be as. 216 00:15:12,790 --> 00:15:16,450 The product name dot value. 217 00:15:16,480 --> 00:15:20,820 You start in the console now and this one is for the product name. 218 00:15:20,830 --> 00:15:24,100 I can copy this one and I want to get this one. 219 00:15:24,100 --> 00:15:25,900 They put up price this one. 220 00:15:26,140 --> 00:15:33,790 So which is also also up here, price description, quantity category. 221 00:15:33,880 --> 00:15:36,940 And then the message in the form, no form here. 222 00:15:36,940 --> 00:15:39,550 Okay, the message if no message there. 223 00:15:39,670 --> 00:15:40,820 So here, let's continue. 224 00:15:40,840 --> 00:15:41,320 So here. 225 00:15:41,320 --> 00:15:43,030 I want the price here. 226 00:15:43,570 --> 00:15:46,720 So I would target P. 227 00:15:47,450 --> 00:15:48,980 Is this price? 228 00:15:49,190 --> 00:15:52,760 So price going to be the p price. 229 00:15:54,080 --> 00:15:55,160 P price. 230 00:15:55,160 --> 00:15:58,610 And then I want to get the description. 231 00:15:59,210 --> 00:16:01,880 So we're going to be description. 232 00:16:04,160 --> 00:16:05,690 Which is also. 233 00:16:07,110 --> 00:16:08,970 Product description. 234 00:16:09,180 --> 00:16:12,450 And I also want to get the quantity. 235 00:16:12,480 --> 00:16:18,720 So the same is going to be key with UI going to be product quantity here. 236 00:16:18,840 --> 00:16:24,870 And let me show you one thing about this select, because it's really important here for the Select. 237 00:16:24,900 --> 00:16:25,590 Have a look. 238 00:16:25,830 --> 00:16:31,600 You can see that we have the Select here and inside we have the options. 239 00:16:31,620 --> 00:16:34,350 So for this one, how can we get the value? 240 00:16:34,360 --> 00:16:39,600 Because whatever we select is what we want to send or what we want. 241 00:16:39,630 --> 00:16:45,350 So inside here you can see that we've given it on the parent of the select. 242 00:16:45,360 --> 00:16:51,330 We are giving it a class of category and then inside it we have options. 243 00:16:51,330 --> 00:16:54,080 And for the options we have a value. 244 00:16:54,090 --> 00:17:01,620 As we explained before, this value is is what is going to be accessible inside our form, but not this 245 00:17:01,620 --> 00:17:02,040 one. 246 00:17:02,190 --> 00:17:04,050 So what if I type in here? 247 00:17:04,079 --> 00:17:10,800 It's going to be the exact value we are going to receive from the JavaScript when we send grade. 248 00:17:10,800 --> 00:17:15,060 So back here, remember we selected the category. 249 00:17:15,060 --> 00:17:21,450 So we're going to be the P category or just category going to be? 250 00:17:21,599 --> 00:17:22,230 Yes. 251 00:17:22,230 --> 00:17:23,520 Which is this one? 252 00:17:23,670 --> 00:17:24,750 Yes, this one. 253 00:17:24,750 --> 00:17:25,589 There we go. 254 00:17:25,829 --> 00:17:28,050 A class of category on this select. 255 00:17:28,050 --> 00:17:32,160 So here are going to be the category or cut for short. 256 00:17:32,160 --> 00:17:41,310 So for this one, I can console.log all the text, I can put them an object as that or just dump it 257 00:17:41,310 --> 00:17:42,120 as name. 258 00:17:42,120 --> 00:17:51,330 Here we have name, we have price, we have description, we have the quantity here and we have the 259 00:17:51,330 --> 00:17:52,080 category. 260 00:17:52,080 --> 00:17:54,030 So this one, check it out. 261 00:17:54,060 --> 00:17:55,770 Let's open the console. 262 00:17:56,100 --> 00:18:02,490 Now, when I type anything, this is going to be my Apple laptop. 263 00:18:02,640 --> 00:18:08,010 The price is $2,000 and then let's say the quantity is five. 264 00:18:08,040 --> 00:18:14,370 Description is the best the best product. 265 00:18:14,550 --> 00:18:17,880 And then the other category is electronics. 266 00:18:17,880 --> 00:18:24,330 When I click submit, it will say that from submitted and I have all the values I type in here. 267 00:18:24,720 --> 00:18:31,020 If you want to display them as an object, let's wrap everything in an object as that. 268 00:18:31,020 --> 00:18:31,800 So let's see. 269 00:18:32,790 --> 00:18:34,140 Let me type anything here. 270 00:18:34,170 --> 00:18:37,050 Yes, we know what we are now. 271 00:18:37,050 --> 00:18:40,620 When I sent you see that I have the values down here. 272 00:18:40,830 --> 00:18:41,520 That is it. 273 00:18:41,520 --> 00:18:43,680 Maybe I'm thinking that for the final one. 274 00:18:43,690 --> 00:18:46,100 You see, I display some text. 275 00:18:46,110 --> 00:18:49,610 Well, because I use the play and focus. 276 00:18:49,650 --> 00:18:54,330 So let me do that because this one is the most important part, how we can get the values. 277 00:18:54,330 --> 00:18:56,820 That's why I took my time to explain. 278 00:18:56,820 --> 00:19:00,600 And let's let's work on the on the reset here. 279 00:19:00,900 --> 00:19:03,960 So let's see how we can implement on reset. 280 00:19:03,960 --> 00:19:07,020 And it's also as simple as that. 281 00:19:07,260 --> 00:19:11,850 So the same concept is we are going to copy this one. 282 00:19:13,600 --> 00:19:24,310 Or better still on reset here we can add the event inside it on the form dots on reset on reset and 283 00:19:24,310 --> 00:19:32,140 is equal to my function as that we can create this function outside this particular function. 284 00:19:32,140 --> 00:19:34,980 So let me do that one for simplicity's sake. 285 00:19:34,990 --> 00:19:36,400 So the same thing here. 286 00:19:36,400 --> 00:19:39,130 So I'll copy this one like that. 287 00:19:39,130 --> 00:19:47,950 And now come down here and then here is going to be as on reset, reset. 288 00:19:47,950 --> 00:19:49,300 So on reset. 289 00:19:49,300 --> 00:19:52,300 I want to empty the values, right? 290 00:19:52,300 --> 00:19:54,420 I want to empty the values. 291 00:19:54,460 --> 00:19:56,020 We're going to be this one. 292 00:19:56,020 --> 00:19:57,160 So here we go. 293 00:19:57,160 --> 00:19:58,960 Let me remove this one. 294 00:19:59,320 --> 00:20:04,270 This one, this one, this one, this one. 295 00:20:04,270 --> 00:20:06,520 And you say the value. 296 00:20:06,520 --> 00:20:14,440 Suppose the value is empty and this one to the value is equal to empty string and the value is equal 297 00:20:14,440 --> 00:20:15,520 to empty string. 298 00:20:15,550 --> 00:20:20,290 The value is equal to empty string and the value is equal to empty string. 299 00:20:20,500 --> 00:20:25,330 So with this one, let's see when I click, let's try to console. 300 00:20:25,330 --> 00:20:26,620 Look at text here. 301 00:20:28,150 --> 00:20:30,460 And says that for. 302 00:20:32,650 --> 00:20:35,200 Reset it or reset? 303 00:20:35,230 --> 00:20:36,880 Okay, great. 304 00:20:36,880 --> 00:20:45,940 So let's see when I click on the this form, you see that I see for reset because it means that we are 305 00:20:45,940 --> 00:20:48,340 giving this button a specific type. 306 00:20:48,340 --> 00:20:54,700 So this button is going to be called, but instead is reset because instead of H.M., you provided a 307 00:20:54,700 --> 00:20:55,150 reset. 308 00:20:55,150 --> 00:20:58,180 So it knows the kind of button you are clicking on. 309 00:20:58,420 --> 00:21:05,560 So like I said, let's say that we want to do the reset as soon as we submit the form, right? 310 00:21:05,560 --> 00:21:11,470 So what we can do is that we can bring this one here and inside the form here. 311 00:21:11,470 --> 00:21:13,000 And how can say that? 312 00:21:13,300 --> 00:21:17,560 I mean, reset after I submit. 313 00:21:19,510 --> 00:21:21,590 And now it's down here like that. 314 00:21:21,610 --> 00:21:22,030 Great. 315 00:21:22,030 --> 00:21:28,750 So this one is the same thing as implementing this logic, so I can even comment this one out now and 316 00:21:28,750 --> 00:21:31,930 check it out because JavaScript read from top to bottom. 317 00:21:32,140 --> 00:21:36,610 By the time it gets here, you've already seen our value. 318 00:21:36,610 --> 00:21:37,360 So let's see. 319 00:21:37,360 --> 00:21:43,300 So let's tap anything here and let's see when I click submit you see that everything is gone. 320 00:21:43,300 --> 00:21:45,730 That's another way we can implement select. 321 00:21:45,730 --> 00:21:50,920 Well, maybe thinking that you want to see you are typing something like this one. 322 00:21:50,920 --> 00:21:57,100 Well is this one is possible because of an event called on focus. 323 00:21:57,280 --> 00:22:03,190 So any input field that you want to trigger this event, you need to select that. 324 00:22:03,490 --> 00:22:09,910 So I will come down here and then give it another event type call on focus. 325 00:22:10,840 --> 00:22:11,590 On full course. 326 00:22:11,590 --> 00:22:12,520 So here we go. 327 00:22:12,790 --> 00:22:24,400 The same the product name input field and the name of the event is going to be on focus so on. 328 00:22:25,950 --> 00:22:30,120 Focus is equal to my normal function. 329 00:22:30,240 --> 00:22:32,930 And let's just console.log. 330 00:22:32,940 --> 00:22:35,220 Let's say for. 331 00:22:36,540 --> 00:22:37,650 Full cost. 332 00:22:40,700 --> 00:22:41,230 Okay. 333 00:22:41,240 --> 00:22:42,140 So let's see. 334 00:22:42,500 --> 00:22:43,910 Let's open the console. 335 00:22:43,940 --> 00:22:44,810 This one. 336 00:22:45,020 --> 00:22:47,090 Now, let's refresh it. 337 00:22:47,390 --> 00:22:54,290 You see, as soon as I move or I click inside, this particular input has been focused, meaning it 338 00:22:54,290 --> 00:22:55,910 has been activated. 339 00:22:56,000 --> 00:23:03,560 So with this one, as soon as I click inside, I can display a text that you are typing or you are about 340 00:23:03,560 --> 00:23:04,290 to type. 341 00:23:04,310 --> 00:23:06,710 So I will take this one. 342 00:23:07,670 --> 00:23:15,550 I want display the message into this element here, or message of which I have selected it here as message 343 00:23:15,560 --> 00:23:16,130 grade. 344 00:23:16,310 --> 00:23:22,010 So inside that I can display any text and say that you are typing. 345 00:23:22,040 --> 00:23:24,220 So let's go. 346 00:23:24,230 --> 00:23:32,930 So inside the input here, I will select the message and in a HTML or text content. 347 00:23:32,960 --> 00:23:38,360 Now is equal to I would say you are typing. 348 00:23:38,810 --> 00:23:40,250 So here you go. 349 00:23:40,490 --> 00:23:42,290 You are. 350 00:23:43,320 --> 00:23:44,250 Typing. 351 00:23:45,240 --> 00:23:47,370 Let's save it and let's see what we have. 352 00:23:47,400 --> 00:23:51,240 When I click inside, it means that it has been fixed, right? 353 00:23:51,240 --> 00:23:59,730 So we can add any emoji as we did before by going to Q symbol dot com and you can copy any image of 354 00:23:59,730 --> 00:24:00,570 your choice. 355 00:24:00,870 --> 00:24:04,710 So let me copy this green heart and I'll put it here. 356 00:24:04,750 --> 00:24:05,670 I'll start. 357 00:24:05,670 --> 00:24:07,950 So check it out when I. 358 00:24:08,590 --> 00:24:10,390 When my input gets the cars. 359 00:24:10,390 --> 00:24:10,960 I see. 360 00:24:10,960 --> 00:24:19,390 Let me add three dots here to show that yes, I'm typing and indeed I have it, but when I click outside. 361 00:24:20,340 --> 00:24:23,430 We need to trigger an event called on Blair. 362 00:24:23,430 --> 00:24:29,130 And Blair means that if you click outside your input field, meaning it has lose focus. 363 00:24:29,130 --> 00:24:32,070 So that is what we call on. 364 00:24:32,070 --> 00:24:38,040 Blair So the same thing, target the same input, hear my product name. 365 00:24:38,040 --> 00:24:39,420 So instead of. 366 00:24:39,870 --> 00:24:44,520 So instead of on focus is going to be on blur. 367 00:24:44,640 --> 00:24:52,680 So on blur to I will say that you have stopped you have stopped typing. 368 00:24:52,680 --> 00:24:55,590 And let me give it a different emoji. 369 00:24:55,860 --> 00:25:01,260 And this time around, I will say broken heart. 370 00:25:03,060 --> 00:25:04,140 Yes. 371 00:25:04,140 --> 00:25:05,530 And there you go. 372 00:25:05,550 --> 00:25:07,090 Now check it out. 373 00:25:07,110 --> 00:25:08,870 Lets start typing. 374 00:25:08,880 --> 00:25:09,870 Click away. 375 00:25:09,900 --> 00:25:11,930 Now we have stop typing. 376 00:25:11,940 --> 00:25:20,750 So the take away here or what I'm interested with is the the submit how to get the values is really 377 00:25:20,820 --> 00:25:27,060 important guys and this one to the play on for are used for user experience. 378 00:25:27,450 --> 00:25:33,090 Now that you have all the tools we need is time to build awesome project. 379 00:25:33,120 --> 00:25:39,930 Now from beginning of this call from a HTML, CSS JavaScript, the DOM functions. 380 00:25:39,960 --> 00:25:49,320 Now you have all the tools to get started to build or some projects to improve or to enhance your portfolio. 381 00:25:49,350 --> 00:25:50,250 All right, guys. 382 00:25:50,250 --> 00:25:54,000 So let's start at the next video to start to build project.