Enabling AutoComplete on AJAX Login 'Form'

[l008comm]

I am having a hell of a time getting browser auto-complete to work.

My 1st design of the login form was so simple. It wasn't a form at all. It was just two inputs. A keyup event listener would see if you hit return in either field. If you did, after some validation, it would log you in by making an HTTP request to a PHP doc. Then it would refresh the current page and BAM, the page would reload but you'd be logged in, so the content would be different. This was a great, sleek, simple solution that worked great, with only one flaw... no AutoComplete. My assumption was that, no <form>, no AutoComplete.

Also, FYI, this login form is built into the thin header at the top of every page on the site. I don't have a separate, dedicated login page.

So my plan B was to simply wrap the two inputs in a form tag. Remove my keyup listener, and instead make a submit listener that, when a form was submitted, would intercept it and log you in essentially the same way. But I thought that would count as a "physical" form submit, and I'd get my browser AutoComplete/AutoFill. No luck. I found an article that said you need an action attribute and a submit button. I added an action attribute, and an invisible submit button. Still no luck. I do not want a visible submit button so I did not try that.

So plan C had me going back to keyup listeners in the inputs. I'd listen for a return, and make a form submit event. Then I had my code handle that form submission with a submit event listener. Logically, it seemed a little clumsy but it if worked, I'd be happy. Still no AutoComplete.

So then I came up with plan D but I haven't tried it yet. I'm done trying thing, i need to know EXACTLY what causes browsers to ask to remember your login/password. No more guesswork. I test in a wide array of browsers, and they all seem to be in agreement about when they do or do not ask, so I don't think this is going to be different among different browsers.

So my plan D is: instead of using a dummy action in my form, have the real login.php document. So when the form is submitted, your credentials would be verified via an ajax request. But if they were good, it wouldn't send another ajax request to log you in. Instead, it would do nothing, and let the form "really" submit to the login page, which would log you in and then redirect you back to the HTTP_REFERER url.

Plan D is not as graceful, but I suspect you'd have to be paying pretty close attention to really notice it being not as slick as the other plans. I'm certain D would work, as far as a way to log you in. But will it finally be enough of a form submission, to cause an AutoComplete prompt?

[Str82u]

What doctype are you using? Autocomplete can be added to form input fields themselves in HTML5 but I've never tested that without <form> </form> around them.

[l008comm]

I'm using the HTML5 doctype.
There are two things here, autocomplete and autofill. The thing you can add to input fields is autocomplete, which despite the name of this thread, is not what I'm after. The thing I'm after, which is also sometimes called autocomplete, is really autofill. Its when login and password fields get filled in when a page loads (vs autocomplete which just suggests things as you type). And the hardest part of autofill, which seems to be initiating the browser actually asking you if you want it to remember your password.

[l008comm]

FYI Plan D works. No submit button needed, real or fake. I used a real form whose action is the real login document. Two inputs, username and password. No submit button. I use javascript to look for return keystrokes in the two inputs, and if it sees one, it submits the form. Then I can verify the data and cancel the submission, or let it go through and the browser will ask about remembering the password.

It's too bad there isn't some way I can manually submit data to the browser for remembering. I liked my code a lot better when there was no form, and a lot less javascript for logging in.

[micah]

I was working on this same problem earlier today, I modified another post that basically nulls out the form submit process. It seems to work in firefox, I haven't tested in other browsers yet.

It's a pretty simple process:
1) In the html for the inputs/form,
A) Wrap the inputs in a form and set the initial form action to empty
B) Set up a dummy submit input element

Here's the example code (note that I have div's doing the actual work as a button to submit the form)

 <form action='' class="entry_form" id="share_entry_form" autocomplete='on' >
 <input type='text' name='email_entry' class='entry_form_field' id='email_entry_field' ></input>
 <input type='text' name='name_entry' class="entry_form_field" id='from_name_entry_field' ></input>
 
 <div class="navigation_button" id="send_email_button" >Send Email!</div>
 
 <input type='submit' name='share_entry_form_submit' id='share_entry_form_submit' ></input>
 </form> <!--END-- #edit_page .share_entry_form -->

2) In the document ready function,
A) Make the dummy submit invisible and zero out the form's submit action, since your code will do the actual AJAX call. (Here's the jQuery I'm using (you can pretty easily do the same thing in Javascript))

$('#share_entry_form_submit').css('display', 'none');
$('#share_entry_form').submit(function() {
 return false;
});

B) Have your event handler call click() on the dummy submit button when you are processing the form.

$('#share_entry_form_submit').click();

And that's it! I hope it helps!