Ajax post returning full html page as response


I know that this has been frequently asked here, but none of the solutions I find seem to work for me.

The issue is as follows: whenever I post the form, I have a console log with the response which is a full html page rather than a simple message.

Backend script:

    add_action( 'admin_ajax_nopriv_email_verification_form', 'verify_and_sanitize_email_form' );
add_action( 'admin_ajax_email_verification_form', 'verify_and_sanitize_email_form' );

// Email verification callback
function verify_and_sanitize_email_form() {
    // Check referer
    check_ajax_referer( '9pU0Pk7T01', 'security' );

    if(empty($_POST) || !isset($_POST['rguroo_email']) || !isset($_POST['rguroo_email_confirmation']) || !isset($_POST['rguroo_desired_action'])) {
        echo 'There is one or more empty fields';
    $sanitized_email = sanitize_email( esc_html($_POST['rguroo_email'] ));
    $sanitized_email_confirmation = sanitize_email( esc_html($_POST['rguroo_email_confirmation'] ));
    $desired_action = esc_html($_POST['rguroo_desired_action']);

    if(!is_email( $sanitized_email ) || !is_email( $sanitized_email_confirmation )) {
        echo 'Email is not valid';

    if($sanitized_email !== $sanitized_email_confirmation) {
        echo 'Emails do not match';

    if($desired_action !== 'purchase' || $desired_action !== 'renewal' || $desired_action !== 'trial') {
        echo 'Fatal error with radio buttons';

    if(!isset($_COOKIE['rguroo_form_type'])) {
        echo 'Server error';

    // student email verification logic
    $form_type = $_COOKIE['rguroo_form_type'];
    if($form_type === 'student') {
        $trail = substr($sanitized_email, -4);
        if($trail !== '.edu') {
            echo 'Not a valid student email';
        // Other university specific logic here
    setcookie('rguroo_form_action',$desired_action, 14 * DAY_IN_SECONDS);
    setcookie('rguroo_form_email', $sanitized_email, 14 * DAY_IN_SECONDS);
    echo "success";

Frontend javascript:

jQuery(document).ready(function () {
  jQuery('form#email-verification').on( 'submit', function () {
    var form_data = jQuery(this).serializeArray();
    form_data.push( { "name" : "security", "value" : ajax_info.ajax_nonce } );
          url : ajax_info.ajax_url,
          type : 'post',
          data : form_data,
          success : function( response ) {
              if(response !== 'success') {
                jQuery('.error').innerHTML = response;
              } else {
          fail : function( err ) {
              jQuery('.error').innerHTML = "Cannot contact server";
    return false;

Form (used in a shortcode):

function output_email_verification() {
    return '<form action="'.esc_url( admin_url("admin-ajax.php") ).'" method="post" id="email-verification">
                <p class="error">'.$error.'</p>
                <input type="radio" label="Purchase 12 months access" value="purchase" name="rguroo_desired_action" checked>Purchase 12 months access</input>
                <input type="radio" label="Renew account" name="rguroo_desired_action" value="renewal">Renew account</input>
                <input type="radio" label="Create trial account" name="rguroo_desired_action" value="trial">Create trial account</input>
                <p class="form-subtext">* indicates required field</p>
                <p>Email address*</p>
                <input type="text" name="rguroo_email" required>
                <p>Re-type email address*</p>
                <input type="text" name="rguroo_email_confirmation" required>
                <input type="hidden" name="action" value="email_verification_form">
                <input type="submit" value="Submit"> 

Things I know: there isn’t an issue with jQuery sending the post (or at least making the post request). On submit jQuery sends the post with all of the correct parameters. I also know that I’m not using different nonces. I have tried placing error_logs() all around the callback function, but none of them ever got displayed in debug.log. This leads me to believe that the callback is never actually called, but I don’t know why. Also, even if I give the form a test which should fail, jQuery still reads it as a success.

I’ve wasted all day on this form and feel like an idiot. Could someone with a few more braincells than me please tell me where I’m going wrong?

Thank you so much.

, Eli 4 years 2020-03-25T20:51:50-05:00 0 Answers 102 views 0

Leave an answer