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); }
Advertisement
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
.