Lately, I’ve been chancing on quite a number of posts at various places asking about how to perform a web action without the webpage reloading/refreshing? For example, dynamically updating a list on a page without a reload or submitting a form to PHP without leaving the webpage the form sits on.
You can download my example source code if it helps you understand how the whole thing works.
And here’s a demo of what we’re trying to do.
The traditional way of doing form submissions
Back in the “old” days, in order to perform a form submission, you need to do something like this.
When you click the “Submit” button on
form.php, the web server knows to send the name and email values using the POST method to the php script called
process.php. The web server will load
process.php page and the PHP script will start to read in the form values posted from
form.php, maybe perform some validation to check that the information received is correct, then perhaps do something with the form values such as storing it in a database or sending it via email and output a “thank you” message.
What if something goes wrong, for example, the person submitting the form wrote in a badly-formed email address, the validation at
process.php will throw a nicely worded error message and stop running the rest of the script. The person then would need to go back to the form to correct the email address and he would submit the form again.
This might have been an OK way of doing things 10 years ago, but in this era of Facebook and Twitter, that’s a pretty antiquated and tedious method.
The jQuery way of doing form submissions
The diagram looks quite similar to the “old” way of doing things, except that
process.php is now represented by a ‘circle’. This is because process.php is now hidden for lack of a better word. In the traditional method, when you click the submit, your browser will load
process.php and it will jump from
With the jQuery/AJAX way,
process.php becomes a background process which the web server will call on, and when you click on the “Submit” button,
form.php pushes the data to
process.php, but your browser will remain showing
form.php. Once the
process.php has done what it needs to, it will return to
form.php some output to be displayed.
Here’s the source code for
JQuery Form Example
and the source code for
Your name is ".$_POST['name']." and your email is ".$_POST['email']."
Here’s what’s happening
I included jQuery’s form validation because it provides a more real world example. Usually, most sites will perform processes like form validation at the client-side before the form is submitted. It’s just more intuitive and a much better user experience. In fact if you can offload as much workload as you can to the browser, it will greatly reduce the hit on your server.
So here’s a quick high-level walk through what’s happening on the jQuery part.
I call the validate method (make sure you have included the jquery validate plugin – see
form.php Line 6) on my form #myform, and proceed to define what to validate. In this case, we’re checking that the name field is ‘required’, and we’re checking the email field is not only ‘required’, but must be an email format. I also define the custom error message I want to display if the validation fails.
Lastly, the submitHandler is what gets processed if the validation is successful. In this case, I’m doing an ajax post method, sending my form data to process.php, and get back any results as HTML data which will be displayed into #results.
process.php, I’m simply printing out the data received to show you the information was sent and returned.
Feel free to comment your thoughts or suggestions.