Edit: Enjoyed this? Check out my new post on AJAX using JSONP in WordPress.

There are some great posts and a fantastic wiki page explaining how to use AJAX in WordPress. But I haven’t found a quick plug-and-play tutorial. So here goes…

The problem: A simple form that will give the visitor an input and when they click “Next” it will send the content of the input to the server who will send all the $_POST fields back as JSON. Why you’d want this? Who knows. But it’s a simple problem to solve that you can adopt to do anything.

Here’s the Gist

inputtitle_submit.js

(function ($) {
    $(document).ready(function () {
        $('#next').click(function () {
            $.post(
                PT_Ajax.ajaxurl,
                {
                    // wp ajax action
                    action: 'ajax-inputtitleSubmit',

                    // vars
                    title: $('input[name=title]').val(),

                    // send the nonce along with the request
                    nextNonce: PT_Ajax.nextNonce
                },
                function (response) {
                    console.log(response);
                }
            );
            return false;
        });

    });
})(jQuery);

inputtitle_submit_inc.php

<?php
add_action( 'wp_enqueue_scripts', 'inputtitle_submit_scripts' );
add_action( 'wp_ajax_ajax-inputtitleSubmit', 'myajax_inputtitleSubmit_func' );
add_action( 'wp_ajax_nopriv_ajax-inputtitleSubmit', 'myajax_inputtitleSubmit_func' );

function inputtitle_submit_scripts() {

	wp_enqueue_script( 'inputtitle_submit', get_template_directory_uri() . '/js/inputtitle_submit.js', array( 'jquery' ) );
	wp_localize_script( 'inputtitle_submit', 'PT_Ajax', array(
			'ajaxurl'   => admin_url( 'admin-ajax.php' ),
			'nextNonce' => wp_create_nonce( 'myajax-next-nonce' )
		)
	);

}

function myajax_inputtitleSubmit_func() {
	// check nonce
	$nonce = $_POST['nextNonce'];
	if ( ! wp_verify_nonce( $nonce, 'myajax-next-nonce' ) ) {
		die ( 'Busted!' );
	}

	// generate the response
	$response = json_encode( $_POST );

	// response output
	header( "Content-Type: application/json" );
	echo $response;

	// IMPORTANT: don't forget to "exit"
	exit;

}

page-ajax_input.php

<?php
/*
Template Name: Input Submition Page
*/

get_header(); ?>
	<div class="form-signin">
		<h2>Input Title</h2>

		<div class="control-group">
			<input type="text" required="required" name="title" class="input-block-level" placeholder="Input Title">
			<button class="btn btn-large" id="next">Next</button>
		</div>
	</div>

<?php get_footer();

This is the plug-and-play version my friends. (Extra points if you recognize what ui framework is here… DON’T JUDGE ME IT’S ONLY FOR WIREFRAMING.)

How to use the code

• Add include_once(‘inputtitle_submit_inc.php’);` in functions.php. Make sure inputtitle_submit_inc.php in in your template folder.
• page-ajax_input.php is a template page, make sure it’s in in your template folder. Just create a page in WordPress using “Input Submition Page”.
• inputtitle_submit.js should be in a folder named ‘js’ in your template folder. Otherwise

wp_enqueue_script( ‘inputtitle_submit’, get_template_directory_uri() . ‘/js/inputtitle_submit.js’, array( ‘jquery’ ));

will fail.

How it works

page-ajax_input.php

This is a simple template file. The important elements here are the input field and the next button. They are hooked in the JS file.

inputtitle_submit_inc.php

The server-side magic.

The first line enqueues the js file and pops some variables in for the AJAX onto the page. They are called in inputtitle_submit_scripts().

The next two lines enable the AJAX to work. They create the ajax action “ajax-inputtitleSubmit”. If you only have “wp_ajax_ajax-inputtitleSubmit” it will only work for logged in users. If you only have “wp_ajax_nopriv_ajax-inputtitleSubmit” it will only work for logged out users. If you do this, make sure you have serious security in place.

Those two lines tie the action to myajax_inputtitleSubmit_func(). This is what happens server side. Inside you’ll find some nonce magic for security. The function checks the nonce, then converts the $_POST variables to JSON and sends them back to the browser. Don’t forget the exit();

inputtitle_submit.js

The Javascript.

First I encapsulate the JQuery so that it won’t conflict with anything. Then when the DOM is ready…

When “Next” is clicked it sends a POST AJAX request to the server. The AJAX URL was defined in wp_localize_script in inputtitle_submit_inc.php as well as the nonce.

We send the action, the nonce and the inputted “title” as variables to the server. Then in outputs the response (all $_POST variables as JSON) in the console.

Summary

I built this for reference sake. If you can suggest any best practices or improvements please comment below.