We are going to be talking about submitting forms in more detail now.
And what I mean by this, is that I just want to discuss what happens after you submit a form.
As you and I already know, there's the front end aspect of building the form, and then there's the
client side validation.
And once that process is complete and everything is valid, what happens next?
Well, generally speaking, there are 2 ways to process forms.
One, we can use the action attribute.
And remember, we use this action attribute on the form element itself, right?
Remember? And we can use that to send the form data to a back end URL. And that back end URL will
then process the form, and redirect the user to a success or error page.
And if we use this way, we don't need any JavaScript, right?
It's as simple as using the form wrapper, and putting the action attribute on it.
It really is that simple.
But sometimes you want more control and using the action attribute is not the only way.
We also have AJAX. And we can use AJAX queries to submit the form without even leaving the page aka with
no page refresh.
If you are a bit unsure what AJAX is or want a bit more information, please check out my CRP or AJAX course.
But I am going to stop this lecture shortly and I'll show you an example of AJAX.
But anyway, the point I want to make is that when we use AJAX, we do have to also use JavaScript and
therefore success or error messages are displayed on the same page by manipulating the HTML with JavaScript.
Now I just want to say, depending on how your company or organization is structured, form processing
may not be part of your job role as a front end web developer.
And if that is the case, you'll just need to coordinate very closely with a back end developer to make
sure that the form submits the correct name:value pairs.
Otherwise it's going to be up to you to make sure the front end and the back end of your forms fit neatly
together.
Okay, so you got it, right?
We submit the form, we can use either the action attribute on the form element itself or we can use AJAX
queries.
But regardless of which approach we use, the next step, or the process, remains the same.
In other words, I want to talk a bit about now,
when the user submits a form, where does that data go and how do we handle it?
Well, this boils down to the client/server architecture.
At its most basic, we have a browser which is known as a client. And we have a server, right?
That's where all the files of any web page, sit.
So we know that - we've got a browser and we've got a server.
Well, the browser aka the client, whatever you want to call it, it will send a request to a server.
What do I mean by a server?
I mean a server like Apache or Tomcat or Node.js.
etc
etc.
It's going to be sending it to a server, but it sends it how? It sends it using a protocol, a set of
rules.
And typically, when we're talking web, we're talking the HTTP protocol.
Okay, have you got it?
So the browser sends an HTTP request to a server.
What does the server do?
Well, the server has to listen for that HTTP request and when it receives that request, it has to
process the data and then it issues a response using the same HTTP protocol.
And that is the crux of it.
It really is the crux of it.
So don't get bogged down with all the detail. An HTML form on a web page is nothing more than a convenient,
user friendly way to configure an HTTP request to send data to a server, and it allows the server to
listen for that request and send a response back to the client.
Very, very cool, very useful.
But like I mentioned, I want to stop here before I even start talking more about servers, and I want
to show you what AJAX is, because I don't want you to be wondering this whole time, "what is AJAX ❓".
Let me just tackle the elephant in the room.
See you in the next lecture.