How to identify save browser username and password in jquery
Question
I have a requirement to disable login button when either username or password is null.
Please find code below:
$(document).ready(function(){
$('input').on('keyup blur mouseenter', function(e) {
if($("#userName").val().length!==0 && $.trim($('#userName').val()) !== '' && $("#password").val().length!==0 && $.trim($('#password').val())!== ''){
$('#submitLogin').attr('disabled',false);
}
});
});
Please find submit input below in jsp page:
<input class="button" name="submit" type="submit" id ="submitLogin"value="Login" disabled="true" ></div>
I manage to do it in jquery as shown above,but my issue is with saved username and password by the browser.
That is when user first login application browser asked user to save username and password and user click yes.
So once username/password is saved the next time the user open the login page the username and password is already filled but the login button is still disabled.
It is disable because even if the input username/password is already filled in, when it calls the jquery method the value for both input text is null.
However when the user click again then the username and password is initialised and submitLogin is enabled.
Any idea how i can get the value of the saved username and password when the page load first time so I can enable the login input?
Thanks in advance for any help.
2 answers
solution1
0 ACCPTED 2016-04-13 10:36:08
Try $.removeAttr() , $.change() and use input input class="button" name="submit" type="submit" id="submitLogin" value="Login"> like this
$(document).ready(function() { if ($("#userName").val().length !== 0 && $.trim($('#userName').val()) !== '' && $("#password").val().length !== 0 && $.trim($('#password').val()) !== '') { $('#submitLogin').removeAttr('disabled'); } else { $('#submitLogin').attr('disabled', ""); } $('input').on('change keyup blur mouseenter ', function(e) { if ($("#userName").val().length !== 0 && $.trim($('#userName').val()) !== '' && $("#password").val().length !== 0 && $.trim($('#password').val()) !== '') { $('#submitLogin').removeAttr('disabled'); } else { $('#submitLogin').attr('disabled', ""); } }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <input type='text' id='userName' /> <input type="password" id="password"/> <input class="button" name="submit" type="submit" id="submitLogin" value="Login">
solution2
0 2016-04-13 10:44:27
$(document).ready(function(){ $('input').on('keyup blur mouseenter', function(e) { if($.trim($('#userName').val()) && $.trim($('#password').val())){ $('#submitLogin').prop('disabled',false); } }); });
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="//cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script> </head> <body> <input id="userName"> <input id="password"> <input class="button" name="submit" type="submit" id ="submitLogin"value="Login" disabled="disabled" ></div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.