I need help in order to validate our form to be submitted via google recaptcha, I have successfully implemented the code however the form still allows submission without the recaptcha, how do I make it required field? not very good with java script here, any assistance is greatly appreciated
also if an error message would pop up so that asking people to complete recaptcha that would be great, thanks a lot
CSS
<script src='https://www.google.com/recaptcha/api.js'></script>
Html
<div class="form">
%form_errors%
<div align="right"><p><strong>* Denotes mandatory field</strong></p></div>
<fieldset>
<legend>Your enquiry details</legend>
<div class="form-row">
%question_label_746942_q7%
%question_field_746942_q7%
</div>
</fieldset>
<div class="g-recaptcha" data-sitekey="google site key"></div>
<div class="form-row-submit" align="right">
%submit_button%
</div>
</div>
You can by default set the submit button to disabled and only enable it on the callback function from reCAPTCHA.
Check this: https://developers.google.com/recaptcha/docs/display
Make sure to validate the form on the server side too.
UPDATE
Add this in your :
<script>
function enableBtn(){
document.getElementById("submit_details").disabled = false;
}
</script>
And then call the above function in the reCAPTCHA div in your form as follows:
<div class="g-recaptcha" data-sitekey="YOUR_KEY" data-callback="enableBtn"></div>
<button type="submit" id="submit_details" disabled>Send</button>
This will have the submit button disabled when the page loads so the user won't be able to submit the form. The button is enabled only after the user passes the "I'm not a robot" test.
Again, remember to validate the form data on the server side.
<form action="" method="post" onsubmit="return validateRecaptcha();">
</form>
<script>
function validateRecaptcha() {
var response = grecaptcha.getResponse();
if (response.length === 0) {
alert("You need to fill the captcha");
return false;
} else {
alert("validated");
return true;
}
}
It should be <button type="submit" id="submit_details" disabled>Send</button>
Not if="submit_details"
The function is using getElementById("submit_details"), so it is looking for an ID of "submit_details" in order to remove the disabled condition of the button by setting disabled = false instead of disabled = true which is the default condition that is set inline in the <button> tag.
Related
I have a form with id theForm which has the following div with a submit button inside:
<div id="placeOrder"
style="text-align: right; width: 100%; background-color: white;">
<button type="submit"
class='input_submit'
style="margin-right: 15px;"
onClick="placeOrder()">Place Order
</button>
</div>
When clicked, the function placeOrder() is called. The function changes the innerHTML of the above div to be "processing ..." (so the submit button is now gone).
The above code works, but now the problem is that I can't get the form to submit! I've tried putting this in the placeOrder() function:
document.theForm.submit();
But that doesn't work.
How can I get the form to submit?
Set the name attribute of your form to "theForm" and your code will work.
You can use...
document.getElementById('theForm').submit();
...but don't replace the innerHTML. You could hide the form and then insert a processing... span which will appear in its place.
var form = document.getElementById('theForm');
form.style.display = 'none';
var processing = document.createElement('span');
processing.appendChild(document.createTextNode('processing ...'));
form.parentNode.insertBefore(processing, form);
It works perfectly in my case.
document.getElementById("form1").submit();
Also, you can use it in a function as below:
function formSubmit()
{
document.getElementById("form1").submit();
}
document.forms["name of your form"].submit();
or
document.getElementById("form id").submit();
You can try any of this...this will definitely work...
I will leave the way I do to submit the form without using the name tag inside the form:
HTML
<button type="submit" onClick="placeOrder(this.form)">Place Order</button>
JavaScript
function placeOrder(form){
form.submit();
}
You can use the below code to submit the form using JavaScript:
document.getElementById('FormID').submit();
<html>
<body>
<p>Enter some text in the fields below, and then press the "Submit form" button to submit the form.</p>
<form id="myForm" action="/action_page.php">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br><br>
<input type="button" onclick="myFunction()" value="Submit form">
</form>
<script>
function myFunction() {
document.getElementById("myForm").submit();
}
</script>
</body>
</html>
HTML
<!-- change id attribute to name -->
<form method="post" action="yourUrl" name="theForm">
<button onclick="placeOrder()">Place Order</button>
</form>
JavaScript
function placeOrder () {
document.theForm.submit()
}
If your form does not have any id, but it has a class name like theForm, you can use the below statement to submit it:
document.getElementsByClassName("theForm")[0].submit();
I have came up with an easy resolve using a simple form hidden on my website with the same information the users logged in with. Example: If you want a user to be logged in on this form, you can add something like this to the follow form below.
<input type="checkbox" name="autologin" id="autologin" />
As far I know I am the first to hide a form and submit it via clicking a link. There is the link submitting a hidden form with the information. It is not 100% safe if you don't like auto login methods on your website with passwords sitting on a hidden form password text area...
Okay, so here is the work. Let’s say $siteid is the account and $sitepw is password.
First make the form in your PHP script. If you don’t like HTML in it, use minimal data and then echo in the value in a hidden form. I just use a PHP value and echo in anywhere I want pref next to the form button as you can't see it.
PHP form to print
$hidden_forum = '
<form id="alt_forum_login" action="./forum/ucp.php?mode=login" method="post" style="display:none;">
<input type="text" name="username" id="username" value="'.strtolower($siteid).'" title="Username" />
<input type="password" name="password" id="password" value="'.$sitepw.'" title="Password" />
</form>';
PHP and link to submit form
<?php print $hidden_forum; ?>
<pre>Forum</pre>
I'm creating a login form and in that if any input is wrong then i want to stay on the same page and notify the client to enter the correct input
I want to stay on this page http://localhost:8080/loginpage/ but after every click i'm redirected to http://localhost:8080/loginpage/?UserName=UserName&pword=&ConfirmPassword=&Email=Email&FirstName=First+Name&LastName=Last+Name&cars=male&Signup=Signup .
I have written a code for this but it does not seem to work.
if(t!==0)
{
var er="Email-id already exists";
window.location.reload(false);
document.getElementById("nemail").value=er;
document.getElementById("username").value=username;
document.getElementById("pword").value="";
document.getElementById("confpwd").value="";
document.getElementById("fname").value=fname;
document.getElementById("lname").value=lname;
document.getElementById("gender").value=gender;
}
I have tried to use several other methods like
window.location.replace('/loginpage/');
window.location.href="/loginpage/index.html";
But none of them works.
Please help!
There are two ways to prevent a form to submit.
Set form onsubmit="return false".
Register a submit event on a from. In the callback call event.preventDefault();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>1 way to prevent form to submit via onclick attribute</h2>
<form action="#submit-from-1-way" onsubmit="return validate(this)"><!--set onsubmit="return false"-->
<input name="value"/>
<button type="submit">Submit</button>
</form>
<h2>2 way to prevent form to submit via submit event</h2>
<form id="form" action="#submit-from-2-way"><!--set onsubmit="return false"-->
<input name="value"/>
<button type="submit">Submit</button>
</form>
<script>
console.log(location.href+'#'+location.hash+'?'+location.search);
function validate(form) {
return $(form).find('input').val();
}
$('#form').submit(function (e) {
if (!validate(this)) e.preventDefault();
});
</script>
You can use preventDefault() on the click event for a given html object. This will prevent the browser from taking the default action on a specific HTML object.
For example to prevent actoin on a link:
<body>
Click Me
<script>
function dontGo(event) {
event.preventDefault();
}
document.getElementById("clickMe").addEventListener("click",dontGo);
</script>
</body>
i have installed google recaptcha V2 on my site, and i want automatically submit a form (WITHOUT PRESS ANY BUTTON) when google recaptcha is completed, here is my code...
$secretKey='HIDDEN';
$responseKey=$_POST['g-recaptcha-response'];
$IP=$_SERVER['REMOTE_ADDR'];
$url="https://www.google.com/recaptcha/api/siteverify?secret=$secretKey&response=$responseKey&remoteip=$IP";
$response=file_get_contents($url);
$response=json_decode($response);
if($response->success){
....execute some php
}
And here is my form....
<form action="" method="post" class="Form" enctype="multipart/form-data">
<div class="g-recaptcha" data-sitekey="HIDDEN"></div>
</form>
Thanks for read, have a nice day!
add a callback like this
<div class="g-recaptcha" data-sitekey="your-key-here" data-callback="submitForm" ></div>
Then include something like this in your javascript code
<script>
var submitForm = function () {
$("#formID-goes-here").submit();
}
</script>
I have used Google ReCaptcha at the bottom of my sign up form and used JavaScript to validate it so that if the ReCaptcha isn't completed, then the form won't submit and an alert will come on screen.
However, I have 3 other submit buttons that I use as navigation at the top of my page and if you click one of these at any point, the alert message to complete the captcha appears.
My JavaScript looks like this:
JavaScript
$('form').on('submit', function(e) {
if(grecaptcha.getResponse() == "") {
e.preventDefault();
alert("You Must Complete The CAPTCHA Form!");
} else {
alert("Complete!");
}
});
The navigation-like buttons I use:
Buttons
<form action="#">
<input type="submit" id="buttons" value="Enter"/>
</form>
Submission submit button at the bottom of the form:
Submit
<form action="?" method="POST">
<div id="html_element"></div>
<br>
<input type="submit" value="Submit">
</form>
I have tried adding:
id="final-submit">
to the final button and then changing .on('submit') to .on('#final-submit')
But then the alert doesn't appear at all.
Am I doing this ID technique wrong or would this simply not work?
Cheers
Edit
I don't want to change my <input type="submit"> into <a href="#" id="button">
You can add id's on the forms to differentiate one forms submission from other. Say the id of the form with recaptcha is "formid". Then use the following and all should be fine
$('#formid').on('submit', function(e) {
if(grecaptcha.getResponse() == "") {
e.preventDefault();
alert("You Must Complete The CAPTCHA Form!");
} else {
alert("Complete!");
}
});
Ive got several buttons, passing different params to the same function. That function will eventually do lots of client side processing but first it needs to validate. Validation is working fine, but upon success, I need to reset the form. In my fiddle below, you can see that the .resetForm() call does nothing, and if I manually clear the field, it throws validation errors like I was trying to submit.
see my fiddle: http://jsfiddle.net/uT6pw/10/
html:
<form id="frm" method="post" onsubmit="return false;">
<input type="text" id="FName" class="required">
<span class="field-validation-valid" data-valmsg-for="FName" data-valmsg-replace="true"></span>
<button id="btn1" onclick="addContact('1')">1</button>
<button id="btn2" onclick="addContact('2')">2</button>
<button id="btn3" onclick="addContact('3')">3</button>
</form>
javascript:
function addContact(num){
var v = $("#frm").validate()
if (v.form())
{
v.resetForm();
//$("#frm").validate().resetForm()
$("#FName").val('');
}
}
Thanks!
I have not heard about resetForm, try this:
form.reset();
Update: You have button tags that post form, this is the reason form gets validated when you click them. Instead change <button> to <input type="button"/>
See fiddle