Jacob Buller
Jacob Buller

Reputation: 137

Wordpress Ajax JSON success return no being recognized

I'm working on a contact form for a website using an jQuery Ajax call method that then uses Wordpress's building in admin-ajax.php to submit the form's values, send them to an email address via wp_mail and then, if successful, send back an array through json_encode. The form works and the email sends but the success data isn't send after and the Ajax :success function doesn't initiate. Here's what I've been using.

jQuery

(document).ready(function($){

$.validator.addMethod("lettersonly", function(value, element) {
return this.optional(element) || /^[a-z\s]+$/i.test(value);
}, "Only alphabetical characters"); 

$.validator.addMethod("phoneNum", function(value, element) {
    return this.optional(element) || /^[0-9\-\s]+$/i.test(value);
}, "Phone number can only be number and dashes.");


$("#contact-form").validate({
    rules: {
        name: {
            required:true,
           lettersonly: true
        },
        email: {
            required: true,
            email: true
            },
        phone: {
            phoneNum: true,
            },
        message:  {
            required:true
        }
        },
     messages: {
            name:  {
                required: "Please enter your name.",
                lettersonly: "Needs to be letters, no numbers please."
            },
            email: {
                required: "Please enter your email adress.",
                email: "Please enter your valid email adress."
            },
            phone: {

            },
            message:{
                required: "Please enter a message.",
            }
          },

    submitHandler: function(form) {
    $('#contact-msg').html('<p class="ajaxLoader">Sending Email...</p>');

       $.ajax ({
            type: 'POST',
            url:  ajax_object.ajax_url,
            data: $('#contact-form').serialize(),
            dataType: 'json',
            success: function(response) {
                        if (response.status == 'success') {
                            $('#contact-form')[0].reset();
                        }
                        $('#contact-msg').html(response.errmessage);
                    }
                });

    }

});
});

Function.php

// CONTACT FORM SCRIPTS    
function contactform_add_script() {

wp_enqueue_script( 'contactform-script', get_template_directory_uri().'/assets/js/contact_me.js', array('jquery') , null, true);
wp_localize_script( 'contactform-script', 'ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );

}
add_action('wp_enqueue_scripts', 'contactform_add_script');


// CONTACT FORM PROCESSING 
 function ajax_contactform_action_callback() {
$error = '';
$status = 'error';
if (empty($_POST['name']) || empty($_POST['email']) || empty($_POST['message'])) {
    $error = 'All fields are required to enter.';

    } else {
        $name = filter_var($_POST['name'], FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_LOW);
        $email = filter_var($_POST['email'], FILTER_SANITIZE_EMAIL);
        $number = filter_var($_POST['phone'], FILTER_SANITIZE_NUMBER_INT);
       // $treatments = filter_var($_POST['treatments'], FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_LOW);
        $subject = 'A message from St. Romain Interiors\'s contact form.';
        $message .= PHP_EOL.'Sender\'s name: '.$name;
        $message .= PHP_EOL.'Phone number: '.$number;
        $message .= PHP_EOL.'E-mail address: '.$email;

        $message .= PHP_EOL.'Message: '.stripslashes($_POST['message']);

        $sendmsg = "Thanks for the message! We will respond as soon as possible.";
        $to = '[email protected]'; // If you like change this email address
        // replace "[email protected]" with your real email address

        $header .= 'Reply-To: '.$email.PHP_EOL;
        if ( wp_mail($to, $subject, $message, $header) ) {
            $status = 'success';
            $error = $sendmsg;
        } else {
            $error = 'Some errors occurred.';
        }
    }

$resp = array('status' => $status, 'errmessage' => $error);
header( "Content-Type: application/json" );
echo json_encode($resp);
die();
}
add_action( 'wp_ajax_contactform_action', 'ajax_contactform_action_callback' );
add_action( 'wp_ajax_nopriv_contactform_action',      'ajax_contactform_action_callback' );

This has worked on other sites and I'm not sure why it's not working on this site. It send the email, just my jQuery method gets no success callback.

UPDATE

I downloaded Firebug and this is the response I get when submitting the form.

<br />
<b>Notice</b>:  Undefined index: name in <b>/home/theski/public_html/stromain/wp-content/themes/stromain
/functions.php</b> on line <b>156</b><br />
<br />
<b>Notice</b>:  Undefined index: email in <b>/home/theski/public_html/stromain/wp-content/themes/stromain
/functions.php</b> on line <b>157</b><br />
<br />
<b>Notice</b>:  Undefined index: phone in <b>/home/theski/public_html/stromain/wp-content/themes/stromain
/functions.php</b> on line <b>158</b><br />
<br />
<b>Notice</b>:  Undefined variable: message in<b>/home/theski/public_html/stromain/wp-content/themes
/stromain/functions.php</b> on line <b>161</b><br />
<br />
<b>Notice</b>:  Undefined index: message in <b>/home/theski/public_html/stromain/wp-content/themes/stromain
/functions.php</b> on line <b>165</b><br />
<br />
<b>Notice</b>:  Undefined variable: header in  <b>/home/theski/public_html/stromain/wp-content/themes
/stromain/functions.php</b> on line <b>171</b><br />
{"status":"success","errmessage":"Thanks for the message! We will respond as soon as possible."}

Upvotes: 0

Views: 354

Answers (1)

Jacob Buller
Jacob Buller

Reputation: 137

The answer was that debug was set to 'true' in wp_config. This created error html to be returned by Wordpress because variables in the functions.php were being assigned via ajax but Wordpress debug was reporting them as 'Undefined'. I found this out by viewing the return information on the console tab in Firebug when submitting content on the form. The return was filled with
and Undefined errors. This caused the AJAX response to break, not allowing me activate the ajax callback. Setting wp_config debug to 'false' fixed everything.

At least this is what I'm assuming, please correct me if I'm wrong.

Upvotes: 0

Related Questions