1 00:00:01,470 --> 00:00:02,640 Welcome back. 2 00:00:02,670 --> 00:00:07,320 Let's go ahead and prevent the page refresh upon submitting. 3 00:00:07,740 --> 00:00:16,320 So before we get into that, unless we create a function to submit the form, so here is a clue. 4 00:00:16,470 --> 00:00:23,190 How can I get the values here, assuming that I'm taking this value and then send it to a server? 5 00:00:23,220 --> 00:00:28,950 Now I have my values being keep track inside my state, so how can I get that one done? 6 00:00:29,220 --> 00:00:35,010 That is why we are going to create a function called submit and it's going to be named as let me call 7 00:00:35,010 --> 00:00:36,390 this one, I submit. 8 00:00:37,390 --> 00:00:38,140 Handler. 9 00:00:39,600 --> 00:00:45,000 So here comes on form submit. 10 00:00:46,340 --> 00:00:53,720 On form submit is equal to my error function and as that. 11 00:00:53,900 --> 00:00:56,600 So here too I have access to my events. 12 00:00:56,690 --> 00:01:04,940 So here upon form submit I want to console.log the values I get for my input forms. 13 00:01:05,330 --> 00:01:06,770 So here input first. 14 00:01:06,800 --> 00:01:07,070 Sorry. 15 00:01:07,070 --> 00:01:09,800 So here you have the full name and the email and a password. 16 00:01:09,800 --> 00:01:13,790 This contains what is inside our form. 17 00:01:13,820 --> 00:01:19,400 If you scroll down here, we see that we have a value for each of the input field. 18 00:01:19,730 --> 00:01:27,170 So inside here we can go ahead and then take the values and send it to wherever we want. 19 00:01:27,170 --> 00:01:32,750 So let's consider that log the values we have the foo name. 20 00:01:33,740 --> 00:01:41,510 Let's put them inside an object so we have a few name of not the function but instead is foo name. 21 00:01:41,960 --> 00:01:46,580 We have email and then we have password. 22 00:01:48,340 --> 00:01:49,030 I start. 23 00:01:49,030 --> 00:01:55,870 So how can we bind this on submitting to our form and we add give us an important event handler call 24 00:01:55,900 --> 00:01:57,790 on submit on a form. 25 00:01:57,790 --> 00:02:03,670 On a form you have what is called and submit and you provide our method here, our function here to 26 00:02:03,670 --> 00:02:04,330 submit. 27 00:02:04,510 --> 00:02:08,410 So I provide here on form submit. 28 00:02:08,410 --> 00:02:14,650 So now if I click on a button, this function is going to be called and then going to give us the values. 29 00:02:14,830 --> 00:02:21,310 So check it out, let's refresh it and let's type in anything here, anything here at gmail.com and 30 00:02:21,310 --> 00:02:22,810 then password, anything here. 31 00:02:22,840 --> 00:02:28,060 Have a look now and see that when I did that, the page refreshed automatically. 32 00:02:28,060 --> 00:02:29,200 So I didn't see that. 33 00:02:29,200 --> 00:02:31,090 So let's prevent that refreshing. 34 00:02:31,270 --> 00:02:35,260 So on the E, let's say prevent. 35 00:02:36,640 --> 00:02:38,890 Page refresh. 36 00:02:39,550 --> 00:02:43,090 So on E we have a method called prevent. 37 00:02:44,410 --> 00:02:45,310 Default. 38 00:02:47,480 --> 00:02:49,370 And this is going to prevent a default. 39 00:02:49,400 --> 00:02:50,810 So now have a look. 40 00:02:51,260 --> 00:02:52,100 Let's refresh. 41 00:02:52,100 --> 00:02:55,850 Let me remove the console, log in for each of these. 42 00:02:56,670 --> 00:02:56,940 That. 43 00:02:56,940 --> 00:02:57,600 Concealer. 44 00:02:57,600 --> 00:02:58,140 Concealer? 45 00:02:58,560 --> 00:02:59,010 Yeah. 46 00:02:59,010 --> 00:02:59,640 All you want. 47 00:03:00,120 --> 00:03:05,100 So let's go ahead and then try to send a formula for this one. 48 00:03:05,100 --> 00:03:10,270 Bend and bend at gmail.com. 49 00:03:10,290 --> 00:03:12,670 And then one, two, three, four, five. 50 00:03:12,690 --> 00:03:13,730 So let's send. 51 00:03:14,010 --> 00:03:19,290 And now I have my values being displayed inside my console so that. 52 00:03:19,380 --> 00:03:23,760 So I can take this data and send it to whatever I want. 53 00:03:23,970 --> 00:03:24,590 All right, cool. 54 00:03:24,600 --> 00:03:29,250 So the next video, now we know how we handle forms in React. 55 00:03:30,270 --> 00:03:32,990 Let's try to fix this particular error here. 56 00:03:33,000 --> 00:03:35,400 Not even error repetition here. 57 00:03:35,610 --> 00:03:37,200 You could see that. 58 00:03:37,440 --> 00:03:46,590 Well, assuming we have, let's say, ten field to form or 21st to formulas, you create this on change 59 00:03:46,590 --> 00:03:52,070 handler ten times and then initial state also ten times. 60 00:03:52,080 --> 00:03:52,680 Right? 61 00:03:52,680 --> 00:04:00,630 So let's make our life easier and then compress this one to make it more easy, not easy to have a less 62 00:04:00,630 --> 00:04:01,200 code. 63 00:04:01,320 --> 00:04:07,740 So I want to find out a way how we can create a form in React the next video.