Hey, welcome back.
In this video, we will implement the submit button.
So currently, if the user fills in the entries here, the form and they press submit, nothing happens.
So how can we implement this button?
Well, to do that, you first need to understand what actually is the user trying to do here technically
when they press submit.
So for that we need to talk about HTTP requests again.
So when the user loads a URL, they are doing a get request because they are getting some data, they
are getting those data on their browsers.
So that is a get request.
They are not sending their data to the server.
So our server has the files, the python files, the HTML files, right.
And so the user is requesting the index.html file from us.
That is a get request, but, but when the user presses a submit button that is a post request because
they are trying to post some data to our server.
So these data will be sent to the app.py file.
We're going to get those data as strings here or other Python data types and then store those values
in a database and also send them by email.
The place we should start is the index.html template.
And we should locate the form tag, which is somewhere in here.
So you see the body tags, you have div tags, H1, and then you have the form.
Now this form currently does not support a post http request.
So to be able for the form to support a post request, you should add a method attribute and that should
be equal to the post string so with quotes.
Right.
That's all we need to do in the HTML template for now.
Now we need to work on the python code.
So in here, specifically inside the index function because we're still working on the home page, right?
This is the URL of your website and that URL contains this form.
So we should work on this index function.
Now, currently the index function also only handles get requests if you want this index function to
also handle post requests.
Because in this page there are two types of requests happening, right?
So a get request when the page is loaded and a post request when the submit button is pressed.
Therefore, in the root methods here of the decorator, you should add another argument called methods
and that will be equal to a list.
And this list will contain two strings one get string and one post string.
So with that we specify that this URL now will be able to handle both get requests and also post requests.
And then in the function we write a conditional, we'll say we say if request dot method is equal to
post, so a conditional we do something.
But first let's import requests.
You can hover your mouse here and go to import this name.
And you want to go to flask requests.
So that should import should add this in your import statements.
So comma requests.
So this comes from flask.
Don't confuse this with the requests library.
So this is an object that is able to handle requests in your flask app.
So you say if request dot method is post.
So a method is now a property which will contain either a get string or a post string, depending on
whether the user is simply loading this page as so right.
When they load the page using the URL.
In that case methods will be equal to get, but when they press that submit button which was somewhere
here, then method will be equal to post the string post.
So that's how we control.
We know what's happening on the web page because you know, this web app that we're building will be
able to handle multiple visitors, right?
So if someone in India is visiting the the Web page, they may be doing a get request at a given time
and someone in the USA might be pressing the submit button also at the same time.
So the app is able to handle those two users separately.
And then in here, if the request is post, then we get the first name in a variable first name using
request dot form and we get the first name here.
What is this?
This is the name of the input.
Widget.
So, for example, we have this first.
Widgets, which is created by this input element.
So that creates the first text box where the user inputs their name.
And this input element has first name as the value of its name attributes.
Right.
So this is the first name that we're using here.
So that will allow us to actually get the value of first name from the form.
So let's try that out.
Let's print it out for now just to see if we are good so far.
So with that, I'll run the app.
Reload.
Fill in the data.
And submit.
Now, again, nothing will happen, right?
We will not see anything here because we are not handling what will be displayed after the submit button.
But we should be able to get the first name or in this case, printed out.
It should be displayed somewhere here.
If not.
That means this was not executed.
So this line was not executed, as is the case in my computer.
So this was not executed because probably this was not evaluated to true because probably the methods
was not equal to post, but to prove that we first want to print out before the F conditional block.
We want to print out the request that methods property rights and then reload the page.
So reload it first as that you see here.
Now we get a get request, right?
Because it was actually a get request.
But now let me fill in the data again.
And press submit.
And let's see what we've got this time.
So we got no new output here because no request is happening, no get request, no post request.
That means there's an issue with the button.
So if you go to index.html.
And you find you locate your button element.
Now, this button should be typesubmit.
However, mistakenly, we have put this as a button.
So you should replace the type of the button to a submit button.
Right.
Then go to the web page.
Reload.
Fill in the data again.
Press submit.
Go to flask.
And yeah, this time we got a post request.
So Post was printed out by this line here and then it was printed out by this line in here, the first
name.
So now it is working.
So let me remove that first print function, this one as well.
And so I'll duplicate this.
So this will be last name.
Last name.
Then we have the email address, email.
So make sure that these correspond to let me split this to the right.
They should correspond to the names.
Of the input elements.
So last name email.
Then we have the date, date, date.
And then lastly, we have the occupation.
And the name for that is.
Also occupation.
So all the radio buttons share the same name.
Occupation that allows them to be grouped together.
And that name should also be used here.
So that's how you get the values that the user inputs in the web page.
And so before we finish this lecture, let's make sure that we correctly got the values of these four
variables.
To do that, again, you can either print out all of these using a print function where you place first
name, comma, last name, comma, email, etcetera.
Or you can use debugging.
Let's use debugging.
So for that you need to place a breakpoint after these values.
So if you want to know the values of these variables, you want to place the breakpoint in the next
non-empty line, which is this one in here.
So put your cursor there and then you don't want to run the app or rerun it.
You want to press the debug button or right click and go to debug app.
Then you want to go to the Web page, reload that and PyCharm will take you back here.
But you want to go back to the page, fill in those data.
Press submit and then pi charm will take you back here again.
But this time you'll see these values here.
So the variables, right?
So in here we can see the date.
So the date variable is a string.
So that's the date that the user entered the email address.
A string you see str str, the first name, last name and occupation.
Now with occupation, we have a problem.
This is simply saying that the radio one of the radio buttons was pressed, but we don't get the actual
value of the pressed of the selected radio button.
So let's fix that.
To fix this issue, we need to add a value attribute to each of the radio buttons, because otherwise
we will get this on string.
So by default the value of the selected button is on.
But if you add here.
So let's go to the first.
Radiobutton, which is the employed option and adds a value of.
Employed.
We need to add a value for the other radio buttons as well.
So this is unemployed.
Make a space there between the value and the required property.
Same for this.
Value is equal to self dash employed.
And lastly, value is equal to student.
Good.
Now let's stop this debugging process and start it again.
So make sure that the.is here.
Start the debugging again.
Reload the page.
Now, if you get this empty section here, which is saying variables are not available, you should
put your cursor in the line where your breakpoint is and press this button here.
Run to cursor.
Press it once and press it twice three times until you see this connected here.
Then go to the web page and you should see the website again.
So again, you can fill it in.
With data.
Click one of the options, press submit.
And now we should see the occupation as unemployed.
So that reflects our choice here in the radio group.
So that's how you can get the data from your python form, from your flask form and access them from
your python scripts.
Here in the next videos, we will get this data, store them in a database and then also send them by
email to the user's email address.
So see you later.