top of page

Google ReCAPTCHA with AJAX

  • Writer: سُلَيْمَان بْن دَاوُوْد
    سُلَيْمَان بْن دَاوُوْد
  • Jan 25, 2023
  • 1 min read

This is how you can pass on AJAX .js




var userdata = { 
  'action'   : 'signin_member', 
  'username' : jQuery('#user_name').val(),
  'password' : jQuery('#password').val(),
  'hiddenurl': jQuery('#hiddenurl').val(),
  'captcha'  : grecaptcha.getResponse(0)
 };

This is how you can handle the captcha ajax response

/*Validate Coupon Codes*/

add_action( 'wp_ajax_validate_scratchcode', 'validate_scratchcode_callback' ); 
add_action( 'wp_ajax_nopriv_validate_scratchcode', 'validate_scratchcode_callback' ); 
function validate_scratchcode_callback(){

	$secret		=	"6LfYNNIZAAAAAA_eGXqymAFPe8yxQV5TITMUykhs";
	$response	=	$_POST["captcha"];
	$verify		=	file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret={$secret}&response={$response}");
	$captcha_success=json_decode($verify);


	if($captcha_success->success==true){

	}

	}else{
		 echo json_encode(array('invalidcaptcha'=>true, 'redirect'=> ''));
	}

wp_die();
}
/*Validate Coupon Codes*/

The HTML Looks like


<?php    $dataSiteKey     = sanitize_text_field(get_field('data_site_key','option'));   ?>
<div class="custom-modal-box " id="loginpopup">
    <div class="overlay"></div>
    <div class="content-box">
        <button class="popup-close-btn">
            <span class="fa fa-times"></span>
        </button>
        <div class="content-inner">
            <form action="signin_member" id="popup-loginform">
                
                <div class="form-group">
                    <div class="g-recaptcha form-group" data-sitekey="<?php echo $dataSiteKey; ?>"></div>
                </div>
                <p class="status"></p>
                
            </form>
        </div>
    </div>
</div>


Recent Posts

See All
Self Invoking Function jQuery

The function starts with (function ($) { and you can use your own code inside it (function ($) { jQuery(document).ready(function () {...

 
 
 
Smooth Scroll In JS and jQuery

jQuery(document).ready(function () { jQuery('.processreachfind').click(function(e){ e.preventDefault(); jQuery('html, body').animate({...

 
 
 

Comments


© 2020 by syednazrulhassan

bottom of page