Autofill password and email javascript - javascript

I have a problem with autofill feauture of my browser. Once a user logins with her email and password, browser holds these two information for future reference. When she opens login page, email and password fields are populated by browser. Event which I binded using jquery for email triggered. On the other hand event for password isn't triggered.
Login form contains following lines:
<form method="post" action="/login" id="login-form">
<input type="email" placeholder="Email" id="email" name="email"/>
<input type="password" placeholder="Password" id="password" name="password"/>
<button type="submit" />
</form>
My script file:
<script type="text/javascript">
$(document).ready(function () {
$("#email").on('change keyup paste mouseup',function () {
alert("email");
});
$("#password").on('change keyup paste mouseup',function () {
alert("password");
});
});
</script>
These two fields are populated by browser successfully. But only "email" messages is shown. Event which is for password isn't triggered.
Any suggestions ?
Thanks.

Related

Retrieving the value of button while submitting form with javascript

I have a file index.php with a log in form comprising a field for the email address, a field for the password, a box to check, and two submit buttons:
the first button ("log_in") is for trying to log in with the current combination email/password. This button triggers a script ("check_box()") which verifies that the box has been checked.
the second button is for generating a new password for the current email address. It also triggers a script ("confirmation()") which asks the user to confirm before executing the action.
I am trying to submit the form with javascript, and to keep track of which button has been submitted in order to execute the correct action. Please see the code below.
<form id="form" name="form" method="post" action="index.php">
<input type="text" name="email" id="email" placeholder="Email address" />
<input type="password" name="password" id="password" placeholder="Password" />
<input type="radio" id="box" name="box"><label for="box">Please check this box if you want to log in.</label>
<input type="button" id="log_in" name="log_in" value="Log in" onclick="return check_box();"/>
<input type="button" id="change_password" name="change_password" value="Password forgotten?" onclick="return confirmation();"/>
</form>
function confirmation(){
if (!confirm("A new password will be generated and sent to your email address. Please make sure that your email address is written correctly, and click on Confirm to proceed.")) {
return FALSE;
}
else{
var form = document.getElementById('form');
form.submit();
}
}
function check_box(){
var success = document.querySelector("input[name=box]:checked");
if(!success){
alert("Please check the box.");
}
else{
var form = document.getElementById('form');
form.submit();
}
}
My problem is to retrieve the values of the buttons when the form is submitted. I tried
if(isset($_POST['log_in']))
to detect whether the user has been trying to log in, and
if(isset($_POST['change_password']))
to detect whether the user wants to change password. But these tests always return FALSE. Where is the mistake?
Thank you in advance.

HTML5 email validation avoiding js call

I have the following code:
<form>
<input type="email" id="login_email" required>
<input type="submit" value="Sign in" ng-click="signIn()">
</form>
The problem with above code is that signIn() method gets called even if there is an email validation error from HTML5 side. In general how to ensure that signIn() method gets called only when all the input validation of the form are successful?
Use $pristine to find out if the form is empty, and $invalid to find out if the form is populated but has invalid values (maybe an incorrect email, for example).
<form name="myForm">
<input type="email" name="email" ng-model="email" required />
<button ng-click="signIn()" ng-disabled="myForm.$invalid || myForm.$pristine">Save</button>
</form>
So now your submit button will be disabled (not clickable) until your form is valid.
EDIT
In order to validate only with HTML5 validation, add a name attribute to your form and you can access the validity of it during submission:
<form name="myForm">...</form>
$scope.signIn = function(){
if ($scope.myForm.$valid){
// do sign in logic here
}
}
Maybe even inline the logic on your submit button (if it works):
<input type="submit" value="Sign in" ng-click="myForm.$valid && signIn()">
So signIn would only be called if the first part was true.
EDIT 2
Based on the information found on the AngularJS docs here, can you try the following as well?:
<form name="myForm">
<input type="email" name="email" ng-model="email" required />
<button ng-click="signIn()" ng-disabled="signIn()">Save</button>
</form>
$scope.signIn = function () {
if ($scope.myForm.email.$error.required) {
// ...
}
};
We are now following the $scope.myForm.email.$error.required syntax approach.
Try logging $scope.myForm or $scope.myForm.email and see what you get as you modify the value.

Email Submission not working

I am working with a Newsletter subscription popup, it has Email address and Submit button. The intention is
1. When new customer enter his/her email id and click SUBMIT button, two actions need to happen.
The email has be sent to current database and
Redirect customer to thank you page.
I have the thank you page webpage. I have the database information. But this in a ecommerce website, I have limited access. I already have similar subscription in one of the webpage, I am trying to replicate that as popup. I am attaching the codes that I have.
My HTML body tag:
<input type="text" name="emailaddress" placeholder="Email Address" maxlength="100" size="28">
<br>
<onclick="javascript:location.href='https://www.thankyou.html'">
<input type="submit" value="SUBMIT" width="260px">
</form>
Code from my existing webpage for database:
When I click SUBMIT, it redirects me to https://www.mywebsite.com/v/Config_FullStoreURLMailingList_subscribe.asp
Instead it should be redirecting customer to "Thankyou.html"
Thanks
I think you must have confused with onclick event. Try using it like this,
<input type="text" name="emailaddress" placeholder="Email Address" maxlength="100" size="28">
<br>
<input type="submit" onclick="javascript:location.href='https://www.mysite.com/thankyou.html'" value="SUBMIT" width="260px">
</form>

HTML FORM CLIENT VALIDATION

I'm quite new to the javascript scene not to mention working with it on a rails application. So i decided to do a client side validation of my signup form everything works ok but my script for checking if password matches confirm password. Everytime it tells me password does not match i was really hoping someone could help me with this. Thanks in advance :) P.S this is mostly html and javascript
<head>
<form id="sign_up" method="post" action="/auth/identity/register">
<div class="field">
<input id="name" class="username" type="text" placeholder="Full name" name="name" required></input>
</div>
<div class="field">
<input id="email" class="username" type="email" placeholder="Email address" name="email" required></input>
</div>
<div class="field">
<input id="password" class="username" type="password" placeholder="Password" name="password" required></input>
</div>
<div class="field">
<input id="password_confirmation" class="username" type="password" placeholder="Password confirmation" name="password_confirmation" required></input>
</div>
<div class="field">
<input class="btn btn-primary" type="submit" value="Sign up" name="commit"></input>
</div>
</form>
<script type="text/javascript">
window.onload = function () {
document.getElementById("password").onchange = validatePassword;
document.getElementById("password_confirmation").onchange = validatePassword;
}
function validatePassword(){
var pass2=document.getElementById("password_confirmation").value;
var pass1=document.getElementById("password").value;
if(pass1!=pass2){
document.getElementById("password_confirmation").setCustomValidity("Passwords Don't Match");
}
else
document.getElementById("password_confirmation").setCustomValidity('');
//empty string means no validation error
}
</script>
</div>
</head>
As the commenters have said, your code works when you move it into the <body> of the document. Perhaps there's more than one element with ID password or password_confirmation within the document?
If not I would start by logging the entered password and password_confirmation values, i.e.:
console.log("Password box value: "+pass1);
console.log("Password confirmation box value: "+pass2);
Put these lines below the line var pass1=document.getElementById("password").value;
Then you can visually inspect the entered values in your browser console (F12 key) to make sure they're the same. Check the values just after you click the submit button. Bear in mind you're binding the onchange event to the inputs so you'll see logging when you move from the password input to the password confirmation input (you can ignore this as you won't yet have entered the confirmation password).
Finally, it's worth bearing in mind that Firefox behaves slightly differently to Chrome in terms of user feedback; Firefox puts a red glow around the offending text input as you type, which disappears when the password entered in the password confirmation input is the same. Chrome does not do this and only gives indication that the passwords didn't match after you click the submit button.

How to track the change when the browser autofills a password in a form after you type the username

How to track an Autofill event in a form?
e.g. I Have a simple form with username, password and submit button.
<form method="post" action="index.php">
user: <input type="text" name="user" id="user" />
pass: <input type="password" name="pass" id="pass" />
<input type="submit" value="Login" />
</form>
now in JS (jQuery)
<script>
$("#pass").change(function(){
alert(1);
});
$("#pass").blur(function(){
alert(1);
});
$("#pass").keyup(function(){
alert(1);
});
$("#pass").paste(function(){
alert(1);
});
$("#pass").focus(function(){
alert(1);
});
</script>
All the events above are never triggered when the browsers remembers the form data (user and pass) and you type the user name and the browser auto-fills the password,
I want to trigger this change how do I without using timers or on blur/change event on the "User" input?
I suppose you could do it with a workaround: After every onkeypress event of the username field store the value of the password field. Then onblur of the username field, check if the value of the password field has changed.
set timer to check if the field filled or not
edit: was not very attentive, have not noticed the last sentence, but only timer can be used

Categories

Resources