Remember me using jquery
02:53
here i am explaining how to implement login remember me using jquery, for this we need jquery cookie plug in please download this plug in from this link http://plugins.jquery.com/cookie/
1. add the below js file to our design page
Note: Here i am using mvc view..
3. jquery code for remember me
1. add the below js file to our design page
<script src="../../js/jquery.js" type="text/javascript"></script>
<script src="../../js/jquery.cookie.js" type="text/javascript"></script>
2. page design
@using
(Html.BeginForm())
{
<div class="homeinput">
@Html.TextBox("email", "",
new {id="uname",
placeholder = "Email", type = "email", required = "required" })
</div>
<div class="homeinput">
@Html.TextBox("password", "",
new {id="pwd",
placeholder = "Password",
@required = "required" })
</div>
<input type="submit"
class="submit" id="btnlogin"
value="go to my
account">
<input type="checkbox"
id="remember"><label>Remember
me</label>
<p>Don't
have a login? <span>Request exclusive invite</span></p>
}
<script type="text/javascript">
$(document).on("click", "#btnlogin",
function () {
var
remcondition = $('#remember').prop('checked');
if
(remcondition == true) {
var
username = $('#uname').val();
var
password = $('#pwd').val();
//
set cookies to expire in 14 days
$.cookie('username', username, { expires: 14 });
$.cookie('password', password, { expires: 14 });
$.cookie('remember', true, {
expires: 14 });
}
else
{
//
reset cookies
$.cookie('username', null);
$.cookie('password', null);
$.cookie('remember',
null);
}
});
var
remember = $.cookie('remember');
if
(remember == 'true') {
var
username = $.cookie('username');
var
password = $.cookie('password');
//
autofill the fields
$('#uname').attr("value", username);
$('#pwd').attr("value", password);
}
$(document).on("input", "#uname",
function () {
var
remember = $.cookie('remember');
if
(remember == 'true') {
var
username = $.cookie('username');
var
uname = $("#uname").val();
if
(username == uname) {
var password = $.cookie('password');
$('#pwd').val(password);
}
}
});
</script>
Then run your page enjoy..
0 comments :