Invisible reCaptcha iframe not showing, form stuck - javascript

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

Related

Button onclick event does not redirect to another page although it calls the functions

The following code does not redirect to the given webpage
<form>
<button onclick='window.location.replace("../magnet/index.php")'>Replace document</button>
</form>
It is so because when you create a button within the form tags, it is created as a submit button by default. So, instead of redirecting the webpage, it submits the data and reloads the current webpage.
The following code will do the required job because now, the type of the button is button and not submit.
<button type="button" onclick='window.location.replace("../magnet/index.php")'>Replace document</button>
Even better, you can place your redirect code into a JavaScript function. Then you can call that function from within your HTML code. Like this
<script type="text/javascript">
<!--
function redirectTo(sUrl) {
window.location = sUrl
}
//-->
</script>
<button onclick="redirectTo('../magnet/index.php')">Get HTML!</button>
Hope this will work for you. Cheers
The answer was to add type="button" like #shivamag00 explained.
But be careful with replace(), it's not possible to use "back" to navigate back to the original document since you are replacing the history state.
An alternative is to use the assign() function, (documentation here)
Suppose you have a base url as
www.website.come
and want to go to
www.website.come/new-page
it's simple
<button type="button" onclick='window.location.assign("new-page")'>Go to new page</button>
It's worked for me, hope it's useful for someone else.

Page transition on form button?

I'm trying this on my site
http://www.fasw.ws/demos/transitions1/slide1.html
everything is working good but not when i add data-ftrans="slide" to a form button.
example:
<form action"http://google.com"> <button data-ftrans="slide" type="submit" style="height:50px; font-size:20px;">Submit</button>
What does i need to change to get this working ?
I think you must change your button to a depend on the context.
And must have 2 attribute 'href' and 'data-ftrans'. It'll run function slideTo(href, effect, pushstate) in the context.
href: one html page
data-ftrans: transition type
Maybe, you want to submit then change to another page (but not submit page)
<form action="your server script" method="post">
<button click="ajax_submit"></button>
Hide
</form>
<script>
function ajax_submit(){
//do some ajax code
//when success
//a.click();
}
</script>

Return to the previous page with inputs

Really unsure about the title question. Feel free to suggest. :)
Hi guys! I created a very simple code, that would represent my web.
Here is my home page:
<html>
<script type="text/javascript">
function getPage(linkPage,variables,divName){
$.get(linkPage + "?" + variables,function(data){$(divName).html(data);});
}
function show(){
//functionName("path","data","idName");
getPage("AjaxPages/hi.php","","#container");
}
</script>
<body>
<div id="container">
First Name<input type="text" />
<input type="button" value="next" onClick="show();"/>
</div>
</body>
</html>
Basically, it ask for information, Name for example. When the button NEXT is click it will call a javascript function that will call a certain page or the NEXT PAGE that will load on the div with the Id Container.
NEXT PAGE
On the next page, it will then ask another question, like Last Name for example. But then, I want to go back to the previous page to make same changes.
HERE is the code:
<script type="text/javascript">
function show(){
ajaxgetdata("index.php","","#container1");
}
</script>
<div id="container">
Last Name<input type="text" />
what to make changes on the previous page?<input type="button" value="back" onClick="show();"/>
</div>
When button back is clicked, it will just call the previous page, but will not include the text that you input on the textbox.
I know that it happens because it just call the page..
Is there a way? that when back button is clicked, it will reload the previous page, with all the contents/inputs.
:) :( :'( :/ :|
Don't load any additional pages. Do everything with AJAX.
If you don't want, some server-side script may help :D
If you can use HTML5 in your site, you can take a look at the History API which can handle navigation and fires a "popstate" event, to which you can pass data.
There's a good example here:
http://diveintohtml5.info/history.html
You could do something like this:
window.addEventListener("popstate", function(e) {
if(!e.state || !e.state.firstName) {
return;
}
document.getElementById('firstName').value = e.state.firstName;
});
That even will trigger everytime you go back or forward, and you could just organize some function or array with the information you need.
Hope it helps.

How to show a hidden div with javascript when submitting a form?

I'm not really familiar with jquery, but am trying to get a simple animated gif to show when a form is submitted. When clicking 'submit' to upload an image I want to show gif so that users know that image is being uploaded. The submit button has an id="submit" and also an onClick="return confirm('message')"
I have the div code containing the gif:
<div id="loading" style="display:none">
<img src="images/hand_timer2.gif" alt="loading" />
</div>
which is hidden. And it does show if I remove the style. Fair enough. But when I try to show it with the following javascript it doesn't show:
<script type="text/javascript">
$(function(){
$('#submit').click(function(){
$('#loading').show();
});
});
I have
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"
type="text/javascript"></script>
in a separate PHP header file. As far as I can see it's the only reference to jquery library, but I do have other javascript codes that all work. I just can't get this one to work. Can anyone point out what I'm doing wrong and why I can't get the div to show gif when clicking submit?
I believe the problem could be that your inline onClick="return confirm('message')" prevent the click-event from reaching your click-event listener attached with jQuery - not sure though. Anyhow, instead of listening for a click-event on the submit-button, I would listen for the submit event on the form, that will fire when the form is actually submitted (a form can usually be posted by other means than clicking the submit button as well - through the Enter key for instance).
$('#idOfYourForm').on("submit", function () {
$('#loading').show();
});
Side note:
You don't close the style attribute properly on your loading div (notice that the > is blue):
<div id="loading" style="display:none>

jquery form submit

I have a jquery fancyzoom box. In that box ,I have a contact form which sends an email on submission. But I am not able to call form submit function due to fancyzoom.
Code is like :
("req_quote.php")
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/fancyzoom.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#popup1_link').fancyZoom({width:610});
$("#submit").css('cursor', 'pointer');
$('.reqfrm').submit( function(){
alert("hell");
});
});
</script>
<body>
<form class="reqfrm" id="frm">
<input type="text" name="name" />
<input type="submit" name="submit" id="submit" value="Submit" />
</form>
</body>
</html>
Above file is included in "index.php" which contains the actual link to open the form in fancyzoom box.
(index.php)
< a href="#popup1" id="popup1_link">< div class="blink">Request a Quote< /a>"
If I remove $('#popup1_link').fancyZoom({width:610}); then i get alert on submission otherwise it goes on form action directly.
Are you getting any JavaScript errors with the fancyZoom call in? Are you including the script file you need to use it? It's hard to say without seeing some more data, or a jsbin / jsfiddle.
The form is submitted in the fancybox js file.
As mentioned by Raul, you need to provide more info for us to help out. You could try any of these things:
See if you can reproduce this issue within a simple html file, that doesn't have any of the extra stuff that your current page may have. If the issue still persists, put it into jsFiddle and post the link here.
If you haven't already, install the Firebug addon for Firefox, and use it's console to check for any JS errors.
Have a look at the jsFiddle that I've created. Is this similar to what you are doing? Mine works wihtout any issues.

Categories