So I've inserted the Google Captcha validation script to my webform using the official documentation which can be found here: https://developers.google.com/recaptcha/docs/display#render_param
Despite me following the documentation to the letter, why am I still able to submit a form without checking the Captcha box? Forgive my arrogance by I thought the whole idea of this CAPTCHA service was that the user would not be able to submit a form without checking the CAPTCHA box so the webmaster can weed out the bots?
The end result looks fantastic, I have the CAPTCHA box on my website but right now, you may as well ignore it.
I don't see the point of Google investing time in writing documentation for this script when you can still use a form without the need to check the box. They may as well just not write said documentation because the result is still the same: scratching my head and confused.
Below is the code with only the relevant part of my form. Can anyone shed any light on what I'm missing here, then whoever can help should definitely consider a career writing coding help documentation for Google because clearly the individuals they employ at the moment - well - need I saw more?
Many thanks and all the best,
<html>
<head>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
<form action="<PHP File Directory>" enctype="multipart/form-data" method="POST">
<div class="g-recaptcha" data-sitekey="<key>"></div>
<br/>
<input type="submit" value="Submit">
</form>
</body>
</html>
I use this jquery function to check whether captcha is clicked or not before submission. Otherwise you have to validate the same after form submission. You will have to apply id to the form. Also place a div with class 'msg-error' just above recapthca div in the form.
// to enable recaptcha click validation before form submission
var form = $('#contact-form');
form.submit(function(event){
event.preventDefault();
var $captcha = $('#g-recaptcha-footer' ),
response = grecaptcha.getResponse();
console.log(response);
if (response.length === 0) { console.log("captcha not clicked)");
$( '.msg-error').html( "<div class='alert alert-danger mb-0 pb-0' role='alert'> reCAPTCHA is mandatory!</div>" );
if( !$captcha.hasClass( "error" ) ){
$captcha.addClass( "error" );
return false;
}
} else {
$( '.msg-error' ).text('');
$captcha.removeClass( "error" );
form.unbind('submit').submit();
}
});
Related
I'm trying to implement firebase on a Kirby website (a CMS run on PHP) so visitors can mark subpages to show up as links on the landing page.
To do this, I've constructed a form where a user adds their name when on the subpage to highlight it. The form doesn't submit when the button is clicked, but instead uses JS to add a document to Firebase (where it can be approved or deleted).
I'd like to prevent abuse and am interested in adding Recaptcha as a step when the visitor "submits" the page.
A simplified version of my code looks like this.
HTML:
<form id="add-item" action="?" method="POST">
<label for="f-name">Submitted by:</label>
<input type="text" id="f-name" name="f-name" placeholder="your name">
<button type="submit">Submit</button>
</form>
JS:
document.querySelector("#add").addEventListener("click", function(e){
const fName = document.querySelector('#f-name').value;
tableRef.get().then(function(querySnapshot) {
var uid = Date.now().toString(36) + Math.random().toString(36).substr(2);
if(fName === true){
tableRef.doc('item-'+uid).set({
contributor: fName,
})
}
});
e.preventDefault();
return false;
})
I've found answers to enable Recaptcha with Firebase that use Firebase hosting, or as a method for sign in:
Using recaptcha with Firebase
How to use it with Angular or React:
Google/Firebase reCaptcha not working with angular
Firebase: Invisible reCaptcha does not work in React JS
I am wondering how this can be done using just HTML (no app framework), or with PHP, and without a login?
I am very amateur web developer, so really appreciate any insights on this! I apologize in advance if this is an obvious question. Thank you!
here’s the code how you can add recaptcha but I’ll suggest you to use Php in the backend to verify the status :
First add this in head tag
<script src='https://www.google.com/recaptcha/api.js'></script>
Then add the site key and block for error message
<div class="g-recaptcha" id="rcaptcha" data-sitekey="site key"></div>
<span id="captchaStatus" style="color:red" /></span>
Then add script tag :
<script>
function checkCaptcha(form)
{
var v = grecaptcha.getResponse();
if(v.length == 0)
{
document.getElementById('captchaStatus').innerHTML="Captcha code is empty";
return false;
}
else
{
document.getElementById('captchaStatus').innerHTML="Captcha completed";
return true;
}
}
</script>
I'm very new to coding, so please forgive me if this is a dumb question.
I'm working on an assignment where I have to add functionality and styles to an existing bootstrap HTML doc. The purpose is to allow people to enter a dollar amount into an input field either by typing in an amount or by clicking buttons that populate the field with set amounts. One of my instructions was to update the donate submit button so that it appends the chosen donation amount to the "/thank-you" URL.
This is what I have for the input field:
<form id="amountSend">
<input type="text" class="form-control donation-amount-input" placeholder="Other" id="other-amount"/>
</form>
This is what I have for the button:
<button id="donateBtn" type="submit" action="/thank-you"
method="get">DONATE<span class="metric-amount"></span></button>
And I was thinking that the jQuery would look something like this, though the submit function is not currently giving me any visible results.
$("#donateBtn").click(function() {
if (!$.isNumeric($("#other-amount").val())) {
$("#dataWarning").show();
$(".metric-amount").hide();
$(".metric-message").hide();
} else {
$("#amountSend").submit(function() {
var url = "/thank-you";
$(".metric-amount").appendTo("url");
});
}
})
I also got some decent results using a PHP method:
<form id="amountSend" method="post" action="/thank-you.php">
<input type="text" class="form-control donation-amount-input" placeholder="Other" id="other-amount" name="donation"></input>
</form>
<button id="donateBtn" type="submit">DONATE<span class="metric-amount"></span></button>
<script>
$("#donateBtn").click(function() {
if (!$.isNumeric($("#other-amount").val())) {
$("#dataWarning").show();
$(".metric-amount").hide();
$(".metric-message").hide();
} else {
$("#amountSend").submit();
}
});
</script>
This one will open the PHP file I set up (/thank-you.php, which i have stored just in the same root folder as my main HTML doc), but all the browser gives me is the raw HTML code of the PHP file. Here's the code I have in the PHP file:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
Thank you for your donation of
<?php echo $_POST["donation"]; ?><br>
</body>
</html>
Anyway, I guess I'm wondering if I'm on the right track? Should I pursue the jQuery or PHP method? Can I even do this using only jQuery? I've seen a few posts on this subject already, but I thought I'd make a new one since the ones I've seen are all fairly vague, I haven't seen the same answer twice, and I'm not sure I fully understand exactly what I'm trying to accomplish, in terms of a visual confirmation of results.
Thanks!
First of all, you have several issues with your code.
Number one: The formulary you have there is bad coded, the form tag needs to have the action and method attributes, not the submit button.
And in top of that, the submit button needs to be inside the form tag, if is not in there, it will not have and kind of effect.
Number two: If you are gonna submit the formulary to a php file and handle the request there ,you need the file to be running on a server (local or whatever). PHP is a server language, if you open the file directly in a browser, it will show you the code it has inside and will not work.
Hope it helps!
This may be a stupid question so I'm sorry I'm new to web development. I am trying to write a page so it disables the search button until the reCAPTCHA is clicked (I know this can be circumvented by a spammer so this is not my concern). The way I have it currently set up is like this:
<div id="search_area">
<script type="text/javascript">
function enableButton() {
document.getElementById('search_submit').disabled = false;
}
</script>
<input id="ch_search" size="50" type="text"/><button class="search_button" id="ch_search_submit" disabled="true">Search</button>
<script src='https://www.google.com/recaptcha/api.js'></script>
<div class="g-recaptcha" data-sitekey="XXXXXXXXXX" data-callback = "enableButton()" ></div>
</div>
Currently just for initial testing I don't have a php validation checking form. When I check the text box and it turns green it is not enabling the search button as I would have thought it would. Can anyone point me in the right direction as to why this isn't working? Thank you for any help sorry about being a newbie.
I realized my problem was I was calling enableButton() and for it to work it needed to be enableButton without the parentheses.
I'm using Stripe for payment processing, which uses an inline <script></script> within a <form> element, like so:
<form action="" method="POST" id="payButton" style="display:none;">
<script
src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="myprivatekeygoeshere"
data-amount="4900"
data-name="Sample Name"
data-description="We use Stripe for 100% secure payment processing."
data-image="/agm-128-128.png"
data-email="THIS IS WHAT I'D LIKE TO CHANGE"
</script>
</form>
This form is step 2 of a two-part validation. The first gets a user's info, like name, email address, location and saves it to my server. Once this happens, this Stripe form is opened.
Inside the script, there's an option for data-email. This auto-fills a user's email address and I'd like to update this based on a user's input in step 1 of the form.
Using Javascript or jQuery, is it possible to achieve this?
Something along the lines of:
$('#form1').submit(function(){
var email = $('#form1 #email').val();
$('#payButton script').attr('data-email', email);
});
Possible duplicate of this question which didn't have a proper resolution and is 3 yeas old: jQuery > Update inline script on form submission
The answer was, hilariously/stupidly, in the question - thanks to #probackpacker, who got me to test the dummy code that I posted as an example of what wouldn't work. It actually did work:
$('#form1').submit(function(){
var email = $('#form1 #email').val();
$('#payButton script').attr('data-email', email);
});
This correctly targets the <script> tag and lets you change the attributes.
Let me Clear what title means:
In my code for a validation purpose of one field dependent on field "t1" I need to auto submit my form once (Just Once). But my below code is submitting it infinite times and I know the reason why its happening.
I guess Reason is everytime the form submits again JS in header runs. Please help me avoid this. Following is my code:
<html>
<head>
<script>
window.onload = function()
{
var f = document.getElementById("CheckForm");
var temp = document.getElementById("CheckForm.t1");
if(f.name == "CheckForm")
{
var temp1 = document.getElementById("t1");
temp1.value = "Task";
}
document.CheckForm.submit();
}
</script>
</head>
<body>
<form name="CheckForm" id="CheckForm" method="Post">
<input type="text" id="t1" name="t1"/>
</form>
</body>
</html>
I tried stopping it using variable like flag and static variables like arguments.callee.count = ++arguments.callee.count || 1 and placing my CheckForm.submit() line in if clause. But nothing worked. Any advice or help is appreciable.
<html>
<head>
<script>
window.onload = function()
{
var f = document.getElementById("t1");
var temp = document.getElementById("CheckForm.t1");
if(f.name == "CheckForm")
{
var temp1 = document.getElementById("CheckForm.t1");
temp1.value = "Task";
}
if(window.location.search=="")document.CheckForm.submit();
}
</script>
</head>
<body>
<form name="CheckForm">
<input type="text" id="t1"/>
</form>
</body>
</html>
Surely your form is more complex than:
<form name="CheckForm">
<input type="text" id="t1">
</form>
That will not submit anything to the server since there are no successful controls (the only control doesn't have a name).
Since the form is just submitting to the same page, you can submit a hidden value like:
<form name="CheckForm">
<input type="text" id="t1">
<input type="hidden" name="hasBeenSubmitted" value="yes">
</form>
Now when the form submits the URL of the new page will include ...?hasBeenSubmitted=yes so you can look for that value in the URL, e.g.
if (/hasBeenSubmitted=yes/.test(window.location.search)) {
// this page loaded because the form was submitted
}
If it exists, don't submit the form again.
So since you are using a post method the easiest way's to handle this is to ubmitted to a new url , however you seem set on keeping the form submitted to the same url in which case is you are using php (or really any other language) you can check if the http request has a post attribute with a value t1
<?php
if(isset($_POST['t1']){
$your_text=$_POST['t1'];
/*do some string checking to make safe and the throw into your database or mdo whatever you please with data
if you wanted to include the ip address of the user you can get a basic and most likely client ip address like so
$ip_address= $_SERVER['REMOTE_ADDR'];
if you are handing a mulitpage form look into php session or similar tech ... cookies is kind of over kill for this scenario
then include a succes page as the form has been submitted
or you could end php with this tag ?> and then have your html and start again with <?
*/
include 'form_submitted.php';
}else{
//this would be the html page that you included in your question and can be handle in same ways as form submitted
include 'my_form.php'
}
?>
Ip address may not be best included as it would stop 2 user from filling out the form if they are in the same LAN for eg. 2 people in same office or same house (if your page is acttual on the worldwide web).
I would take a look at #RobG answer as it he is basically suggesting the same type of thing with a get instead of post
ANyways hope this helps