How to call google recaptcha code on submit button click

Question

This is my code

$(document).ready(function(){

$(":submit").click(function(){

var onloadCallback = function() {
    $( "#submitlogin" ).each(function() {
        grecaptcha.render($( this ).attr('id'), {
            'sitekey' : '6Lcjvi4UAAAAAIR7_ckItF2HfMEFHx427WUDdGDk',
            'callback' : onsubmitlogin
        });
    });

     $( "#submitsignup" ).each(function() {
        grecaptcha.render($( this ).attr('id'), {
            'sitekey' : '6Lcjvi4UAAAAAIR7_ckItF2HfMEFHx427WUDdGDk',
            'callback' : onsubmitsignup
        });
    });

    $( "#submitforgotpass" ).each(function() {
        grecaptcha.render($( this ).attr('id'), {
            'sitekey' : '6Lcjvi4UAAAAAIR7_ckItF2HfMEFHx427WUDdGDk',
            'callback' : onsubmitforgotpass
        });
    });


};
});
});

I want to load onloadcallback function, only when submit button is clicked.

But seems like the code inside it, never gets called. What's the problem?

If the problem is not in this code, then let me know, I will update my answer with more code from my original website

And never make your google key visible to others. Change that before posting questions — Sindhoor, Sep 01 '17 at 09:02
It is not secret key @Sindhoor People can see it in source code anyway, i guess??? — Toby, Sep 01 '17 at 09:11

score 0 · Answer 1 · answered Sep 01 '17 at 08:52

0

You defined onloadcallback but never called it when button is clicked. This will work:

// Define callback function
var onloadCallback = function() {
  $("#submitlogin").each(function() {
    grecaptcha.render($(this).attr('id'), {
      'sitekey': '6Lcjvi4UAAAAAIR7_ckItF2HfMEFHx427WUDdGDk',
      'callback': onsubmitlogin
    });
  });

  $("#submitsignup").each(function() {
    grecaptcha.render($(this).attr('id'), {
      'sitekey': '6Lcjvi4UAAAAAIR7_ckItF2HfMEFHx427WUDdGDk',
      'callback': onsubmitsignup
    });
  });

  $("#submitforgotpass").each(function() {
    grecaptcha.render($(this).attr('id'), {
      'sitekey': '6Lcjvi4UAAAAAIR7_ckItF2HfMEFHx427WUDdGDk',
      'callback': onsubmitforgotpass
    });
  });
};

// Use onloadCallback as event handler
$(":submit").click(onloadCallback);

answered Sep 01 '17 at 08:52

dfsq

191,768
25
236
258

The code gets loaded with the page load. I want the code to load only on click. – Toby Sep 01 '17 at 09:13
@Toby you need to define function first and then use it as event handler. it doesn't initialise recapchas until you click. – dfsq Sep 01 '17 at 09:46
I mean, I saw network tab. And google load images when the page is loading. I want google to load images only when submit button is clicked. – Toby Sep 01 '17 at 10:09

How to call google recaptcha code on submit button click

1 Answers1

Linked