How to add multiple invisible recaptcha buttons in one page - javascript

I have an page where user can login and register. Looking at the HTML code from top to bottom, first goes Login form and then Register form. In the scripts.php file i have recaptcha api.js included.
<script src='https://www.google.com/recaptcha/api.js' async defer></script>
Here is buttons for login and register
<button type="button" class="g-recaptcha wo-btn" data-sitekey="6LdOroIgAAAAALVlmGY1ORhgqxX_i7eqCZHTRwpc" data-callback="loginFunction">Login</button>
<button type="button" data-sitekey="6LdOroIgAAAAALVlmGY1ORhgqxX_i7eqCZHTRwpc" data-callback="registerFunction" class="g-recaptcha wo-btn">Register</button>
The problem is that when I click "Login", everything is fine and I can click on it multiple times. But when I click on "Register", the callback works just only one time and when I try to click again, nothing happens.
Login and Register callbacks is just javascript functions with ajax request to the PHP backend.

Related

how do I call js script from angular button

I am trying to call this script <script src="products/products_list.js"></script> each time when I click on 'Add Button'.
Currently, this script is being called only once when the page load.
html code
test.html
<div class="col-md-1 form-group"><br/>
<input type="button" class="btn btn-primary" value="Add Button" ng-click="packageCtrl.add(rlCtrl)" ng-disabled="packageCtrl.disableAdd()"/>
</div>
<script src="products/products_list.js"></script>
Whatever is in that script needs to be placed in a function. Then a call to that function can be made in the click handler for that button.
My best guess is that whatever is in that JS file is just inline code that is being executed immediately upon load. If you want that code to be executed at specific times, it needs to be placed in a event handler to be executed when that event occurs.
Ultimately, you are not providing enough information to truly answer this questions.

Invisible reCaptcha iframe not showing, form stuck

I am loading two scripts on my websites:
<script src="scripts/my_site.js"></script>
<script src="https://www.google.com/recaptcha/api.js" async="" defer=""></script>
Where my_site.js looks like this:
... many other functions, not nested
function captachaCallback() {
console.log("Captcha");
}
... other functions
Then in my form I am using:
<button id="btnSubmit" class="g-recaptcha" data-sitekey="my_key" data-callback="captachaCallback">Send</button>
Whenever I press the button, a white half-transparent overlaying empty div appears, but nothing happens (console message doesn't appear) and the form is stuck.
I am using the latest Chrome.
Thanks in advance
The problem was that I had a CSS setting affecting all divs on my website.
div { overflow: hidden; }
Apparently this makes the popup window with the captcha test invisible.
Removing this setting solved the problem.
I'm suspecting that the element is going out of the visibility. So can you try adding data-badge="inline" to the recaptcha element in the html
<button id="btnSubmit" class="g-recaptcha" data-sitekey="my_key" data-badge="inline" data-callback="captachaCallback">Send</button>
Hope this helps.
You're not rendering the captcha.
The submit button is trying to verify the response of the captcha once the user completes the captcha by sending a callback to the function specified on data-callback. Since you haven't created the component it gets stuck in a loop.
The submit button cannot be the same tag where you load the CAPTCHA. You need to render the captcha in an empty tag.
Instead of:
<button id="btnSubmit" class="g-recaptcha" data-sitekey="my_key" data-callback="captachaCallback">Send</button>
Render it like:
<div id="captcha_element" class="g-recaptcha" data-sitekey="my_key" data-callback="captachaCallback"></div>
Wrap it up inside a form. You already have it, so just modify it.
Since you're specifying what function to run once the captcha is completed you don't need to worry about the submit button.
The structure should look something like this:
<form action="?" method="POST">
/// The other elements in your form
/// ...
<div id="captcha_element" class="g-recaptcha" data-sitekey="my-key" data-callback="captachaCallback"></div>
<br/>
<input id="btnSubmit" type="submit" value="Submit">
</form>
Also be sure to look up the documentation ;)
https://developers.google.com/recaptcha/docs/display

How to add everwebinar form directly to page instead of opening it in POP UP?

The project on which I am working, is to open the pop up form directly into page. See below:
When you will click on first button a pop up will open:
And there will need again to click on register button to open the webinar registration form:
Here is that form:
I want to open this form on first pop up instead of register button. I got this integration code form EverWebinar:
<link href="//events.genndi.com/assets/css/register_button.css" rel="stylesheet"><div style="margin:auto;width:300px;"><div class="embedded-joinwebinar-button"><button type="button" class="btn btn-default css3button" title="regpopbox_818182175026324685_7b22b2195f"><span>Register now</span></button></div></div><script src="//events.genndi.com/register.evergreen.extra.js" language="javascript" type="text/javascript" async></script><img src="//events.genndi.com/tracker?action=registration-evergreen&webicode=7b22b2195f&version=&memberid=818182175026324685" style="visibility:hidden; height:0px; width:0px; border:none;">
I want to open the webinar form directly on first pop up instead of register button there. Is there any possible way to do it?

Refresh Captcha , but also refreshing whole register form

Javascript Code
<script language="javascript" type="text/javascript">
function refreshCaptcha()
{
$("#captchaimage").attr('src','captcha_image.php');
}
</script>
Image Code
<img src="captcha_image.php" id="captchaimage">
Button Code
<button name="submit" class="btnRefresh" onClick="refreshCaptcha();">Refresh Captcha</button>
When i tried to click on refresh captcha button , it will refreshed the whole page. Any idea which causing the problem ?
<button>
by default has the attribute type="submit" which causes the form to submit.
Hence, adding type="button" to the button will suffice.
Because your form has property action, button triggers action behavior,then redirecting to action's url.
You can remove action or change button to a,or use event.preventDefault.

How to call LinkedIn authorize javascript from button

This line of sample code from LinkedIn API works perfectly.
<script type="IN/Login" data-onAuth="loadData"></script>
but it runs automatically as the web page loads. I'd like to invoke this script using a button or link on a webpage. The idea being that the webpage loads and waits until the user is ready to authenticate.
Ideally I would like the LinkedIn Login image to appear, and wait, until clicked.
Thanks.
Based on your comment, it looks like you only want to display the SignIn plugin if the user has manually clicked a button/element on the page. Something like this, using jQuery, should work:
On your page, you have a button:
<div id="buttonControl">
<input type="button" id="showLinkedIn" value="Show LinkedIn" onclick="showLinkedIn();" />
</div>
<div id="buttonContent" style="display: none;"></div>
In a script block in the <head> of the page, you have the showLinkedIn() onclick function:
function showLinkedIn() {
// insert the SignIn plugin
$('#buttonContent').html('<script type="IN/Login" data-onauth="loadData"><\/script>');
// tell the LinkedIn JavaScript code to re-parse the element containing the SignIn plugin
IN.parse($('#buttonContent')[0]);
// hide button trigger, if needed
$('#buttonControl').hide();
// show the LinkedIn control
$('#buttonContent').show();
}
$('#buttonControl').click(function(){
$('#buttonContent').html('<script type="IN/Login" data-onauth="loadData"></script>');
$('#buttonControl,#buttonContent').toggle();
IN.User.authorize(loadData);
});
slightly different as the 'IN.parse($('#buttonContent')[0]);' does not seem to work...
tested 'IN.User.authorize(loadData)' and it works well! Got it from: http://developer.linkedin.com/documents/inauth-inevent-and-inui
You need to clear the cookies from the following method like
IN.User.logout(callbackFunction, callbackScope);
You need to call this function on that button from which you want to log out.
Example using jquery:
$('#demo') .click(function()
{
IN.User.logout(console.log("logged out..."));
});

Categories