WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I'm having trouble getting AJAX and jQuery to work with WP, and wondering if someone can point me in the right direction.

I have a form, and I want to pass the data from the form to a PHP function, where the data is returned and a <div> is created with the data manipulated by a PHP function. I've got a version working outside of WP, but I can't seem to port it.

I've followed many tutorials, and nothing seems to work. I've got the following code, it should simply create an alert window with the data from the form , with "hello" prepended, but the JS function never even gets called. It keeps adding ?name=name to the page URL.

I've also tried creating a seperate JS file, and loading the script with..

plugins_url() . '/MyPlugin/script.js',
array( 'jquery' )

Any help getting it to work is greatly appreciated.

 * Plugin Name: Addword
 * Plugin URI: Addword
 * Version: 1.0

 * Make sure jquery is loaded
function add_to_header() {
add_action( 'wp_enqueue_scripts', 'add_to_header' );

 * Add shortcode to show form and script

function add_word( ) {      

$script = "
jQuery('#ajax_form').bind('submit', function() {
    var form = jQuery('#ajax_form');
    var data = form.serialize();
    data.action = 'add_word_to_form'
    jQuery.post('/wp-admin/admin-ajax.php', data, function(response) {
    return false;

$form ='
<form class="form" id="ajax_form">                            
    <input type="text" name="name" id="name"  placeholder="Word Goes Here" required="">
    <input type="submit" value="Submit" id="submitaddword">

return $script.$form;

add_shortcode( 'addword', 'add_word' );

 * Set up AJAX call to add word
add_action("wp_ajax_add_word_to_form", "add_word_to_form");
add_action("wp_ajax_nopriv_add_word_to_form", "add_word_to_form");

function add_word_to_form ($data)
    return "Hello".$data;


share|improve this question
Two things I noticed are that it looks like your bind function call is not properly closed, and you need to make sure you account for jQuery running in noConflict mode. See here: codex.wordpress.org/Function_Reference/… – czerspalace Mar 13 '14 at 22:15
@czerspalace - Oops. I've edited my original post, but I am still getting the same error. Thanks. – Adam Mar 13 '14 at 22:21
Do you see any errors in your console? Another possible issue is that your add_shortcode callback function should return a string instead of echo'ing codex.wordpress.org/Function_Reference/add_shortcode – czerspalace Mar 13 '14 at 22:26
@czerspalace Thanks for looking into it. I've no errors in the console, and I've changed the shortcode to return instead of echoing (in my OP too), but still no joy! – Adam Mar 13 '14 at 22:39
It seems the button isn't binding. If I add alert('clicked'); as the first line in the .bind function, before grabbing the form data, the alert never opens. – Adam Mar 13 '14 at 22:49
up vote 0 down vote accepted

Wrap your javascript code with document.ready, and if it works I would suggest going back to putting this in an external file

    jQuery('#ajax_form').on('submit', function(e) {
        var form = jQuery('#ajax_form');
        var data = form.serialize();
        data.action = 'add_word_to_form'
        jQuery.post('/wp-admin/admin-ajax.php', data, function(response) {
        //return false;
share|improve this answer
Perfect. So it was trying to bind before the page had loaded properly. Thanks! – Adam Mar 13 '14 at 23:31

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.