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 trying to get into grips in using AJAX in wordpress, the following code creates a form with an input box using the wordpress feature shortcode [ajaxf].

add_action( "wp_ajax_ajaxcf", "my_action_callback" );
add_action( "wp_ajax_nopriv_ajaxcf", "my_action_callback" );

function my_action_callback() {
    $whatever = intval( $_POST['fname'] );
    echo $whatever;
function ajax_contact_form() {
<script type="text/javascript" >
jQuery(".submit").click(function() {
    jQuery.post(ajaxurl, $('#ajaxForms').serialize(), function(response) {
        alert('Got this from the server: ' + response);

<form id="ajaxForms">   
    <label for="fname">First Name:</label>
    <input id="fname" name="fname" value="First Name" type="text" />

  <p class="submit">
    <input name="action" type="hidden" value="ajaxcf" />
    <input id="submit_button" class="submit" value="Send" type="button" />
add_shortcode("ajaxcf", "ajax_contact_form");

I simply want to alert the response with jQuery but it doesn't seem to work and i have no idea why.

Help appreciated.


share|improve this question
up vote 1 down vote accepted

This is just a simple javascript issue. When your javascript that attaches the click behavior to the form is parsed, the form element doesn't yet exist because it's further down the page, so it doesn't get attached. Either move the javascript below the form, wrap it in a jQuery(document).ready(), or use live.

EDIT - $('#ajaxForms').serialize(); should be jQuery('#ajaxForms').serialize();, you need to define ajaxurl in your javascript: var ajaxurl = "<?php echo admin_url( 'admin-ajax.php' ); ?>";, otherwise your code works fine, tested here.

share|improve this answer
Hi Milo, I have moved the jQuery further down the page and even wrapped it around a jQuery document ready and the code still doesn't work, it wouldn't surprise me if there is an error within the jQuery. Matt – Shoebox Jan 17 '12 at 2:03
@MattStrange - see edit above. – Milo Jan 17 '12 at 2:33
Thanks man, works! One thing i don't understand is in the wordpress codex it says the admin-ajax.php is already included.. – Shoebox Jan 17 '12 at 4:29

This question here might help you.

Basically, you need to make sure you specify an 'action' when you post you ajax request. In your code the action is 'ajaxcf'.

In your plugin/ theme's functions.php file you then need hook onto init a function that checks the action, checks any nonces if necessary and then calls the following;

 do_action( "wp_ajax_ajaxcf" );
 do_action( "wp_ajax_nopriv_ajaxcf" );

EDIT I've not checked the JavaScript side of things, see Milo's response. But wp_ajax_ajaxcf is not a default action, so you have to 'do' it.

share|improve this answer
Thanks Stephen for the reply, i have specified the action in the html form.. <input name="action" type="hidden" value="ajaxcf" /> – Shoebox Jan 17 '12 at 1:57
Apologies, I missed that. See my comment on 'do_action' :D – Stephen Harris Jan 17 '12 at 2:01
Kk, i'm working from the tutorial found on the wordpress codex, i'm not sure if the do_action is necessary... ?? codex.wordpress.org/AJAX_in_Plugins – Shoebox Jan 17 '12 at 2:13
Hi, Matt - you're right, my mistake! – Stephen Harris Jan 18 '12 at 12:09

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.