Recently i was trying to use Google's invisible ReCaptcha, so i've copied the same example as Google mentioned in their official documentation; but the form doesn't submit, and we cant proceed to next page(form action page).
Client snippet:
<html>
<head>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script>
function onSubmit(token) {
document.getElementById("myform").submit();
}
function validate(event) {
event.preventDefault();
if (!document.getElementById('field').value) {
alert("Please enter your name.");
} else {
grecaptcha.execute();
}
}
function onload() {
var element = document.getElementById('submit');
element.onclick = validate;
}
</script>
</head>
<body>
<form id='myform' method="post" action="test.php">
Name: (required) <input id="field" name="field">
<div id='recaptcha' class="g-recaptcha"
data-sitekey="mysitekeyxXX"
data-callback="onSubmit"
data-size="invisible"></div>
<button id='submit'>submit</button>
</form>
<script>onload();</script>
</body>
</html>
Server snippet (test.php):
var_dump($_POST['g-recaptcha-response']);
there is other code for google's verification process but it doesn't get into this page anyway (the action page)
I'm not sure if you have copied everything 1:1 or Google did some docs update but this function is a bit different from reCAPTCHA's one click here:
function onSubmit(token) {
document.getElementById("myform").submit(); // <- this
}
and it won't work because you have a button with ID "submit".
<button id='submit'>submit</button>
To make it submit correctly you have to rename button's id to something else.
Also event.preventDefault() prevents of executing default form submit so you should leave it as it is. After fixing this name problem it will work perfectly!
Related
I am rather new to Javascript and am currently trying some stuff out with it.
I stumbled upon a tutorial in w3schools on how to change the color of a button after pressing it.
I wanted to do something similar, but instead load another page with some search query results when the button is pressed.
My html code for this is the following:
<html>
<head>
<meta charset = "utf-8">
<title>Test</title>
<script type="text/javascript" src="search.js" defer></script>
</head>
<body>
<header>
<h1>Test</h1>
</header>
<main>
<form>
<input type="search" id="query" placeholder="Search...">
<button id="submit">Search</button>
</form>
</main>
</body>
</html>
And here is the corresponding javascript code:
const searchbutton = document.getElementById("submit");
searchbutton.addEventListener("click", testmethod);
function testmethod() {
window.location.href="search.html";
}
The code itself seems to be working, but whenever the button is pressed, the search.html page loads for a split second before reverting back. I even copied the code from the w3schools tutorial directly but it's still not working.
Any idea what causes the page to get changed back after the button is pressed?
Thanks in advance!
Change location or submitting a form will (re)load the (target) page - you are doing BOTH.
You can start by passing in the event and using event.preventDefault() in the testmethod and then do something else than changing location
I strongly suggest to NOT assign events to a submit button, instead use the submit event
You also need to wrap in a page load event listener or move the script to after the form
ALSO never call anything submit in a form
function testmethod(e) {
e.preventDefault(); // stop submission
console.log(this.query.value);
this.subbut.style.color = "red";
}
window.addEventListener("load", function() {
document.getElementById("myForm").addEventListener("submit", testmethod);
});
<main>
<form id="myForm">
<input type="search" name="query" id="query" placeholder="Search...">
<button name="subbut">Search</button>
</form>
</main>
If you do not need to submit the form, use a type="button" and no form
function testmethod(e) {
console.log(document.getElementById("query").value)
this.style.color = "red";
}
window.addEventListener("load", function() {
document.getElementById("subbut").addEventListener("click", testmethod);
});
<main>
<input type="search" id="query" placeholder="Search...">
<button type="button" id="subbut">Search</button>
</main>
I'm trying to implement new invisible recaptcha by google.
But i have required inputs and should validate the form before recaptcha execute.
I got an error on recaptcha callback function like that:
Uncaught TypeError: document.getElementById() submit is not a function
So how can i submit the form after validate and recaptcha executed?
HTML:
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<form id="form" action="?" method="post">
Name: (required) <input id="field" name="field">
<div id='recaptcha' class="g-recaptcha"
data-sitekey="6LcAmBAUAAAAAFukLQIkOIICuBBxKEdn-Gu83mcH"
data-callback="onSubmit"
data-size="invisible"></div>
<button id='submit'>submit</button>
</form>
<script>onload();</script>
Javascript:
function onSubmit(token) {
alert('Thanks ' + document.getElementById('field').value + '!');
document.getElementById('form').submit(); // This is error line
}
function validate(event) {
event.preventDefault();
if (!document.getElementById('field').value) {
alert("Please enter your name.");
} else {
grecaptcha.execute();
}
}
function onload() {
var element = document.getElementById('submit');
element.onclick = validate;
}
JSFiddle: http://jsfiddle.net/dp1cLh28/6/
I found the solution.
Issue is button id named as submit (button id="submit") conflicting with .submit() function.
When i change the button id, it works!
Change the button id:
<button id='action'>Submit</button>
^ submit > action or whatever
Check your domain whitelist
I had this error and could not solve it until I found out the error was that I simply had not added the correct domain to the domain whitelist.
The domain error does not appear on the console and I had not noticed the tab that displays the error on the page (below):
In my case, I had an input (type="submit") tag in the form instead of a button. The name of the input was conflicting with the submit function.
The solution was to give the input tag a name different from "submit":
<input type="submit" name="anything-except-submit">
I had to name the tag explicitly, because the name was defaulting to "submit" from the type attribute.
It is also important to note that the callback will only be called when the user successfully solves the reCAPTCHA, so if your callback is doing any form validation you must call
grecaptcha.reset();
if the validation fails. That means that the user will have to solve the reCAPTCHA again, but otherwise he would not be able to submit the form after making corrections.
This looks very simple but I cant get it working. Im not experianced in web design but here is the following:
I am trying to make input bar(like search box) that when entered specific text it redirects you to other page or makes somethign else.
Here is what I have so far.
<!DOCTYPE html>
<html>
<body>
<form method="post">
<input id="search" type="text"/>
<button onclick="return abc()">test</button>
</form>
<script>
function abc() {
var textt = document.getElementById("search");
if (textt.value == "test") {
window.location.assign("http://www.google.com")
}
}
</script>
</body>
</html>
http://jsfiddle.net/uvnyd8vz/1/
this just refreshes page and thats it. Any ideas? thanks!
Compare the value as string
Like
textt.value =="test";
Also inside the function write
event.preventDefault();
This will stop the submit action of submit button
Also specify the else condition i.e.
else{return false;}
Adding event.preventDefault(); to function fixed my problem! thanks
I know very little javascript. after going page to page, I created this, hoping this would work. but for some reason, I have no idea why this doesn't work.
<form onsubmit="goToPage()" method="get">
<input id="url">
<input type="submit">
</form>
<script>
function goToPage()
{
var initial = "http://www.youtube.com/embed/";
window.location.replace(initial+document.getElementById("url").value);
}
</script>
Now, I thought when I submitted the form, It would run toToPage(), and redirect me to the embedded version for youtube. However, it's not.
I found that I could do onclick="goToPage()" for the input, but I don't want to have to click the input. I want the ability to either click "enter" or click on submit.
You must return false in onsubmit function, so the page will redirect not submitted by form.
<form onsubmit="return goToPage()" method="get">
<input id="url">
<input type="submit">
</form>
<script>
function goToPage() {
var initial = "http://www.youtube.com/embed/";
window.location.replace(initial+document.getElementById("url").value);
//window.location.href = initial + document.getElementById("url").value;
return false;
}
</script>
This is the javascript code im using.
<script language="javascript" type="text/javascript">
function cancelevent()
{
input_box=confirm("Are you sure you want to cancel?");
if (input_box==true) {
document.cancelevent.submit();
} else {
}
}
</script>
This is the form thats being submitted:
<form name=cancelevent method="post" action="whor.php">
<input type="hidden" name="owner" value="owner">
Cancel
</form>
I have this form on 2 different pages. One page it works, the other, i get this error
Error: document.cancelevent.submit is not a function
Ive literally copy and pasted the code from the working page to the 2nd page....no idea what is going on or why it would do this.
I think the problem is that the HTML form and the javascript function have the same name!
Put an id on your form
<form id="cancelEventForm" name=cancelevent method="post" action="whor.php">
And use
document.getElementById('cancelEventForm').submit();