During the last few years, AJAX has been gradually becoming an integral part of creating dynamic and responsive websites. The main advantage of AJAX is it allows you to update the page content without reloading the page. For instance, Google Docs uses AJAX to save your work online.
I think most of you already know that WordPress uses AJAX in the back end. However, if you didn’t know, open up the wp-admin directory and you will find a file named admin-ajax.php. That is the file which processes every AJAX request made by WordPress. You might find this confusing that the file that controls AJAX is a PHP file, but WordPress developers prefer it that way.
Nonetheless, I won’t dig any more into the AJAX used in WordPress back end. That discussion demands another article. If you are interested to know more about that, please let me know.
In this tutorial, I will discuss about how you can use AJAX to submit and process form data in WordPress. To keep the article short, I will only limit my discussion to the jQuery and AJAX. The HTML and the PHP part of the form will not be included in today’s discussion.
When we include a form in WordPress, the ‘Submit’ button usually sends the data to a PHP file. The PHP file processes the provided data and redirects the users to other pages. Processing the data with AJAX is almost same, with a significant difference.
Using AJAX will allow us to process the data without redirecting the users to other pages. We will disable the submit button initially, therefore the page won’t change until AJAX allows it to. The processed data will be handed over to a PHP file.
Let’s take a look at the completed code at first.
<script type="text/javascript">
var $a = jQuery.noConflict();
$a(window).load(function(){
$a("#test-form").submit(function(e){
e.preventDefault();
var input_data = $a(this).serialize();
$a.ajax({
type: "POST",
url: "admin_url('admin-ajax.php') ",
data: input_data,
action: validate_form_data,
success: function(alrt){
$a("#note").ajaxComplete(function(event, request, settings){
if(alrt == "OK"){
result = " Thanks for sending the message.";
$a("#form").hide();
} else {
result = alrt;
}
$a(this).html(result);
});
}
});
return false;
});
});
</script>
Let’s break down the code. First of all, jQuery is set up in noConflict mode by this –
var $a = jQuery.noConflict();
This will prevent conflicts with other JavaScript libraries. Then, we start working on our form which has an id of test-form. Replace this with the class or id name of your form. Then, the form is prevented from redirecting the users to other pages by using preventDefualt function. Next, we save the serialized data into a variable by this line of code-
var input_data = $a(this).serialize();
We will transfer the data through POST method. For instance, if you have a field for ‘first_name’ and the provided value is ‘Richard,’ then, the serialized data would be-
first_name=Richard
This field could be accessed from a PHP file through this $_POST[‘first_name’]. Next, we will start processing with AJAX by calling in the ajax({ … }) function. This function will send the AJAX data to the admin-ajax.php file of the wp-admin folder of your WordPress installation. We have defined a function for a successful form submission. When the form is successfully submitted, this function will be triggered.
Inside the function, we bind an ajaxComplete event to a div with the id of ‘note.’ If the data is submitted, then a thank you note will be displayed and the form will be hidden by this code block –
if (alrt == "OK") {
result = " Thanks for sending the message. ";
$a("#form").hide();
}
The submitted data will then be sent to your defined php file for saving or any other type of actions. On the other hand, if there was an error in the input data, than the form will not be submitted as we have included a ‘return false’ just after the AJAX function.
As you see, I have included ‘validate_form_data’ as the action parameter. In order to follow the WordPress AJAX best practices, you need to add wp_ajax_validate_form_data to the functions.php file of your theme, or the main file of your plugin, or any other file you like. You need to use these two hooks –
- wp_ajax_validate_form_data
- wp_ajax_nppriv_validate_form_data
Obviously, you can replace the validate_form_data part with your own value. However, make sure that you have used the correct value everywhere. To know more about this, check out this article at Smashing Magazine (http://www.smashingmagazine.com/2011/10/18/how-to-use-ajax-in-wordpress/), or the WordPress codex (http://codex.wordpress.org/Plugin_API/Action_Reference/wp_ajax_(action)).
While this was a simple example of using AJAX to submit form data in WordPress, you can obviously improve it, include your own functions and/or customize the process thoroughly. If you have any confusions or want to know more about the process, please let me know. I will try my best to make them clear for you.
