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>
Related
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 a form in AngularJS application. I need to auto submit this form upon page load without using jquery because of cross domain issue.
When I submit the form by using a submit button it works and the target url loads in the browser. If I remove the submit button and try to submit in the onload event,
it does not work. The page displays just ";". Any idea why onload does not work here? Thank you!
<form name="myForm" method="post" action="#Model.Settings["URL"]" ng-controller="PostCtrl">
<input type="hidden" name="Name" value="{{Details.Name}}">
<input type="hidden" name="Amount" value="{{Details.Amount}}">
#*<button type="submit" class="action blue"><span class="label">Click here</span></button>*#
<script>
window.onload = function () {
document.myForm.submit();
}
</script>
</form>
I have some suggestions for you. But first you have to add an id to your form: 1: Go to your <html> element and call the onload function there --> <html onload="document.getElementById('yourform').submit();"> or 2: call the JavaScript function with php
<?php
echo "<script>document.getElementById('yourform').submit();</script>";
?>
Or 3: try to change your Script to
<script>
window.onload = function () {
document.getElementById('yourform').submit();
}
</script>
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.
My action function is not working. I am not sure if I missed something in my syntax. or you have to call it as a function in a different way. I am trying to put the form action in with JQuery instead of through the form to make sure that when it is done it goes back to the main page it called this from.
The old Code would load the form and give the user a blank screen instead of staying on the current page.
Old Code:
<form id="import_audit_form" name="import_audit_form" action='./edit_audits.php?action=process_import' method="post" enctype='multipart/form-data'>
New Code:
<script>
$(document).ready(function(){
$('#audit_submit').click(function(){
$('#import_audit_form').attr('action', 'edit_audits.php?action=process_import',{
function(data){
alert("Audit Imported");
}); //end import_audit_form
}); // End audit_submit
}); //End document function
</script>
<form id="import_audit_form" name="import_audit_form" method="post" enctype='multipart/form-data'>
<input type="submit" class="btn btn-default" name="audit_submit" id="audit_submit" value="TRANSFER" /></td>
</form>
I have included a simple form on the home page of our website that posts its results to a page named Results.aspx.
Instead of the form's results returning on the same page, I'd like it if the results opened in a new modal.
How is this accomplished? To recap, the form is on the home page, and on submit, the results should be shown in a new modal window.
<form action="Results.aspx" method="post" name="myForm" onsubmit="return validateForm()">
<div id="blank-box-form">
<h2>Looking For Medicare Advantage Plans?</h2>
<label for="zipcode1"> Please enter your zip code</label>
<input id="zipcode1" class="wpcf7" name="zipcode1" type="text" />
<input type="submit" />
</div>
I would suggest that you post the form using ajax. When the ajax-call is complete you populate the body of the modal with the response-data and open it up :)
Try
<form action="Results.aspx" target="_blank" method="post" name="myForm" onsubmit="return validateForm()">
But ass #digi recommend, you should use ajax to get the results and then insert them in a modal.
This could guide you:
<script>
$("form").submit(function(event){
event.preventDefault();//to stop the submit
$.get("url","data",function(results){
$("#someModalStyledDiv").html(results).show();
});
});
</script>
http://api.jquery.com/jquery.get/