Remember Passwords in Browser with AJAX form

LLLLLLL · April 10, 2014

I have a basic username/password form that uses AJAX to login:

Submit the two values in an AJAX request
If the values are correct, sets session variable for the user and returns success
Client receives success and redirects to the start page.

All of this is basic stuff, works fine. But now some customers say they want the form to remember passwords. I've done some basic work:

Added FORM tags around these input fields. Returns false
Gave the input fields NAME attributes

This seems to make Firefox prompt to remember the password. But I'm having no luck with Chrome, IE, or Safari.

I've googled extensively and there are basically two or three solutions, but I can't get anything to work on these other browsers. It's getting to be quite frustrating. I'm thinking of abandoning this AJAX form and just going to crappy old POST.

What are you using for AJAX login pages? Are passwords remembered by the browser? How are you doing it?

requinix · April 10, 2014

What's your form and AJAX code? Are you using an actual submit button with an onsubmit handler?

LLLLLLL · April 10, 2014

I didn't include the code because I'm looking for what others have done. FWIW, here's the original AJAX-only code. As stated, I can make some alterations to get FF working (form tags, submit input, names on inputs) but other browsers don't work with that.

		<script type="text/javascript">
			
			function do_login() {
				$( "a" ).text( "Logging in..." );
				$( "#message" ).hide();
				$( "a" ).addClass( "disabled_opacity" );
			
				// send the request
				$.post( "handlers/login.php", {
					username : $( "#username" ).val(),
					password : $( "#password" ).val()
					}, function ( data ) {	
						if ( data == 'true' ) {
							window.location.href = "index.php";
							return;
						}	
						
						restore_login( "Invalid username or password." );
					}
				)
				.error( function() { 
					restore_login( 'Error encountered.' );
				});
			}
			
			function restore_login( text ) {
				$( "a" ).text( "Log In" );
				$( "#message" ).text( text );
				$( "#message" ).show();	
				$( "a" ).removeClass( "disabled_opacity" );
			}
		</script>
	
	<body>	
			<div id="box">
				<label for="username">Username:</label>
				<input type="text" id="username">
		
				<label for="password">Password:</label>
				<input type="password" id="password">							
		
				<a href="javascript:void(0);" onclick="do_login();">Log In</a>				
				<div id="message"></div>
			</div>

Jacques1 · April 10, 2014

Hi,

regardless of whether this will fix this specific problem, you should always write proper HTML and make the site usable without JavaScript. And get rid of the inline scripting.

Contrary to popular belief, not everybody runs around with JavaScript turned all up. That means your magical link may not do anything. If you use a proper form instead and attach JavaScript to the submit event, you don't have this problem.

LLLLLLL · April 10, 2014

So, you actually don't have a suggestion for the answer? Just came here to bash what you see?

Jacques1 · April 10, 2014

I gave you the answer: Repair your HTML. I'm actually surprised that this works in any browser.

What else did you expect? Some magical window.gimmeThePasswordRememberPopupWindowForFirefox() function? Sorry, there's no such thing.

Edited April 10, 2014 by Jacques1

LLLLLLL · April 10, 2014

No, I was looking for intelligent answers. StackExchange and some others have ideas but those don't work. I go to PHP Freaks to see who has actually used something that worked. Since you're unable to answer that question, your answers here are completely worthless. Please do not reply unless you can actually answer what was being asked

requinix · April 10, 2014

Jacques still has a point of trying to make things work without Javascript whenever possible. There are people out there who block all Javascript and have a thing against whitelisting sites. It's not wise to alienate demographics.

Anyways. Make your form look like a real form, with a and submit button and all that stuff. Even if its action doesn't go anywhere for now. Then add in an onsubmit handler (for the form or the submit button) that stops the regular action and does the AJAX instead.

LLLLLLL · April 10, 2014

First, most of the web requires javascript these days. Anyone trying to use this web app knows JS is required and they cannot do it without JS. So I'm fine leaving the login page as is. (And it's ridiculous to say he's surprised this works in any browser; it works in all browsers; it's simple, lightweight code.)

As I described initially, I've wrapped the whole thing in a form tag. I've given all the inputs names. I've added a submit button. The form does return false... it doesn't matter. FF does see all these hacks and it recognizes it's a username/password form and prompts. Chrome, Safari, IE... they don't.

LLLLLLL · April 10, 2014

Also, here's a great answer about users without javascript enabled:

http://stackoverflow.com/questions/9478737/browser-statistics-on-javascript-disabled

Jacques1 · April 10, 2014

On 4/10/2014 at 6:07 PM, timneu22 said:

Also, here's a great answer about users without javascript enabled:

http://stackoverflow.com/questions/9478737/browser-statistics-on-javascript-disabled

Yes, they list a lot of good reasons for treating JavaScript with care. Or did you only look at the pictures?

Anyway, we obviously have very different opinions about quality and usability. If you're not willing to change anything, and if your customers accept your work, well, then that's how it is.

LLLLLLL · April 10, 2014

Jacques1, congrats on adding NOTHING TO THE CONVERSATION WHATSOEVER.

If you google, you'll see this is a widespread issue and people have varying answers with varying degrees of success. So I came here to see what people have done. You haven't offered anything constructive. Go away.

Sign In

Remember Passwords in Browser with AJAX form

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information