Today's Question:  What are you most afraid of as a programmer?        GIVE A SHOUT

Technical Article => Web =>  JavaScript

Let browser prompt for storing password when doing AJAX login

  sonic0002      2015-06-04 10:02:46      1,630    0    0

In Web 2.0 era, more and more web applications are using AJAX to replace the traditional HTML form element to perform user login. This usually provides a better user experience than form submission. But it also brings a side effect to the end users. That is the browser will not prompt the user whether s/he wants to save the password so that s/he no needs to enter the username/password again when visiting the same site next time.

Below is the code snippet which does the AJAX login. 

<script style="text/javascript"> 
$(function () {     
	$('#signin').bind('click', function () {
	    //Submit the form with AJAX
    }); 
}); 
</script>
<div class="block">
    <label>Username</label>
    <input type="text" id="loginName" value=""/> 
</div>
<div class="block">
    <label>Password</label>
    <input type="password" id="password" value="" />
</div>                 
<div class="block">
    <input type="button" id="signin"  />
</div>

With this, you will not see the browser to prompt asking whether you want to save the password for next login. But with closer look at the code, we will find that it doesn't contain the <form> element and also the submit button.

To make the browser ask to savethe password, user name and password boxes must be in a form and that form must be actually submitted. The submit button could return false from the onclick handler (so the submit does not actually happen).

<form method="post" onsubmit="return false;">
    <div class="block">
        <label>Username</label>
        <input type="text" id="loginName" value=""/> 
    </div>
    <div class="block">
        <label>Password</label>
        <input type="password" id="password" value="" />
    </div>                 
    <div class="block">
        <input type="submit" id="signin"  />
    </div>
</form>

One thing to note is that an onsubmit event is to be registered here to return false which will not trigger the page submission. Otherwise, the page will be reloaded and AJAX login will not be done.

One final tip is that whenever you are doing form operation with or without AJAX, please add the <form> element.

AJAX BROWSER PASSWORD LOGIN

  SAVE AS PDF   MARK AS READ   MARK AS IMPORTANT

Share on Facebook  Share on Twitter  Share on Google+  Share on Weibo  Share on Reddit  Share on Digg  Share on Tumblr    Delicious

  RELATED


  0 COMMENT


No comment for this article.


  WRITE ARTICLE

X as a service

By sonic0002
According to Chris Dixon, Every Unix command eventually become an internet service. Grep->Google, rsync->Dropbox, man->stack overflow, cron->ifttt ... sudo is NSA, LOL