jQuery AJAX call in Wordpress Plugin Not Working

Question

I have read this post, Jquery Ajax call in wordpress plugin page not working ...

It is very close to my problem.... I have a very basic Wordpress plugin to provide a very specific membership form, it passes payment to PayPal to handle and only emails inputted data. With the same button click of the PayPal button there is also a jQuery script to pickup the submit button click and pass the same data to generate different email message.

This was all working prior to moving it to Wordpress, now under a Wordpress plugin it is all working except for the AJAX function on a submit button click. When the payment form is submitted there is jQuery script to pickup the submit button click and then it sends the payment form data via AJAX.

Here is the js file... When I check the pages source I see the proper Wordpress header line to include the js script and picking the link in the source I get the correct js file. Also the alert("help") pops up also when un-commented.

jQuery(document).ready(function(){
  jQuery('#paypal').submit(function(){
       //alert("help");
       jQuery.ajax({
         url : ajax_object.ajaxurl,
         type: 'POST',
         action: 'memreg_process_request',
         //Is this the correct way to pass form data under Wordpress.
         data: $(this).serialize(),
         success: function( data ){
           //Do something with the result from server
           console.log( data );
         }
       });
  });                      
});

Here is the code in myplugin in Wordpress.....

function myplugin_register_script() 
{
  // Register the style 
wp_register_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js', false, '1.10.2', false) ;
  wp_register_script('memreg_process', plugins_url( '/js/memreg.js',__FILE__), false, '1.0.0', false) ;
  // enqueing:
  wp_enqueue_script('jquery');
  wp_enqueue_script('memreg_process');
  wp_localize_script( 'ajaxHandle', 'ajax_object', array( 'ajaxurl' => admin_url( 'admin_ajax.php' ) ) );
}

function myplugin_styles()  
{ 
  // Register the style
  wp_register_style( 'memreg_style', plugins_url('style.css', __FILE__),false, '1.0.0', false );
  // enqueing:
  wp_enqueue_style( 'memreg_style' );
}
add_action('wp_enqueue_scripts', 'myplugin_register_script');
add_action('wp_enqueue_scripts', 'myplugin_styles');

add_action( 'wp_ajax_memreg_process_request', 'memreg_process_request_wp_ajax_function' );
add_action( 'wp_ajax_nopriv_memreg_process_request', 'memreg_process_request_wp_ajax_function' );

function memreg_process_request_wp_ajax_function(){
   $email_to = "oet@pacssi.com";
   $email_subject = "Testing Email Function from PHP script";
   $email_message .= "This is a test message to test AJAX result\n"; 
   $email_message .='Address:'.$_POST["Street"].', '.$_POST["City"].', '.$_POST["State"].' '.$_POST["Zip"]."\r\n";
   $email_message .='Phone:'.$_POST["Phone"].'Email:'.$_POST["Email"]."\r\n";
   $email_message .='Chapter:'.$_POST["Chapter"]."\r\n";   
   $headers = 'From: '.$email_from."\r\n".
   'Reply-To: '.$email_from."\r\n" .
   'X-Mailer: PHP/' . phpversion();
   @mail($email_to, $email_subject, $email_message, $headers);  

  //To send back a response you have to echo the result!
  //echo $_POST['Email'];
  //echo $_POST['Chapter'];
  wp_die(); // ajax call must die to avoid trailing 0 in your response
}

function myform(){
........
}

Again I had all the AJAX portion working before moving the Membership Form in to a Wordpress Plugin. Prior to Wordpress the AJAX just sent the form data to a separate process.php file on the web server to pull out a few fields and generate a email message. Reading the post listed above and many others I am unable to get the AJAX part working under Wordpress.

Answer 1

I see you have action: 'memreg_process_request' , however action is not recognized as a property and is further not passing over $_POST['action'] = 'memreg_process_request' . Further, the variable $(this) refers to the ajax request; therefore you need to cache a reference to the form variable prior to building the ajax request:

var $this = $(this);

$.ajax({....

Then inside of our data constructor, we need to define the action and the form.

In reality, it should be structured more like:

data: {
    action: 'memreg_process_request',
    form: $this.serialize()
}

Of course your form data is now available within $_POST['form']

As you've already registered the add_action , and you've got a function that's handling the request/response, there's nothing more to it.

Answer 2

Here are the changes I made to make this all work.

I had to change the data: & url: lines to make this work. For some reason I could not get wp_localize_script to define ajax_object.ajaxurl, I kept getting object undefined, so I just used the full path. I used Firebug to see errors generated by the jQuery script. The suggestion above generated errors in Firebug after trying them. I searched many other posts to find a solution.

I used "parce_str($_POST[form],$my_POST)" to pull the passed data out in the function memreg_process_request_wp_ajax_function().

jQuery(document).ready(function(){
jQuery('#paypal').submit(function(){
       jQuery.ajax({
         url : "/wp-admin/admin-ajax.php",
         type: 'POST',
         data: {
            action: 'memreg_process_request',
            form: jQuery('#paypal').serialize()
         },
         success: function( data ){
           //Do something with the result from server
           console.log( data );
         }
       });
    });                    

});