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.
I guess this is as good a time to start branching into some posts on PHP and Javascript, or more specifically, jQuery.
To be honest, I’ve never been partial to using Javascript (ie client-side programming) in my web applications, prefering instead to rely on server-side processing for all my programming needs. I guess this has to do with my frustrations of Javascript incompatibility between different browsers back in the day. However, with a javascript library (or framework) like jQuery, I’m starting to use more client-side actions to complement all the server-side PHP stuff. Here’s 6 reasons why you should use JavaScript Libraries & Frameworks.
You can download my example source code if it helps you understand how the whole thing works.
Download:
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 loadprocess.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
Here’s the jQuery way, which is made possible by something called AJAX (which stands forAsynchronous JavaScript and XML). AJAX is bascially the technology that makes it possible to exchange data with a server, and update parts of a web page – without reloading the whole page. jQuery includes the necessary functions to implement AJAX into your web application.
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 form.php to process.php.
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 form.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>JQuery Form Example</title><script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script><script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script><script type="text/javascript">$(document).ready(function(){$("#myform").validate({debug: false,rules: {name: "required",email: {required: true,email: true}},messages: {name: "Please let us know who you are.",email: "A valid email will help us get in touch with you.",},submitHandler: function(form) {// do other stuff for a valid form$.post('process.php', $("#myform").serialize(), function(data) {$('#results').html(data);});}});});</script><style>label.error { width: 250px; display: inline; color: red;}</style></head><body><form name="myform" id="myform" action="" method="POST"><!-- The Name form field --><label for="name" id="name_label">Name</label><input type="text" name="name" id="name" size="30" value=""/><br><!-- The Email form field --><label for="email" id="email_label">Email</label><input type="text" name="email" id="email" size="30" value=""/><br><!-- The Submit button --><input type="submit" name="submit" value="Submit"></form><!-- We will output the results from process.php here --><div id="results"><div></body></html>
and the source code for process.php
<?phpprint "Form submitted successfully: <br>Your name is <b>".$_POST['name']."</b> and your email is <b>".$_POST['email']."</b><br>";?>
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.
Over at process.php, I’m simply printing out the data received to show you the information was sent and returned.
That’s basically it. If you want to know more, do check out the jQuery website to get more details on how to do AJAX and Validation.
Feel free to comment your thoughts or suggestions.
