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.



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.

|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.

|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 clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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