Search code examples
javascripthtmlrecaptcha

Event listener for successful Captcha verification

I've added a Re captcha v2 into my site and I want to call a function after it's successfully solved,

so far my code looks like this:

<body>
  <div style='visibility: hidden;position:absolute;' class="g-recaptcha" data-sitekey="6Lf2yr4aAAAAAPt4qOYdNAJPAB53lCkcDn">
  </div>

  <button id='submit' onclick="show_captcha()">Submit data</button>

  <div id="stat"></div>

  <script>
    function show_captcha() {
      var btn=document.querySelector('#submit');
      var cap=document.querySelector('.g-recaptcha');
    
      btn.style.visibility='hidden';
      btn.style.position='absolute';
      cap.style.visibility='visible';
      cap.style.position='relative';
    }
    
    
    document.querySelector('.g-recaptcha').addEventListener('change', (event) => {
      console.log('here');
      var cap=document.querySelector('.g-recaptcha');
      data=['xyz',document.querySelector('#g-recaptcha-response').value.toString()];
    
      if(cap.value=='')
       return;
    
      //function after captcha is solved goes here
      
    });
    
  </script>
</body>

the change event listener isn't working, so how can I achieve what I want?

Solution

  • Try to configure reCAPTCHA with a callback on successful validation. Have a look at ReCaptcha v2 client side events