1
00:00:04,140 --> 00:00:11,760
So this lesson, we're going to be creating a simulation app where we're using the form data and we're

2
00:00:11,760 --> 00:00:18,390
going to be showing you how you can do it both within a get method as well as opposed to the server.

3
00:00:18,690 --> 00:00:24,740
And then when the server is just responding back with a JSON version of the content that we've submitted.

4
00:00:25,020 --> 00:00:29,400
So in this case, we're doing a post method and we're also going to be showing you and demonstrating,

5
00:00:29,400 --> 00:00:33,600
doing a get method, using the form data that's available within the.

6
00:00:34,580 --> 00:00:41,210
Webpage this lesson, we're going to be making some updates to what we did in the last lesson, updating

7
00:00:41,210 --> 00:00:46,550
the content to have a form and then the input fields are going to be placed within the form.

8
00:00:46,850 --> 00:00:49,370
So make some updates to the structure.

9
00:00:49,640 --> 00:00:59,330
And instead of having a output, we're going to update the output and we can call this the my form and

10
00:00:59,330 --> 00:01:03,050
using document and create elements.

11
00:01:03,050 --> 00:01:06,020
And the element that we're creating is going to be the form.

12
00:01:08,160 --> 00:01:20,010
And then within the form, so first let's add the form to the page, so using the document body and

13
00:01:20,010 --> 00:01:30,840
we're just going to pen the form to the body of the page and add in the elements into the my form so

14
00:01:30,900 --> 00:01:33,790
that all of the inputs are going to get moved into the my form.

15
00:01:35,760 --> 00:01:37,130
So we'll add the button

16
00:01:39,690 --> 00:01:42,990
and also where we create the elements.

17
00:01:45,320 --> 00:01:54,290
We're going to attend the elements and then also attend the initial input field all into my form, so

18
00:01:54,290 --> 00:01:55,920
we're changing the structure.

19
00:01:56,690 --> 00:02:01,730
Let's go take a quick look at our source code just to make sure that everything is contained within

20
00:02:01,730 --> 00:02:02,200
the form.

21
00:02:04,370 --> 00:02:10,070
And so now the button can serve as a submit button for the form it.

22
00:02:10,070 --> 00:02:16,220
Actually, let's just before we continue, let's rename this and I'm going to rename this to called

23
00:02:16,220 --> 00:02:20,690
for so that we have a different source file that we're working off, which is going to be different

24
00:02:20,690 --> 00:02:22,350
than the original project.

25
00:02:23,570 --> 00:02:29,810
So once you've confirmed that you've got all of the content of the form, you can use the form object

26
00:02:29,810 --> 00:02:35,510
content and output it as your URL search parameter.

27
00:02:35,570 --> 00:02:40,260
So this is going to simulate the same thing that we do when we submit the form.

28
00:02:40,490 --> 00:02:47,300
So if you have a form and you do a submit on it, it's going to automatically generate the you rl that

29
00:02:47,300 --> 00:02:48,610
it's submitting to the server.

30
00:02:48,830 --> 00:02:51,400
So we want to send this via the fetch request.

31
00:02:51,620 --> 00:02:55,740
So we need to simulate that and build that before we can send it over.

32
00:02:57,320 --> 00:03:05,300
So when we do click the button, we're loading the data and this is where it's going to be different

33
00:03:05,300 --> 00:03:08,450
because the base URL is still going to be the same.

34
00:03:08,630 --> 00:03:14,330
But we're going to generate the rest of the search parameters and we're going to do this dynamically

35
00:03:15,320 --> 00:03:16,850
with JavaScript code.

36
00:03:17,970 --> 00:03:24,130
So we've got our base, your URL, and we want append to it and get all of the values from the form.

37
00:03:25,220 --> 00:03:28,360
So we're still going to have to loop through all of the input fields.

38
00:03:28,670 --> 00:03:34,600
So I'm going to add and I'm going to keep some of this here and the construction is going to be different.

39
00:03:34,760 --> 00:03:36,530
So let me update that.

40
00:03:36,800 --> 00:03:40,280
And setting up we're going to create first define that.

41
00:03:40,520 --> 00:03:42,110
We're going to have a new form object.

42
00:03:43,190 --> 00:03:46,490
So let's create the form data object.

43
00:03:46,970 --> 00:03:51,950
And with JavaScript, that's done using the new form data.

44
00:03:53,180 --> 00:03:56,350
So it's going to generate the empty form data.

45
00:03:56,960 --> 00:04:03,790
And then if you want to append to it, we can spend it with in key value pairs format.

46
00:04:04,790 --> 00:04:12,170
So that would be that if we select the form data and we want to attend to the form data.

47
00:04:12,860 --> 00:04:20,780
So if we have a value of ID and we want to set the value of it to be 99, that way we can append to

48
00:04:20,780 --> 00:04:22,040
the form data.

49
00:04:23,390 --> 00:04:30,350
Now, most of the time you are going to be using the put the post method instead of using the get method

50
00:04:30,350 --> 00:04:31,430
and this type of format.

51
00:04:31,640 --> 00:04:37,970
But this is just in case you do want to use the get method, it's going to be that similar format where

52
00:04:37,970 --> 00:04:39,770
you're constructing the form data.

53
00:04:42,080 --> 00:04:50,360
And then we could loop through and as we loop through each one of the elements, we would be returning

54
00:04:50,360 --> 00:04:59,510
back the element name and then associating that element value to the object, sort of building the entire

55
00:04:59,510 --> 00:05:06,140
form object dynamically and as well as using the query selector.

56
00:05:07,960 --> 00:05:09,880
You can also select the.

57
00:05:13,680 --> 00:05:14,440
Form data.

58
00:05:14,460 --> 00:05:21,990
So when we're directly creating the form data, we already have the form object within my form so we

59
00:05:21,990 --> 00:05:26,790
can specify the object that we want to have the form content to.

60
00:05:30,060 --> 00:05:31,200
And over here.

61
00:05:33,820 --> 00:05:42,220
What we can do is as well, we can take the form data and we can get the entries from that object,

62
00:05:43,840 --> 00:05:51,980
so I'll block comment about this content or go back into the console and do a click.

63
00:05:54,400 --> 00:06:01,380
So also, we want to prevent the default action of submitting the actual form.

64
00:06:02,950 --> 00:06:09,670
So we'll get the event object and e prevent.

65
00:06:12,330 --> 00:06:20,220
Default so will prevent any of the default actions on submitting the form, so we've got the iterator

66
00:06:20,220 --> 00:06:20,760
here.

67
00:06:26,230 --> 00:06:32,980
And if we want to get all of the form data, we use the three dots and that will output all of the form

68
00:06:32,980 --> 00:06:33,430
data.

69
00:06:36,260 --> 00:06:38,000
Using the form data entries.

70
00:06:41,950 --> 00:06:44,000
And structure them within a data object.

71
00:06:45,370 --> 00:06:53,560
So let's add in a value for data, and this can be an array since this array of object and using the

72
00:06:53,560 --> 00:07:03,070
form data entries and let's log out data as it's going to be data that we're going to send in and then

73
00:07:03,070 --> 00:07:05,670
we're going to reconstruct this data object.

74
00:07:08,020 --> 00:07:12,820
So we're going to use the URAI component and code.

75
00:07:13,010 --> 00:07:19,090
You are a component and let's create another object called parameters.

76
00:07:19,960 --> 00:07:27,460
And then taking the data object using map and map is an array method.

77
00:07:28,900 --> 00:07:40,900
So we can return back the contents and map it back, so using X as our object value and let's return

78
00:07:40,900 --> 00:07:53,080
back using map the contents of the array and then we can output that content into the console as well.

79
00:07:53,110 --> 00:07:57,070
So what we're doing is worse or worse, constructing their request.

80
00:07:57,280 --> 00:07:58,840
You the string object.

81
00:08:01,980 --> 00:08:04,980
So doing this weekend in ENCODE.

82
00:08:06,800 --> 00:08:09,410
So we can also just return back X.

83
00:08:11,490 --> 00:08:13,020
The first item within X.

84
00:08:17,330 --> 00:08:24,710
And equal signed and do X one, but we should also do the encoding into it.

85
00:08:24,740 --> 00:08:27,830
So let's try this first and see what we've got.

86
00:08:29,600 --> 00:08:32,240
And just as we did before with the joint.

87
00:08:36,460 --> 00:08:44,860
We could join the response data back together and you can shorten this by having just one.

88
00:08:46,300 --> 00:08:54,850
By chaining them together, so getting parameters and then using join and the and sign, so that will

89
00:08:54,850 --> 00:08:55,730
join it together.

90
00:08:57,310 --> 00:09:01,960
So this is going to be so far the response on request object that we're constructing.

91
00:09:03,130 --> 00:09:06,070
So we've got the request object almost completed.

92
00:09:09,980 --> 00:09:16,310
And just to be sure that it passes properly within their request object, we can use the encoding,

93
00:09:16,310 --> 00:09:22,220
the UI and code, you are a component option, so let's add that in.

94
00:09:22,520 --> 00:09:26,120
So using and code, you are a component.

95
00:09:27,050 --> 00:09:33,620
So this encode set within that, you are a format and that actually should be lowercase.

96
00:09:37,040 --> 00:09:45,530
So this is just in case we've got some odd characters that aren't going to encode properly, and that's

97
00:09:45,530 --> 00:09:48,160
actually a component component.

98
00:09:49,410 --> 00:09:53,300
And I'm going to do the same for the other value as well.

99
00:09:57,680 --> 00:10:03,740
So this instead of having the spaces, it does the percentage sign 20 and so this can still get red

100
00:10:03,740 --> 00:10:11,540
on the server, but this is a way of handling spaces and so that within your request, you, Earl,

101
00:10:11,720 --> 00:10:12,980
you don't have any spaces.

102
00:10:14,450 --> 00:10:22,730
So now that we've constructed that next step is to create the you are also we've got the base, your

103
00:10:22,730 --> 00:10:29,390
URL and add to it our response object.

104
00:10:33,220 --> 00:10:40,150
And then finally, let's lastly, let's do the get you Earl, and save that.

105
00:10:44,360 --> 00:10:48,200
And we've got the output here at the top, so that's what's adding it to the top.

106
00:10:48,440 --> 00:10:53,870
So it's making the full trip to the server and returning back the content.

107
00:10:56,650 --> 00:11:03,930
So we can also update this, and I actually what I do is I like to log it out into the console or just

108
00:11:03,940 --> 00:11:09,460
out in the console message there so we can update this to a post method as well.

109
00:11:10,180 --> 00:11:13,120
Let's make some updates to it will create a new function.

110
00:11:13,930 --> 00:11:16,380
And this one can be you get post.

111
00:11:17,560 --> 00:11:22,950
And what this will do is this will get the post data and do the request.

112
00:11:23,200 --> 00:11:28,530
So we need to pick up the data first and start a load data.

113
00:11:29,200 --> 00:11:31,180
It'll go directly to get post.

114
00:11:33,750 --> 00:11:36,330
So we'll remove out the load data.

115
00:11:38,180 --> 00:11:41,090
And we can get all of the form contents dynamically.

116
00:11:41,510 --> 00:11:47,210
So, first off, let's prevent the default action of submitting the form so the form is not going to

117
00:11:47,210 --> 00:11:47,870
get submitted.

118
00:11:48,230 --> 00:11:55,400
And then we want to build out all of the foreign data as well so we can make the request.

119
00:11:56,840 --> 00:12:03,320
And also, let's set up a variable for options and we'll make the fetch request with the options.

120
00:12:04,640 --> 00:12:05,960
So the options itself.

121
00:12:06,380 --> 00:12:07,910
This is the fetch options.

122
00:12:08,210 --> 00:12:09,950
So set that up as an object.

123
00:12:10,610 --> 00:12:16,880
So setting the method that we want to use and we want to use post as the method and within the body

124
00:12:17,390 --> 00:12:18,910
of the options.

125
00:12:19,310 --> 00:12:23,730
So within the body object, this is where we're going to actually send the form data.

126
00:12:24,020 --> 00:12:31,120
So using JSON String Afie, we're going to string a fly the body object.

127
00:12:31,580 --> 00:12:44,240
So let's create the body object and using creating a brand new form data object, doing a new form data

128
00:12:45,170 --> 00:12:51,710
and selecting the life form as the source for the data and just as we did with the get request.

129
00:12:54,840 --> 00:13:03,330
And in this case, we want to construct a body object, so let's create our body object and this is

130
00:13:03,330 --> 00:13:06,690
where we're going to deposit and append to it.

131
00:13:09,720 --> 00:13:12,660
So as we loop through the form data.

132
00:13:14,950 --> 00:13:20,470
And for each one of the items within the form data, so it's capturing all the contents of the form.

133
00:13:21,700 --> 00:13:30,010
Let's get a value and a key that's being returned back within the function and for the values and keys

134
00:13:31,750 --> 00:13:39,280
taking the body and using the bracket notation, we're setting the same key and then also assigning

135
00:13:39,280 --> 00:13:40,300
a value to it.

136
00:13:40,660 --> 00:13:46,650
So basically we're recreating the form, but we're constructing it and adding it to the body object.

137
00:13:46,840 --> 00:13:53,890
So this is going to return back a jigsaw and formatted body object, and that's what we're going to

138
00:13:53,890 --> 00:13:57,180
be submitting ultimately to the fetch request.

139
00:13:57,850 --> 00:14:00,300
So let's see what that looks like and do the request.

140
00:14:00,670 --> 00:14:10,770
So there's our JSON or JavaScript object thinner JSON format that we're ready to submit.

141
00:14:10,780 --> 00:14:14,280
And when we string a fight, this turns it into one big string object.

142
00:14:14,800 --> 00:14:16,640
So let's create the fetch request.

143
00:14:17,350 --> 00:14:27,150
So using the base you URL and the options that we've just set up make the request.

144
00:14:28,570 --> 00:14:35,110
So when we get back the response from the server, the response is going to be authentic JSON format

145
00:14:36,040 --> 00:14:42,580
and then we can take the response contents and put it to the page.

146
00:14:42,610 --> 00:14:46,300
So for now, we'll get out using that console log of data.

147
00:14:50,270 --> 00:14:56,030
So this object, and it's identical to the one that we just sent and this is just coming from the server,

148
00:14:56,030 --> 00:15:00,820
so it's a server response to the content from the input field.

149
00:15:01,250 --> 00:15:06,440
So there's a lot of information that you can set up with the fetch request.

150
00:15:06,710 --> 00:15:15,170
So you can also add headers and some server end points require different headers credentials so all

151
00:15:15,170 --> 00:15:16,420
of this can be contained.

152
00:15:16,910 --> 00:15:21,470
So some of them are a lot more complex, but they've got the body, they've got the method, but then

153
00:15:21,470 --> 00:15:22,910
they can also set the course.

154
00:15:23,480 --> 00:15:30,740
You can do cache, credentials, headers, setting the different content types redirects reference policies.

155
00:15:30,980 --> 00:15:33,610
So it depends on what type of data you're getting back.

156
00:15:33,860 --> 00:15:39,140
There's a lot of options that you can add in for the options on a post.

157
00:15:40,710 --> 00:15:47,820
And again, this is dependent on what you're expecting from the server, so also with the content from

158
00:15:47,820 --> 00:15:50,820
the input field, you can construct the JSON object.

159
00:15:51,090 --> 00:15:56,310
And there's also some other examples on the Mozilla developer network where they're looping through

160
00:15:56,310 --> 00:16:02,220
and they're appending to the form data manually where they're building up the form data object.

161
00:16:05,430 --> 00:16:11,280
And there's even more options there for the headers and how you can set the headers, so in order to

162
00:16:11,280 --> 00:16:15,930
add headers, you can construct new headers.

163
00:16:16,170 --> 00:16:25,560
So just my headers and then you would add the headers object into the options like that, and I'll see

164
00:16:25,560 --> 00:16:26,430
if it still works.

165
00:16:26,790 --> 00:16:29,430
So it still works because we haven't added any headers.

166
00:16:29,640 --> 00:16:34,470
And if we do add some of the headers, it could throw off our request.

167
00:16:34,710 --> 00:16:37,170
So it doesn't always help to add in headers.

168
00:16:37,620 --> 00:16:41,760
So you've got to make sure what type of headers your endpoint is expecting.

169
00:16:42,180 --> 00:16:43,330
That's what you're able to add in.

170
00:16:44,280 --> 00:16:49,130
So once we've made the request, let's output the object data.

171
00:16:50,250 --> 00:16:57,510
So just as we did before where we got the data being returned back and this time we're doing a post

172
00:16:57,510 --> 00:17:00,150
request to the get request.

173
00:17:00,750 --> 00:17:04,770
So we click it and we're populating the content on the page.

174
00:17:06,930 --> 00:17:14,340
The tasks and challenges for this lesson is to use the form data, so using JavaScript form data to

175
00:17:14,340 --> 00:17:21,000
get the contents of the form, reconstruct your page, object to be contained within a form, and then

176
00:17:21,000 --> 00:17:28,680
select all of the fields within the form using JavaScript, using the get method, make fetch request,

177
00:17:28,680 --> 00:17:35,430
sending the data over to the server, using get and then also try the sending over the data from the

178
00:17:35,430 --> 00:17:43,650
form using the post method and also update the page contents with the server response JSON object that

179
00:17:43,650 --> 00:17:48,630
is returned back whenever you do any types of sending of the content over.

180
00:17:48,720 --> 00:17:52,940
So either the cat or the post and output the contents on the page.