I've read through several posts that have had similar issues with ReCAPTCHA v2 but I'm still unable to figure out the issue.
I followed the npm and google documentation by installing npm install --save react-google-recaptcha and including
<script src="https://www.recaptcha.net/recaptcha/api.js" async defer></script> within the body of the index.html and the page in which i want the reCaptcha to be shown.
But for some reason the reCaptcha will not show up on the page; with or without the code to make the reCaptcha functional.
Edit
The reCaptcha v2 was showing on the screen without changing anything with the code for a few moments and disappeared. I restarted VSCode and Github Desktop but the issue hasn't been resolved.
Contact.jsx
import React from 'react'
import Stockpic15 from '../img/stockpic15.jpg';
import ReCAPTCHA from "react-google-recaptcha";
import REACT_APP_SITE_KEY from '../.env'
const Contact = () => {
const onChange = () => {
}
return (
<div className=''>
<script src="https://www.recaptcha.net/recaptcha/api.js" async defer></script>
....
<div className='w-2/3 pb-5'>
<img src={Stockpic15} alt="" />
</div>
<form className='flex flex-col justify-center items-center sm:space-y-8 mobile:space-y-10 mobile:text-lg tablet:text-2xl'>
<input className='contact-input' type='text' name='first-name' placeholder='Your First Name' required/>
<input className='contact-input' type='text' name='last-name' placeholder='Your Last Name' required/>
<input className='contact-input' type='email' name='email' placeholder='Your Email Address' required/>
<textarea className='border-black border-2 rounded-md block w-full resize' name="message" rows="4" placeholder='Message'></textarea>
<button type="submit" href="#_" className="relative inline-block text-lg group">
...
</button>
<ReCAPTCHA
sitekey={REACT_APP_SITE_KEY}
oncChange={onChange}
/>
</form>
</div>
</div>
)}
export default Contact
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="https://www.recaptcha.net/recaptcha/api.js" async defer></script>
</body>
</html>
Related
I'm quite new AMPscript, the problem I'm facing is I want to store the radio button value into a variable then I want to display that variable please someone help me.
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript Radio Button</title>
</head>
<body>
<form
id="dashform"
action="%%=RequestParameter('PAGEURL')=%%"
method="post"
>
<div>
<input type="radio" name="option" value="reason_1" id="reason_1" />
<label for="reason_1">I never signed up, or didn't realize I had signed up, for your email list.</label>
</div>
<div>
<input type="radio" name="option" value="reason_2" id="reason_2" />
<label for="reason_2">Your content isn't relevant to me.</label>
</div>
<p>
<button id="btn">Select your option</button>
</p>
</form>
</body>
</html>
I find a checkbox function from the web as below, how to remove checkbox if click Uncheck, maybe need to rewrite the javascript.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script
type="text/javascript"
src="//code.jquery.com/jquery-1.9.1.js"
></script>
</head>
<body>
<div id="div1">
<input type="button" id="btnDiv1" class="select-all" value="Check / Uncheck" />
<input type="checkbox" class="check" />Mark
<input type="checkbox" class="check" />Frank</div>
<div id="div2">
<input type="button" id="btnDiv2" class="select-all" value="Check / Uncheck" />
<input type="checkbox" class="check" />John
<input type="checkbox" class="check" />Travis
<input type="checkbox" class="check" />Matt</div>
<div id="div3">
<input type="button" id="btnDiv3" class="select-all" value="Check / Uncheck" />
<input type="checkbox" class="check" />Lee
<input type="checkbox" class="check" />Charles</div>
<script type="text/javascript">
$('.select-all').on('click', function ()
{
$(this).nextAll('.check').prop('checked', true);
});
</script>
</body>
</html>
I am a newbie on reactjs. I was playing with multiple components for creating a form , but got an error which i am not able to solve.
I searched thoroughly, but couldnt find an answer.
Please help
The errors are the following:
TypeError: erroneousLine is undefined in JSXTransformer-0.12.2.js
ReferenceError: Login is not defined JSXTransformer-0.12.2.js:
login.jsx
var Login = React.createClass({
render: function () {
return (
<div className="container"><h2>Library</h2>
<form role="form" action="first.ejs">
<textField/>
<div className="form-group">
<label for="email">UserId:</label>
<input type="email" className="form-control" id="email" placeholder="Enter email"/>
</div>
<div className="form-group">
<label for="pwd">Password:</label>
<input type="password" className="form-control" id="pwd" placeholder="Enter password" />
</div>
<div className="checkbox">
<label><input type="checkbox"/> Remember me</label>
</div>
<button type="submit" className="btn btn-default">Submit</button>
</form></div>
);
}
});
text_field.jsx
var textField=React.createClass({
render: function(){
return (<input type="text" name="username"/>);
}
});
html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<script src="http://fb.me/react-0.12.2.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
<script type="text/jsx" src="src/text_field.jsx"></script>
<script type="text/jsx" src="src/login.jsx"></script>
<script type="text/jsx">
React.render(<Login/>, document.body);
</script>
</body>
</html>
There is a typo in your last script tag. The type should be javascript, not jsx.
<script type="text/javascript">
React.render(<Login/>, document.body);
</script>
Whwn I click on signUp button in signUp.html page,it should redirect to signIn.html page.But I'm unable to redirect to signIn.html page.Can anyone please help me out regarding this issue ...
My signIn.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/custom.css" />
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/angular-animate.min.js"></script>
<script src="js/angular-route.min.js"></script>
</head>
<body>
<div class="container" id="wrapper" align="center">
<div>
<img id="imgDiv" src="images/favicon.png">
</div>
<div id="loginDiv">
<h3>LogIn</h3>
<form>
<input type="text" class="resizedTextbox" ng-model="email"
placeholder="Email" /><br> <br> <input type="password"
class="resizedTextbox" ng-model="password" placeholder="Password" /><br>
<br> <input type="submit" class="resizedBtn" value="LogIn">
<div id="signUpDiv">
Not a member yet? SignUp Now
</div>
</form>
</div>
</div>
</body>
My signUp.html:
<html ng-app="Sample">
<head>
<link rel="stylesheet" href="../css/bootstrap.min.css" />
<link rel="stylesheet" href="../css/custom.css" />
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/angular.min.js"></script>
<script src="../js/angular-animate.min.js"></script>
<script src="../js/angular-route.min.js"></script>
<script src="../js/script.js"></script>
</head>
<body>
<div class="container" id="wrapper1" align="center">
<div>
<img id="logoDiv" src="../images/favicon.png">
</div>
<div id="loginDiv">
<h3>Sign up</h3>
<form>
<input type="text" class="resizedTextbox" ng-model="email" placeholder="Email" /><br> <br>
<input type="text" class="resizedTextbox" placeholder="Password" /><br><br>
<input type="text" class="resizedTextbox" placeholder="Verify Password" /><br><br>
<a href="#/signUp"> <button class="resizedBtn" value="SIGN UP">SignUp
</button></a>
</form>
</div>
</div>
</body>
</html>
My script.js :
var app = angular.module('Sample', [ 'ngRoute' ]);
app.config([ '$routeProvider', function($routeProvider) {
$routeProvider.when('/signUp', {
// controller :'signUpController',
templateUrl : '../signIn.html'
})
} ]);
Use this after your registration success.
$location.path('/signinpath');
For this you need to inject $location service
I am new to AngularJS and I am working on a project. I just created a login form, created a module and a controller. But the controller is not working fine.
Here is the code of the view.
<!DOCTYPE html>
<html lang="en" ng-app="loginApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>UltraServe</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="fonts/roboto.css" type="text/css" rel="stylesheet">
<link href="fonts/roboto-light.css" type="text/css" rel="stylesheet">
<link href="style.css" type="text/css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js"></script>
<script type="text/javascript" src="Js/Controller/login.js"></script>
<link href="css/slider.css" rel="stylesheet" type="text/css">
<link href="login_style.css" rel="stylesheet" type="text/css">
</head>
<body ng-controller="LoginAppController">
<header>
<div class="container">
<div class="logo"> <img src="images/logo.png" /> </div>
<!--logo end-->
</div>
</header>
<section class="page-wrap">
<div class="container">
<form class="form-horizontal login-form" role="form">
<h2>Sign in to your account</h2>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputEmail3" placeholder="Email" ng-model="email" required /> {{email}}
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password" ng-model="password" required /> {{password}}
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default red" ng-click="Click()">Sign in</button>
</div>
</div>
</form>
</div>
</section>
</body>
</html>
Now here I create module and controller which is not working fine.
var loginApp = angular.module('loginApp', []);
loginApp.controller('LoginAppController', function ($scope) {
$scope.Click = function (name) {
alert("Email: " + $scope.email + ", Password: " + $scope.password);
}
}
I have gave the ng-app="loginApp" in the view and ng-controller="LoginAppController"
But it is not working fine. Please help me to sort it out. Thanks in advance.
Try this.
Change your form tag as
<form class="form-horizontal login-form" role="form" ng-submit="Click()">
And your submit button
<button type="submit" class="btn btn-default red">Sign in</button>
And in your controller your forgot to put a ) at the end of your controller
loginApp.controller('LoginAppController', function ($scope) {
$scope.Click = function () {
alert("Email: " + $scope.email + ", Password: " + $scope.password);
}
});
just do following changes
$scope.Click = function()
{
//your logic
}