Trying to enable a 'Submit' button when Google ReCaptacha successfully verifies a user, but it says 'ReCAPTCHA couldn't find user provided function: enableSubmit'.
Google Recaptcha would verify correctly a user, but the 'Submit' button is still disabled on callback. I've tried using data-callback={enableSubmit} but it's also not working. I know the enableSubmit() function works since when I call it in CaptchaForm, it'll enable the Button, just not when it's being called in the data-callback.
Any help would be appreciated. Thanks!
import React from 'react';
import ReCAPTCHA from 'react-google-recaptcha'; // eslint says it's not being used
function enableSubmit() {
const submitButton = document.getElementById('submit-button');
submitButton.removeAttribute('disabled');
}
const CaptchaForm = () => {
return (
<head>
<script src="https://www.google.com/recaptcha/api.js" defer></script>
<link rel="preconnect" href="https://www.google.com" />
<link rel="preconnect" href="https://www.gstatic.com" crossOrigin="true" />
</head>
<body>
<form method="POST">
<div
className="g-recaptcha"
data-sitekey="SITEKEY"
data-callback="enableSubmit"
></div>
<Button type={'submit'} id="submit-button" disabled>
Submit
</Button>
</form>
</body>
);
};
You can do this via two different methods..
The reason your current code isnt working is a simple solution
<Button type={'submit'} id="submit-button" disabled>
Submit
</Button>
You have a upper case B on your <button this means its a component but you don't seem to have a import for Button.
All you would need to change would be this
<button type={'submit'} id="submit-button" disabled>
Submit
</button>
2nd method
A cleaner method would look something like this using states.
import { useState } from "react";
const CaptchaForm = () => {
const [buttonDisabled, setButtonDisabled] = useState(true)
return (
<head>
<script src="https://www.google.com/recaptcha/api.js" defer></script>
<link rel="preconnect" href="https://www.google.com" />
<link rel="preconnect" href="https://www.gstatic.com" crossOrigin="true" />
</head>
<body>
<form method="POST">
<div
className="g-recaptcha"
data-sitekey="SITEKEY"
data-callback={() => setButtonDisabled(false)}
></div>
<button type={'submit'} id="submit-button" disabled={buttonDisabled}>
Submit
</button>
</form>
</body>
);
};
Related
I am new to JS , and i was creating a form where i would click the save button and the entered text would shown in the page , but when i click the save button the change is shown for a sec and disappears.
Source Code :
function save(){
save_element = document.getElementById("input_element").value;
console.log(save_element);
document.getElementById("saved_text").innerText += save_element;
}
<html>
<head>
<title>
Practising JS
</title>
</head>
<body>
<form action="">
Name: <input type="text" placeholder="Enter a Text" id = "input_element">
<br>
<button id = "ds" onclick="save()">SAVE</button>
<h1 id = "saved_text"></h1>
<script src="./index.js"></script>
</form>
</body>
</html>
The default behaviour of the <form> is to submit the form data to server. You need to prevent this default behaviour by using preventDefault.
function save(event) {
event.preventDefault(); // Skip default behaviour
const save_element = document.getElementById("input_element").value;
console.log(save_element);
document.getElementById("saved_text").innerText += save_element;
}
<html>
<head>
<title>
Practising JS
</title>
</head>
<body>
<form action="">
Name: <input type="text" placeholder="Enter a Text" id="input_element">
<br>
<button id="ds" onclick="save(event)">SAVE</button>
<h1 id="saved_text"></h1>
<script src="./index.js"></script>
</form>
</body>
</html>
<html>
<head>
<title>
Practising JS
</title>
</head>
<body>
<form action="#">
Name: <input type="text" placeholder="Enter a Text" id = "input_element">
<br>
<button id = "ds" onclick="save()">SAVE</button>
<h1 id = "saved_text"></h1>
<script src="./index.js"></script>
</form>
</body>
</html>
Try <form action="#">, by using this your page will not be reloaded. Default behaviour of <form action=""> is submitting, so it will reload the page.
Ok the change disappears because the page is reloading to something blank
<form action="">
change to a hash like
<form action="#">
Give your Form an ID .then on you click event prevent default .... like this
let form = document.getElementById("MyForm");
//Custom Event ...
form.addEventListener('submit', (e) => {
// on form submission, prevent default
e.preventDefault();
//your other Code to change the text
});
This will prevent the form from making your page reload
The button has the default type submit and is trying to submit the form.
So if you define the button as button. It works.
<button type="button" id="ds" onclick="save()">SAVE</button>
I am new to JavaScript, My question is when I try this JS in chrome browser console it works, But in my JS file it's not working
I attached the code, For HTML design I used google MDL, For JS I used Google Closure
HTML :
<HTML>
<head>
<script src="../closure-library/closure/goog/base.js"></script>
<script src="../js/add.js"></script>
<script src="../js/material.js"></script>
<link rel="stylesheet" href="../css/material.css">
<link rel="stylesheet" href="../css/test_add.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<div>
<button id="add" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
<i class="material-icons">add</i>
</button>
</div>
</body>
</HTML>
JS:
goog.provide('sample.add');
goog.require('goog.dom');
goog.require('goog.events');
sample.add = function() {
self = this;
};
goog.inherits(sample.add, goog.base);
sample.add.prototype.bindEvent = function() {
goog.events.listen(goog.dom.getElement('add'),
goog.events.EventType.CLICK, function(e) {
alert("HAPPY");
});
};
What is wrong with this code
When I try without goog.provide and goog.require its show error to all
When I use this there is no reaction to the click event
Is there any other best resource to see online
Kindly help me
So there's a few things I'd change here.
The biggest issue is that you're never calling sample.add or sample.add.bindEvent.
Then, your script will have to be moved to below your button, so that the button will be on the page when your script runs. Or you could use JS to delay the script running, up to you, but I will say, its pretty common to see scripts just before the end of the body tag.
<HTML>
<head>
<script src="../closure-library/closure/goog/base.js"></script>
<script src="../js/material.js"></script>
<link rel="stylesheet" href="../css/material.css">
<link rel="stylesheet" href="../css/test_add.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<div>
<button id="add" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
<i class="material-icons">add</i>
</button>
</div>
<script src="../js/add.js"></script>
</body>
</HTML>
Also, I'd ditch the goog.base call, unless you specifically need that. If you do need that, please explain why and maybe we can help.
Finally we just need a few subtle tweaks;
goog.provide('sample.add');
goog.require('goog.dom');
goog.require('goog.events');
/** #export */
sample.add = function() {
self = this;
self.bindEvent();
};
sample.add.prototype.bindEvent = function() {
goog.events.listen(goog.dom.getElement('add'),
goog.events.EventType.CLICK, function(e) {
alert("HAPPY");
});
};
sample.add();
I suppose you could call sample.add.bindEvent directly, but I felt like this was probably just the first step to something larger and you'd want to go this way.
Hi guys I need a problem , there is a button called submit and I want to when I click the button , reCAPTCHA form will appear but now, I have to click three time for display reCAPTCHA form.this is my problem. thank u from now.
All HTML Codes :
<html>
<head>
<title>reCAPTCHA demo: Simple page</title>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
function onSubmit(token) {
alert(token)
}
function onExpired() {
alert("onExpired")
}
function onError() {
alert("onError")
}
</script>
</head>
<body>
<form id='demo-form' action="?" method="POST">
<button id ="btnSubmit" class="g-recaptcha" data-sitekey="mysitekey here" data-callback='onSubmit' data-expired-callback='onExpired' error-callback='onError' >Submit</button>
<br/>
</form>
</body>
</html>
So currently I want to have my javascript in an attached JS file instead of using the 'OnClick' function attached to HTML objects. So far I've got:
<html>
<head>
</head>
<body>
<h1 id = '5' class = ''>6</h1>
<button id = '7' class = ''>8</button>
<script src = 'js/9.js'></script>
</body>
</html>
But unfortunately, I can't quite get the redirect going from clicking the button. It should have this source
document.getElementById('7').onclick = function () {
and then redirecting to a different page. Any tips on how I can improve this?
Please use strings as ID. I know you can now use numbers but it is not recommended
Use the load event handler
You MAY be submitting the page to itself when not giving the button a type so return false or preventDefault
what's with the spacing around = in the attributes? Not necessary nor recommended.
Like this
<html>
<head>
<script src="js/9.js"></script>
</head>
<body>
<h1 id="five" class="">6</h1>
<button id="seven" class="">8</button>
</body>
</html>
where js file has
window.onload=function() {
document.getElementById("seven").onclick = function () {
location.replace("page2.html"); // or just location="page2.html";
return false;
}
}
Using jQuery it would be
<html>
<head>
<script src="js/jquery.js"></script>
<script src="js/9.js"></script>
</head>
<body>
<h1 id="five" class="">6</h1>
<button id="seven" class="">8</button>
</body>
</html>
where js file has
$(function() {
$("#seven").on("click",function (e) {
e.preventDefault();
location.replace("page2.html"); // or just location="page2.html";
});
});
LASTLY you do not need script at all:
<form action="page2.html">
<button type="submit" id="seven" class="">8</button>
</form>
Can you please tell me how to show an error message on submit button click ?.I am getting an error message after running the program (when I write required :true). I need to show an error message when a user submits the form. I am using this plugin https://github.com/McNull/angular-febworms
Can we get onchange event of select field ?
In my example a red border is displayed when I run the application. I don't want this. I need this when a user clicks the 'submit' button
http://plnkr.co/edit/JOI82JrEBcKJMrzLgtZd?p=preview
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="bootstrap-css#2.3.2" data-semver="2.3.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" />
<link rel="stylesheet" href="https://rawgithub.com/McNull/angular-febworms/master/package/febworms.min.css" />
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.2.x" src="http://code.angularjs.org/1.2.0/angular.js" data-semver="1.2.0"></script>
<script src="http://code.angularjs.org/1.2.0/angular-route.js"></script>
<script type="text/javascript" src="https://rawgithub.com/McNull/angular-febworms/master/package/febworms.min.js"></script>
<script type="text/javascript" src="dummy-schema.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MyFormController as frmCtrl">
<div class="container">
<div class="row-fluid">
<form class="form-horizontal" name="form.state" novalidate>
<div febworms-form
febworms-schema="form.schema"
febworms-form-data="form.data">
</div>
<div class="form-actions">
<a class="btn btn-primary" ng-disabled="form.state.$invalid" ng-click="frmCtrl.save()">Save changes</a>
</div>
</form>
</div>
</div>
</body>
</html>
But need to blur event to validate or onchange event ?
Since your form name is 'form.state' and your field name is 'required' (which is a bit confusing by the way, you may want to change that), you can get useful information about your validation state with the following expressions in the scope of your form:
form.state.required.$error // yields something like { "required": true, "pattern": false }
form.state.required.$valid // yields a boolean
form.state.$error
form.state.$valid
I haven't heard of a way of knowing whether a form has already been submitted or not. My best shot would be to add some state for this in the controller :
$scope.errorShown = false;
$scope.showErrorMessage = function(){
$scope.errorShown = true;
};
And in your HTML :
<div class="form-actions">
<a class="btn btn-primary" ng-disabled="form.state.$invalid" ng-click="(form.state.$valid ? frmCtrl.save() : showErrorMessage())">Save changes</a>
</div>
<div ng-if="errorShown && form.state.$invalid">
Your form is not valid.
</div>
Plunkr here.