Jump to content

Remember Passwords in Browser with AJAX form


LLLLLLL

Recommended Posts

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

  1. Submit the two values in an AJAX request
  2. If the values are correct, sets session variable for the user and returns success
  3. 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?

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 by Jacques1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.