skip to Main Content

In my WordPress v5.8.2, I have localized the ajax_url in the functions.php:

wp_enqueue_script('site_scripts', get_stylesheet_directory_uri() . '/assets/js/site-scripts.js', array('jquery'), null, true);

wp_localize_script('site_scripts', 'site_ajax', array('ajax_url' => admin_url('admin-ajax.php'), 'check_nonce' => wp_create_nonce('site_ajax_nonce')));

With the below jQuery script I am processing the form to check if the email ID from the HTML form is already existed in the WordPress:

   $(document).on("submit", "#form", function(e) {
     e.preventDefault();
     $email = $(this).find('input[name=email]').val(); // email
     //ajax request, check if user exists
     $.ajax({
       type: "GET",
       dataType: 'json',
       url: site_ajax.ajax_url,
       data: {
         email: $email,
         action: 'email_exists_check',
         security: site_ajax.site_ajax_nonce
       },
       success: function(data) {
         if (data.result) {
           alert('Email exists!');
         } else {
           alert('Email does not exists!');
         }
       }
     });
   });

Below the PHP code in separate file to check email:

add_action('wp_ajax_email_exists_check', 'email_exists_check');
add_action('wp_ajax_nopriv_email_exists_check', 'email_exists_check');

function email_exists_check() {

    // Check nonce and email is set by ajax post.
    if (isset($_POST['email']) && wp_verify_nonce('check_nonce', 'security')) {
        // Sanitize your input.
        $email = sanitize_text_field(wp_unslash($_POST['email']));
        // do check.
        if (email_exists($email)) {
            $response = true;
        } else {
            $response = false;
        }
        // send json and exit.
        wp_send_json($response);
    }
}

The above entire code is not able to alert if email exists.

How can I make this code work?

Update #1

As per @Howard E advice, I found the PHP file that contained the email_exists_check() function was not loaded.

Now that the PHP file is loaded, I am not getting the actual email_exists status. For both existed and non-existed email, alert is always Email does not existed (data.result == false).

Seems the email_exists_check function itself is not loading. I checked the log with below code, and the response in either undefined or 0:

 success: function (json) {
     console.log(json);
 }

3

Answers


  1. Chosen as BEST ANSWER

    It was the wp_verify_nonce causing the issue.

    This is how I have modified the code and is working fine in all aspects as expected:

    $(document).on("submit", "#form", function(e) {
         e.preventDefault();
         $email = $(this).find('input[name=email]').val(); // email
         //ajax request, check if user exists
         $.ajax({
           type: "GET",
           dataType: 'json',
           url: site_ajax.ajax_url,
           data: {
             email: $email,
             action: 'email_exists_check',
             check_nonce: site_ajax.check_nonce
           },
           success: function(data) {
             if (data.result) {
               alert('Email exists!');
             } else {
               alert('Email does not exists!');
             }
           }
         });
       });
    

    Note the replacement of security with check_nonce in the data:.

    Below the PHP code:

    add_action('wp_ajax_email_exists_check', 'email_exists_check');
    add_action('wp_ajax_nopriv_email_exists_check', 'email_exists_check');
    
    function email_exists_check() {
        // Check nonce and email is set by ajax post.
        if (wp_verify_nonce($_POST['check_nonce'], 'site_ajax_nonce')) {
            // Sanitize your input.
            $email = sanitize_text_field(wp_unslash($_POST['email']));
            // do check.
            if (email_exists($email)) {
                $response = true;
            } else {
                $response = false;
            }
            // send json and exit.
            wp_send_json($response);
        }
    }
    

    Note the if (wp_verify_nonce){} statement and the use of nonce.


  2. Try parsing JSON response like this :

     $(document).on("submit", "#form", function(e) {
         e.preventDefault();
         $email = $(this).find('input[name=email]').val(); // email
         //ajax request, check if user exists
         $.ajax({
            type: "GET",
            dataType: 'json',
            url: site_ajax.ajax_url,
            data: {
                action: 'email_exists_check',
                security: site_ajax.site_ajax_nonce
            },
            success: function(data) {
                var status = JSON.parse(data);
                if (status.result === true) {
                    alert('Email exists!');
                } else {
                    alert('Email doesnt exsists!');
                }
            }
        });
    });
    

    Also , do not forget die() after AJAX call in WordPress

    <?php 
    add_action('wp_ajax_email_exists_check', 'email_exists_check');
    add_action('wp_ajax_nopriv_email_exists_check', 'email_exists_check');
    
    function email_exists_check() {
    
        $response = array();
        $email = $_GET['email'];
    
        // do check
        if ( email_exists( $email ) ) {
            $response['result'] = true;
        } else {
            $response['result'] = false;
        }
    
        // echo json
        echo json_encode( $response );
        die();
    }
    
    Login or Signup to reply.
  3. Enqueue Your Script and Localize add to functions.php:

    add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );
    
    function my_theme_enqueue_scripts() {
        wp_enqueue_script( 'site_scripts', get_stylesheet_directory_uri() . '/scripts.js', array( 'jquery' ), '1.0', true );
    
        wp_localize_script(
            'site_scripts',
            'site_ajax',
            array(
                'ajax_url'    => admin_url( 'admin-ajax.php' ),
                'check_nonce' => wp_create_nonce( 'site_ajax_nonce' ),
            )
        );
    
    }
    
    add_action('wp_ajax_email_exists_check', 'email_exists_check');
    add_action('wp_ajax_nopriv_email_exists_check', 'email_exists_check');
    
    function email_exists_check() {
        // Check nonce and email is set by ajax post.
        if ( isset( $_POST['email'] ) && wp_verify_nonce( 'check_nonce', 'security' ) ) {
            // Sanitize your input.
            $email = sanitize_text_field( wp_unslash( $_POST['email'] ) );
            // do check.
            if ( email_exists( $email ) ) {
                $response = true;
            } else {
                $response = false;
            }
            // send json and exit.
            wp_send_json( $response );
        }
    }
    

    And your jQuery:

    $( document ).on(  "submit",  "#form",  function(e) {
        e.preventDefault();
        $email = $( this ).find( 'input[name=email]' ).val(); // email
        // ajax request, check if user exists.
        $.ajax({
            type: "POST",
            dataType: 'json',
            url: site_ajax.ajax_url,
            data: {
                email: $email,
                action: 'email_exists_check',
                security: site_ajax.check_nonce
                }
            })
            .done(function(data) {
                if (data.result) {
                    alert( 'Email exists!' );
                } else {
                    alert( 'Email doesn't exsist!' );
                }
            });
    });
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search