Post Data with Ajax in WordPress Pugins

In this tutorial I am going to cover how to use Ajax to submit and process form data in your WordPress plugins. In order to tie things together, and to provide you a real world example, I am going to be working with the code used in my Short Code Contact form plugin.

As I’ve already set all of the HTML up in the other tutorial, I’m just going to show you what is going on with the jQuery.

Normally, when a user clicks the submit button on an HTML form, the data is sent to a PHP file for processing, then the user is redirected to some page. Processing the form data with Ajax is not much different, except that the user stays on the page and is never redirected. So what we are going to do is essentially disable the submit button, so that the page doesn’t change, and then intercept the data sent from the form with jQuery. We will then pass that data to a PHP file for processing.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<script type="text/javascript"> 
	var $j = jQuery.noConflict();
	$j(window).load(function(){		
		// this is the ID of your FORM tag
		$j("#contact-form").submit(function(e) {
                    e.preventDefault(); // this disables the submit button so the user stays on the page
		    // this collects all of the data submitted by the form
			var str = $j(this).serialize();					 
			   $j.ajax({			   
			   type: "POST", // the kind of data we are sending
			   url: "path/to/sendmail.php", // this is the file that processes the form data
			   data: str, // this is our serialized data from the form
			   success: function(msg){	// anything in this function runs when the data has been successfully processed
 
					// this sets up our notification area for error / success messages
					$j("#note").ajaxComplete(function(event, request, settings)
					{ 
						if(msg == "OK") // Message Sent? Show the Thank You message and hide the form
						{
							// This is shown when everything goes okay
							result = "Your message has been sent. Thank you!";
 
							// now hide the form fields
							$j("#fields").hide();
						}
						else // if there were ewrrors
						{
							result = msg; // msg is defined in sendmail.php
						}								 
						$j(this).html(result); // display the messages in the #note DIV							 
					});					 
				}					 
			 });					 
		});			
	});
</script>

One of the things you should note about this code is how I have setup jQuery in noConflict mode. This helps to mitigate conflicts between jQuery scripts. Unfortunately, jQuery conflicts are all too common with themes and plugins. Refer to my Coding Standards page for more information.

I’ve left detailed comments throughout the code here, but here’s what is going on.

First, we are using jQuery to intercept the data sent by the HTML form with:

$j("#contact-form").submit(function() {

Next, we serialize the data and storing it in a variable:

var str = $j(this).serialize();

What this means is that we are converting all of the data into POST format. So, for example, you have an input field named “message” with a user enter value of “hello”. Once serialized, that data looks like this:

message=hello

and will be accessible in our sendmail.php like:

$message = $_POST['message'];

The next step in our jQuery script is

$j.ajax({ . . });

which is used to actually send our serialized data to the PHP file for processing. Within this function we have the definitions for the sendmail.php file path, the type of data we are sending (POST), and also what we want to happen when the data has been processed successfully.

So inside of the ajax function, we have a “success” function, which runs after the data has been processed successfully. And inside of this function, we have another function

$j("#note").ajaxComplete(function(event, request, settings)

that takes care of displaying the error / success messages, and also hiding the form fields upon success.

The last piece of our function is

return false;

This makes sure that page just not get reloaded or redirected when the submit button is clicked. It essentially disables the button.

And that’s it! This is all you need to process forms with ajax. Obviously I have not included the PHP in sendmail.php necessary for the actually processing of the form, but that is all covered in my Ajaxified Contact Form tutorial.