1
00:00:00,140 --> 00:00:01,200
Hey, welcome back.

2
00:00:01,220 --> 00:00:05,210
In this video, we will implement the submit button.

3
00:00:05,210 --> 00:00:11,840
So currently, if the user fills in the entries here, the form and they press submit, nothing happens.

4
00:00:11,840 --> 00:00:15,440
So how can we implement this button?

5
00:00:15,650 --> 00:00:24,020
Well, to do that, you first need to understand what actually is the user trying to do here technically

6
00:00:24,020 --> 00:00:25,570
when they press submit.

7
00:00:25,580 --> 00:00:31,010
So for that we need to talk about HTTP requests again.

8
00:00:31,460 --> 00:00:38,810
So when the user loads a URL, they are doing a get request because they are getting some data, they

9
00:00:38,810 --> 00:00:41,810
are getting those data on their browsers.

10
00:00:41,810 --> 00:00:43,700
So that is a get request.

11
00:00:43,700 --> 00:00:47,510
They are not sending their data to the server.

12
00:00:47,510 --> 00:00:53,030
So our server has the files, the python files, the HTML files, right.

13
00:00:53,060 --> 00:00:58,180
And so the user is requesting the index.html file from us.

14
00:00:58,190 --> 00:01:05,550
That is a get request, but, but when the user presses a submit button that is a post request because

15
00:01:05,550 --> 00:01:09,780
they are trying to post some data to our server.

16
00:01:09,780 --> 00:01:15,390
So these data will be sent to the app.py file.

17
00:01:15,390 --> 00:01:24,000
We're going to get those data as strings here or other Python data types and then store those values

18
00:01:24,000 --> 00:01:27,210
in a database and also send them by email.

19
00:01:27,860 --> 00:01:34,730
The place we should start is the index.html template.

20
00:01:35,850 --> 00:01:43,390
And we should locate the form tag, which is somewhere in here.

21
00:01:43,410 --> 00:01:48,810
So you see the body tags, you have div tags, H1, and then you have the form.

22
00:01:49,110 --> 00:01:54,900
Now this form currently does not support a post http request.

23
00:01:54,900 --> 00:02:02,640
So to be able for the form to support a post request, you should add a method attribute and that should

24
00:02:02,640 --> 00:02:07,560
be equal to the post string so with quotes.

25
00:02:07,710 --> 00:02:08,460
Right.

26
00:02:10,660 --> 00:02:14,380
That's all we need to do in the HTML template for now.

27
00:02:14,740 --> 00:02:17,620
Now we need to work on the python code.

28
00:02:17,620 --> 00:02:28,230
So in here, specifically inside the index function because we're still working on the home page, right?

29
00:02:28,240 --> 00:02:34,000
This is the URL of your website and that URL contains this form.

30
00:02:34,000 --> 00:02:37,300
So we should work on this index function.

31
00:02:37,450 --> 00:02:46,210
Now, currently the index function also only handles get requests if you want this index function to

32
00:02:46,210 --> 00:02:48,010
also handle post requests.

33
00:02:48,010 --> 00:02:52,060
Because in this page there are two types of requests happening, right?

34
00:02:52,060 --> 00:02:57,520
So a get request when the page is loaded and a post request when the submit button is pressed.

35
00:02:57,550 --> 00:03:05,740
Therefore, in the root methods here of the decorator, you should add another argument called methods

36
00:03:06,040 --> 00:03:08,110
and that will be equal to a list.

37
00:03:08,110 --> 00:03:16,250
And this list will contain two strings one get string and one post string.

38
00:03:16,460 --> 00:03:26,540
So with that we specify that this URL now will be able to handle both get requests and also post requests.

39
00:03:26,540 --> 00:03:35,240
And then in the function we write a conditional, we'll say we say if request dot method is equal to

40
00:03:35,270 --> 00:03:39,290
post, so a conditional we do something.

41
00:03:39,290 --> 00:03:41,540
But first let's import requests.

42
00:03:41,720 --> 00:03:44,780
You can hover your mouse here and go to import this name.

43
00:03:45,270 --> 00:03:47,910
And you want to go to flask requests.

44
00:03:47,910 --> 00:03:52,830
So that should import should add this in your import statements.

45
00:03:52,830 --> 00:03:56,220
So comma requests.

46
00:03:56,220 --> 00:03:58,370
So this comes from flask.

47
00:03:58,380 --> 00:04:00,960
Don't confuse this with the requests library.

48
00:04:00,960 --> 00:04:08,550
So this is an object that is able to handle requests in your flask app.

49
00:04:08,550 --> 00:04:12,480
So you say if request dot method is post.

50
00:04:12,480 --> 00:04:20,250
So a method is now a property which will contain either a get string or a post string, depending on

51
00:04:20,250 --> 00:04:25,230
whether the user is simply loading this page as so right.

52
00:04:25,230 --> 00:04:28,080
When they load the page using the URL.

53
00:04:28,170 --> 00:04:35,700
In that case methods will be equal to get, but when they press that submit button which was somewhere

54
00:04:35,700 --> 00:04:39,600
here, then method will be equal to post the string post.

55
00:04:39,600 --> 00:04:42,450
So that's how we control.

56
00:04:42,450 --> 00:04:49,930
We know what's happening on the web page because you know, this web app that we're building will be

57
00:04:49,930 --> 00:04:53,200
able to handle multiple visitors, right?

58
00:04:53,200 --> 00:05:00,400
So if someone in India is visiting the the Web page, they may be doing a get request at a given time

59
00:05:00,400 --> 00:05:06,310
and someone in the USA might be pressing the submit button also at the same time.

60
00:05:06,310 --> 00:05:11,770
So the app is able to handle those two users separately.

61
00:05:12,010 --> 00:05:20,260
And then in here, if the request is post, then we get the first name in a variable first name using

62
00:05:20,260 --> 00:05:26,770
request dot form and we get the first name here.

63
00:05:26,800 --> 00:05:28,450
What is this?

64
00:05:28,480 --> 00:05:33,070
This is the name of the input.

65
00:05:33,890 --> 00:05:34,760
Widget.

66
00:05:34,760 --> 00:05:38,000
So, for example, we have this first.

67
00:05:38,560 --> 00:05:43,160
Widgets, which is created by this input element.

68
00:05:43,180 --> 00:05:48,130
So that creates the first text box where the user inputs their name.

69
00:05:48,130 --> 00:05:56,030
And this input element has first name as the value of its name attributes.

70
00:05:56,050 --> 00:05:56,650
Right.

71
00:05:56,680 --> 00:06:01,250
So this is the first name that we're using here.

72
00:06:01,270 --> 00:06:07,480
So that will allow us to actually get the value of first name from the form.

73
00:06:07,480 --> 00:06:09,060
So let's try that out.

74
00:06:09,070 --> 00:06:14,260
Let's print it out for now just to see if we are good so far.

75
00:06:14,740 --> 00:06:17,650
So with that, I'll run the app.

76
00:06:20,260 --> 00:06:21,190
Reload.

77
00:06:23,770 --> 00:06:25,240
Fill in the data.

78
00:06:30,830 --> 00:06:32,030
And submit.

79
00:06:32,660 --> 00:06:35,030
Now, again, nothing will happen, right?

80
00:06:35,060 --> 00:06:41,750
We will not see anything here because we are not handling what will be displayed after the submit button.

81
00:06:41,750 --> 00:06:48,500
But we should be able to get the first name or in this case, printed out.

82
00:06:48,530 --> 00:06:50,820
It should be displayed somewhere here.

83
00:06:50,840 --> 00:06:51,920
If not.

84
00:06:52,850 --> 00:06:55,700
That means this was not executed.

85
00:06:55,700 --> 00:07:01,730
So this line was not executed, as is the case in my computer.

86
00:07:01,730 --> 00:07:12,230
So this was not executed because probably this was not evaluated to true because probably the methods

87
00:07:12,230 --> 00:07:21,170
was not equal to post, but to prove that we first want to print out before the F conditional block.

88
00:07:21,170 --> 00:07:28,370
We want to print out the request that methods property rights and then reload the page.

89
00:07:28,370 --> 00:07:33,470
So reload it first as that you see here.

90
00:07:33,470 --> 00:07:36,050
Now we get a get request, right?

91
00:07:36,050 --> 00:07:38,510
Because it was actually a get request.

92
00:07:38,510 --> 00:07:41,690
But now let me fill in the data again.

93
00:07:46,160 --> 00:07:47,560
And press submit.

94
00:07:47,570 --> 00:07:50,030
And let's see what we've got this time.

95
00:07:51,340 --> 00:08:00,790
So we got no new output here because no request is happening, no get request, no post request.

96
00:08:00,820 --> 00:08:03,580
That means there's an issue with the button.

97
00:08:04,120 --> 00:08:06,700
So if you go to index.html.

98
00:08:07,550 --> 00:08:10,910
And you find you locate your button element.

99
00:08:10,940 --> 00:08:14,240
Now, this button should be typesubmit.

100
00:08:14,750 --> 00:08:18,980
However, mistakenly, we have put this as a button.

101
00:08:19,190 --> 00:08:24,680
So you should replace the type of the button to a submit button.

102
00:08:24,680 --> 00:08:25,310
Right.

103
00:08:26,390 --> 00:08:27,980
Then go to the web page.

104
00:08:28,100 --> 00:08:28,940
Reload.

105
00:08:28,970 --> 00:08:30,500
Fill in the data again.

106
00:08:35,150 --> 00:08:36,380
Press submit.

107
00:08:37,220 --> 00:08:38,870
Go to flask.

108
00:08:38,870 --> 00:08:43,970
And yeah, this time we got a post request.

109
00:08:43,970 --> 00:08:52,940
So Post was printed out by this line here and then it was printed out by this line in here, the first

110
00:08:52,940 --> 00:08:53,570
name.

111
00:08:53,660 --> 00:08:55,970
So now it is working.

112
00:08:55,970 --> 00:09:01,820
So let me remove that first print function, this one as well.

113
00:09:01,820 --> 00:09:04,040
And so I'll duplicate this.

114
00:09:04,850 --> 00:09:07,160
So this will be last name.

115
00:09:08,090 --> 00:09:09,920
Last name.

116
00:09:11,060 --> 00:09:15,560
Then we have the email address, email.

117
00:09:15,560 --> 00:09:21,140
So make sure that these correspond to let me split this to the right.

118
00:09:21,170 --> 00:09:23,960
They should correspond to the names.

119
00:09:26,350 --> 00:09:28,440
Of the input elements.

120
00:09:31,330 --> 00:09:36,370
So last name email.

121
00:09:36,400 --> 00:09:42,730
Then we have the date, date, date.

122
00:09:43,720 --> 00:09:46,150
And then lastly, we have the occupation.

123
00:09:49,230 --> 00:09:51,720
And the name for that is.

124
00:09:52,540 --> 00:09:54,190
Also occupation.

125
00:09:54,580 --> 00:09:57,870
So all the radio buttons share the same name.

126
00:09:57,880 --> 00:10:01,420
Occupation that allows them to be grouped together.

127
00:10:01,420 --> 00:10:03,910
And that name should also be used here.

128
00:10:05,620 --> 00:10:10,960
So that's how you get the values that the user inputs in the web page.

129
00:10:11,530 --> 00:10:20,380
And so before we finish this lecture, let's make sure that we correctly got the values of these four

130
00:10:20,380 --> 00:10:21,580
variables.

131
00:10:21,700 --> 00:10:28,900
To do that, again, you can either print out all of these using a print function where you place first

132
00:10:28,900 --> 00:10:32,130
name, comma, last name, comma, email, etcetera.

133
00:10:32,140 --> 00:10:34,060
Or you can use debugging.

134
00:10:34,270 --> 00:10:35,950
Let's use debugging.

135
00:10:35,950 --> 00:10:42,130
So for that you need to place a breakpoint after these values.

136
00:10:42,130 --> 00:10:49,600
So if you want to know the values of these variables, you want to place the breakpoint in the next

137
00:10:49,630 --> 00:10:53,050
non-empty line, which is this one in here.

138
00:10:53,050 --> 00:10:58,870
So put your cursor there and then you don't want to run the app or rerun it.

139
00:10:58,870 --> 00:11:05,500
You want to press the debug button or right click and go to debug app.

140
00:11:07,940 --> 00:11:15,850
Then you want to go to the Web page, reload that and PyCharm will take you back here.

141
00:11:15,860 --> 00:11:20,150
But you want to go back to the page, fill in those data.

142
00:11:24,440 --> 00:11:28,220
Press submit and then pi charm will take you back here again.

143
00:11:28,220 --> 00:11:31,610
But this time you'll see these values here.

144
00:11:31,610 --> 00:11:33,650
So the variables, right?

145
00:11:34,750 --> 00:11:37,180
So in here we can see the date.

146
00:11:37,180 --> 00:11:39,820
So the date variable is a string.

147
00:11:39,820 --> 00:11:42,850
So that's the date that the user entered the email address.

148
00:11:42,850 --> 00:11:48,520
A string you see str str, the first name, last name and occupation.

149
00:11:48,520 --> 00:11:51,430
Now with occupation, we have a problem.

150
00:11:51,460 --> 00:11:59,980
This is simply saying that the radio one of the radio buttons was pressed, but we don't get the actual

151
00:11:59,980 --> 00:12:04,210
value of the pressed of the selected radio button.

152
00:12:04,210 --> 00:12:05,740
So let's fix that.

153
00:12:05,770 --> 00:12:15,040
To fix this issue, we need to add a value attribute to each of the radio buttons, because otherwise

154
00:12:15,040 --> 00:12:17,710
we will get this on string.

155
00:12:17,710 --> 00:12:21,730
So by default the value of the selected button is on.

156
00:12:21,730 --> 00:12:25,150
But if you add here.

157
00:12:25,150 --> 00:12:27,010
So let's go to the first.

158
00:12:30,830 --> 00:12:38,090
Radiobutton, which is the employed option and adds a value of.

159
00:12:41,210 --> 00:12:42,440
Employed.

160
00:12:43,820 --> 00:12:48,260
We need to add a value for the other radio buttons as well.

161
00:12:48,260 --> 00:12:50,180
So this is unemployed.

162
00:12:53,060 --> 00:12:59,630
Make a space there between the value and the required property.

163
00:12:59,960 --> 00:13:01,070
Same for this.

164
00:13:01,070 --> 00:13:07,070
Value is equal to self dash employed.

165
00:13:07,820 --> 00:13:13,880
And lastly, value is equal to student.

166
00:13:14,120 --> 00:13:14,810
Good.

167
00:13:14,840 --> 00:13:20,690
Now let's stop this debugging process and start it again.

168
00:13:20,690 --> 00:13:22,720
So make sure that the.is here.

169
00:13:22,730 --> 00:13:24,680
Start the debugging again.

170
00:13:27,170 --> 00:13:28,730
Reload the page.

171
00:13:30,940 --> 00:13:37,330
Now, if you get this empty section here, which is saying variables are not available, you should

172
00:13:37,360 --> 00:13:42,900
put your cursor in the line where your breakpoint is and press this button here.

173
00:13:42,910 --> 00:13:44,110
Run to cursor.

174
00:13:44,410 --> 00:13:50,260
Press it once and press it twice three times until you see this connected here.

175
00:13:50,290 --> 00:13:54,090
Then go to the web page and you should see the website again.

176
00:13:54,100 --> 00:13:56,290
So again, you can fill it in.

177
00:13:57,380 --> 00:13:58,580
With data.

178
00:14:00,310 --> 00:14:02,560
Click one of the options, press submit.

179
00:14:02,560 --> 00:14:07,120
And now we should see the occupation as unemployed.

180
00:14:07,120 --> 00:14:11,320
So that reflects our choice here in the radio group.

181
00:14:11,730 --> 00:14:19,620
So that's how you can get the data from your python form, from your flask form and access them from

182
00:14:19,620 --> 00:14:21,030
your python scripts.

183
00:14:21,030 --> 00:14:27,150
Here in the next videos, we will get this data, store them in a database and then also send them by

184
00:14:27,150 --> 00:14:29,340
email to the user's email address.

185
00:14:29,340 --> 00:14:30,360
So see you later.