Let browser prompt for storing password when doing AJAX login

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.