1 00:00:00,860 --> 00:00:03,380 In the last section we had a long discussion about controlled fires. 2 00:00:03,410 --> 00:00:08,450 Uncontrolled elements were now going to start to move forward and continue developing our application. 3 00:00:08,450 --> 00:00:13,700 So at this point our search bar now knows exactly what a user is typing into that input. 4 00:00:13,740 --> 00:00:19,550 Now we want to make sure that if the user presses on the enter key after entering some search term we 5 00:00:19,550 --> 00:00:24,860 want to somehow trigger a search for some images and then show those images on the screen. 6 00:00:24,860 --> 00:00:30,070 Now step one of implementing all that is somehow detecting when the user presses the enter key. 7 00:00:30,350 --> 00:00:37,370 So in other words if I go back here and type in cars and press enter on my keyboard I want to somehow 8 00:00:37,370 --> 00:00:38,700 trigger a search. 9 00:00:38,830 --> 00:00:44,360 And you'll notice that right now if you type in something and press enter it looks like the entire page 10 00:00:44,360 --> 00:00:45,260 refreshes. 11 00:00:45,260 --> 00:00:47,410 And our search term disappears. 12 00:00:47,450 --> 00:00:51,700 So at present you're seeing the default behavior of a form element. 13 00:00:51,830 --> 00:00:56,200 Remember we'd put a form in to our search bar right here default. 14 00:00:56,220 --> 00:00:59,580 H T.M. vanilla forms like no re-act whatsoever. 15 00:00:59,670 --> 00:01:05,820 If you ever have a input element selected and you press the Enter key the form or to be more precise 16 00:01:05,820 --> 00:01:11,610 your the browser is going to attempt to submit the form automatically to some back and server. 17 00:01:11,610 --> 00:01:17,640 Now in this case we have no back end server so no information is taken from the form or sent anywhere 18 00:01:17,700 --> 00:01:18,670 whatsoever. 19 00:01:18,990 --> 00:01:23,410 The first thing that we're going to want to do is to disable that default behavior. 20 00:01:23,520 --> 00:01:28,890 We do not want the entire page to refresh automatically any time the user presses enter. 21 00:01:28,890 --> 00:01:32,580 Instead we want to run some custom logic of our own. 22 00:01:32,640 --> 00:01:40,020 So to handle this we're going to find our form tag right here and I'm going to add event handler to 23 00:01:40,020 --> 00:01:48,870 it under the name on submit and then I'll reference a callback method inside of your called this dot 24 00:01:48,930 --> 00:01:50,890 on form submit. 25 00:01:50,900 --> 00:01:56,340 Now remember after a method that we passed to an event handler we do not put parentheses on a no parentheses 26 00:01:56,340 --> 00:01:56,770 here. 27 00:01:57,630 --> 00:02:02,310 After that I'll put on my event handler up here. 28 00:02:02,390 --> 00:02:07,640 This is going to be called with an event object and I do not want the form to attempt to submit itself 29 00:02:07,670 --> 00:02:09,360 and thus refresh the page. 30 00:02:09,470 --> 00:02:15,190 I will prevent that behavior by calling events that prevent default like so. 31 00:02:15,250 --> 00:02:19,720 So this line of code right here is what's going to keep the form or the browser from trying to submit 32 00:02:19,720 --> 00:02:23,230 the form automatically and in the process refresh the page. 33 00:02:23,230 --> 00:02:30,160 So if we now flip back over and enter some text and press ENTER no longer is the page refreshing. 34 00:02:30,190 --> 00:02:34,600 Now this is something that you're going to have to write out many many times on your own personal projects 35 00:02:34,960 --> 00:02:36,880 in just about every case that use a form. 36 00:02:36,910 --> 00:02:42,800 You never want the form to automatically submit itself and to prevent that we call events prevent an 37 00:02:42,830 --> 00:02:45,920 event prevent default. 38 00:02:46,190 --> 00:02:50,360 So we've now got some Colback here that is going to be invoked whenever the user typed something in 39 00:02:50,420 --> 00:02:53,030 and presses enter as a quick exercise. 40 00:02:53,030 --> 00:02:57,470 Let's just make sure that we can cancel log out the current value of the input when the user presses 41 00:02:57,470 --> 00:03:00,360 enter and tries to submit the form to do so. 42 00:03:00,380 --> 00:03:05,650 I can do a console log this state that term like the. 43 00:03:05,690 --> 00:03:07,210 So now I can flip back over. 44 00:03:07,460 --> 00:03:13,490 I'm going to make sure I pull open my console and then will enter in some text and hit enter. 45 00:03:13,790 --> 00:03:18,310 And when I do you'll notice we get a nasty error message right here. 46 00:03:18,650 --> 00:03:19,360 All right. 47 00:03:19,430 --> 00:03:24,150 So this is going to lead us into kind of interesting javascript topic. 48 00:03:24,200 --> 00:03:25,520 Let's take a quick pause right here. 49 00:03:25,550 --> 00:03:29,590 When we come back the next section we're going to learn why we are seeing this error message. 50 00:03:29,600 --> 00:03:32,660 I can tell you that with the code we wrote here is mostly correct. 51 00:03:32,660 --> 00:03:35,120 There's just one little problem that we have inside of your. 52 00:03:35,240 --> 00:03:39,970 That will be a quick and easy fix but understanding the fix can be just a little bit challenging sometimes. 53 00:03:39,980 --> 00:03:43,240 So quick pause come back the next section and discuss what is going on.