1
00:00:01,260 --> 00:00:11,550
Okay, so, uh, here, um.

2
00:00:11,550 --> 00:00:15,449
For the explanation that I'm going to, uh.

3
00:00:15,449 --> 00:00:25,649
Like that we are going to, uh, and work with today and we are going to need or, uh, or this.

4
00:00:25,649 --> 00:00:28,589
2 weeks we are going to use this.

5
00:00:28,589 --> 00:00:35,189
Um, okay, it's, uh.

6
00:00:35,189 --> 00:00:40,130
It looks very long, but it has lots of styles, but it's not really long.

7
00:00:40,130 --> 00:00:54,600
It only has input type test and input type password and input type email and SLE and also a checkbox.

8
00:00:57,060 --> 00:00:57,119
Okay.

9
00:00:57,119 --> 00:01:11,159
So, you have, I got this example or this HTML from, let me see if we go back.

10
00:01:11,799 --> 00:01:17,239
You have it here in the markup languages course.

11
00:01:18,340 --> 00:01:29,519
And, okay, okay, okay, at the unit four, you have it here.

12
00:01:29,519 --> 00:01:38,560
is this one form html you can download it and add it to the visual added to visual studio and you

13
00:01:38,560 --> 00:01:47,680
can work with it at the same time as i do okay and i got it from this a man here steve griffiths that

14
00:01:47,680 --> 00:01:59,980
has a video about working with forms and javascript okay i'm i have adjusted to what we have seen

15
00:01:59,980 --> 00:02:06,120
okay it's not exactly i'm not going to explain exactly the same as he does but it is very

16
00:02:06,120 --> 00:02:14,919
interesting if you have like a while to to see okay to watch it because like he works with he

17
00:02:14,919 --> 00:02:20,360
he speaks about html and he explains some things that maybe you can use

18
00:02:23,000 --> 00:02:30,439
afterwards okay but let's look well i'm not going to go through the style okay just you can

19
00:02:31,000 --> 00:02:40,199
check it here we have the div we have the level we have the input i i don't know if we saw this part

20
00:02:40,199 --> 00:02:47,000
like tab index one tab index two tab index three okay it's for uh working with the tab

21
00:02:47,000 --> 00:02:53,319
filling the the form with tabs okay you tap and you go to the next field

22
00:02:53,319 --> 00:03:03,560
okay so you can order the fields like the tab index um okay so today we are going to and and

23
00:03:03,560 --> 00:03:12,120
at the very end we have a reset button and a submit button okay so the uh form looks something

24
00:03:12,120 --> 00:03:27,800
like um like execute with chrome it's something like this okay uh first thing today we are going

25
00:03:27,800 --> 00:03:35,800
to work with the reset first thing okay remember what the reset did we had a reset button and when

26
00:03:35,800 --> 00:03:47,060
we wrote something but we didn't like what we had written we could click on cancel and and it's still

27
00:03:47,060 --> 00:04:00,840
wait and this is working this is already taking my javascript but uh if we didn't have a javascript

28
00:04:00,840 --> 00:04:10,439
uh it would do something like uh i write something i write something blah blah i have all my data

29
00:04:10,439 --> 00:04:19,079
introduced and then i i just click on cancel and it cleans everything without asking okay and that's

30
00:04:19,079 --> 00:04:29,319
really annoying sometimes okay i one of the things that you usually have in the forms is that if you

31
00:04:29,319 --> 00:04:38,839
click cancel you get and here you can see what js okay you get a window that says are you sure that

32
00:04:38,839 --> 00:04:50,230
you want to delete okay so something like this because i may have misunderstanding the cancel

33
00:04:50,230 --> 00:04:57,029
button okay so i want something like a this window saying are you sure that you want to reset all the

34
00:04:57,029 --> 00:05:04,949
information okay and if i say cancel it doesn't reset and if i say okay it resets it resets it

35
00:05:05,589 --> 00:05:15,589
okay how can we do this uh we are going to use i'm going to create a new uh what um i don't know

36
00:05:16,870 --> 00:05:24,230
here no we are going to do it from scratch i think i have this form and i'm going to create a

37
00:05:24,230 --> 00:05:33,110
in javascript wait this is examples you know here i'm going to create a new file that is

38
00:05:33,670 --> 00:05:50,550
a form not done dot yes and here i'm going to um i'm going to say form

39
00:05:50,550 --> 00:06:03,839
okay so I have the button here and it's called button council okay so I'm going to get the

40
00:06:03,839 --> 00:06:11,620
listener when the this button concept is clicked and I I'm going to tell the browser what to do

41
00:06:11,620 --> 00:06:23,860
right that's the idea so a I come here I'm going to close others save whatever

42
00:06:23,860 --> 00:06:28,959
and I'm going to open only these two so it's easier and here I'm going to say

43
00:06:28,959 --> 00:06:47,000
document, get element by ID, and here, what was the name of the element, button cancel,

44
00:06:55,879 --> 00:07:04,540
and I'm going to add an event listener that is going to be click, and when click, I'm

45
00:07:04,540 --> 00:07:17,180
to say a reset form i'm going to call the a function okay so now i'm going to define function

46
00:07:19,259 --> 00:07:34,459
function and the name is reset form and here i'm going to say something like

47
00:07:34,459 --> 00:07:43,220
I'm going to open a window remember that we had a window that was alert that but that only showed

48
00:07:43,220 --> 00:07:49,779
a message we have another window that is confirmed okay confirmed is it opens a window with two

49
00:07:49,779 --> 00:08:10,259
bottoms accept and cancel okay so uh are you sure that you want to reset all the data okay and now

50
00:08:10,259 --> 00:08:21,579
i have to say if okay i have to save sorry i have to save this into a variable let answer answer

51
00:08:21,579 --> 00:08:36,120
okay and if answer that means if answer is true okay i'm going to reset okay

52
00:08:36,120 --> 00:08:50,450
and so i'm going to get the element cancel and i'm going to

53
00:08:50,450 --> 00:09:07,419
reset not a the element that you want to format is not the button is the form okay so it is a reset

54
00:09:07,419 --> 00:09:24,450
but form here I have an ID form user and this is the element that I want to reset okay it's

55
00:09:24,450 --> 00:09:26,730
Not the bottom, but the whole form.

56
00:09:26,850 --> 00:09:27,450
I, sorry.

57
00:09:32,360 --> 00:09:32,860
Okay.

58
00:09:35,580 --> 00:09:38,159
Now I hope that it's going to work.

59
00:09:45,309 --> 00:09:47,490
We cancel and nothing happens.

60
00:09:47,570 --> 00:09:49,750
We say accept and it resets.

61
00:09:50,210 --> 00:09:50,830
Okay.

62
00:09:51,850 --> 00:09:52,509
We did it.

63
00:09:53,710 --> 00:09:58,850
Eh, if I take the event, let me see.

64
00:09:59,289 --> 00:10:06,129
If I take the prevent default, then let's see if that, that works.

65
00:10:06,129 --> 00:10:12,159
Because I think I, I think that Chrome is.

66
00:10:12,159 --> 00:10:19,100
Uh, no.

67
00:10:19,100 --> 00:10:38,509
Thank you. Well, even if I say cancel it, it, it.

68
00:10:38,509 --> 00:10:44,929
Uh, okay, so we need this sentence here. We need this code here.

69
00:10:44,929 --> 00:10:48,289
For it not to reset by itself.

70
00:10:48,289 --> 00:10:52,129
Okay, and.

71
00:10:53,090 --> 00:10:59,330
We are going to do the same with the buttons, with the submit button.

72
00:10:59,629 --> 00:11:00,169
Okay.

73
00:11:00,330 --> 00:11:07,070
If we want to check the, if we want to check the form with JavaScript, we first

74
00:11:07,070 --> 00:11:15,610
need to say that we want, we don't want to use the basic formatting that HTML does.

75
00:11:15,850 --> 00:11:16,149
Okay.

76
00:11:16,149 --> 00:11:25,980
So we are going to do something like, we're going to copy this and we are

77
00:11:25,980 --> 00:11:33,830
going to say instead of button cancel we are going to say button submit okay and when we

78
00:11:34,629 --> 00:11:41,110
when the button submit is clicked we are going to call a method that is validate validate

79
00:11:41,750 --> 00:11:51,110
okay and we are going to create a function validate okay i didn't explain this what's this

80
00:11:51,110 --> 00:12:05,629
If it can be, it can be, it was, it can be event. It can be the name that you want. It can be paper if you want. Okay. What's this? This is a, an argument that.

81
00:12:07,730 --> 00:12:13,730
A half all the methods that are called with the event listener.

82
00:12:13,730 --> 00:12:18,529
And it brings the information about the event that has been.

83
00:12:18,529 --> 00:12:24,289
Uh, that about the element that has has called the event.

84
00:12:24,289 --> 00:12:28,129
Okay, or about the event by itself.

85
00:12:28,129 --> 00:12:32,330
Okay, so it has information about.

86
00:12:32,330 --> 00:12:36,769
If, like, the button that has been pressed.

87
00:12:36,769 --> 00:12:42,470
Uh, well, it doesn't it doesn't have much here because, like, the bottom here.

88
00:12:42,470 --> 00:12:58,009
It's not really interesting. Okay, but it has information. For example, if the event is a, an event of the mouse, it has information about, uh, which button has been clicked if the right button or left button or.

89
00:12:58,009 --> 00:13:11,250
Like, uh, information about if it's been a double click or things like that. Okay. So we'll be working with this. Remember that you can add it or not to any methods that you have.

90
00:13:11,250 --> 00:13:15,370
Uh, being, uh, that you have called with an event.

91
00:13:15,370 --> 00:13:19,129
Okay, okay, so we validate.

92
00:13:19,129 --> 00:13:24,570
We are going to say also.

93
00:13:24,570 --> 00:13:30,870
That we want to prevent default. Okay. So it's not going to send.

94
00:13:30,870 --> 00:13:36,990
It's not going to send my form until I send it by with the code.

95
00:13:36,990 --> 00:13:43,059
Okay, um.

96
00:13:43,059 --> 00:13:47,559
So, I think this is enough for today. You can finish.

97
00:13:47,559 --> 00:13:50,559
The example at home.

98
00:13:50,559 --> 00:14:03,519
Okay, you can finish.