How to store to browser auto-complete/auto-fill when using AJAX calls

Question

I've noticed that browsers do not store form values until the form is submitted, which means that if you're using AJAX instead of a standard form submit, your browser's auto-fill is never populated. Is there a way to force populate your browsers auto-fill/auto-complete so that I can have this convenience with forms that are submitted via AJAX? It's annoying to go to my AJAX page and have to type in the same things in the form fields every time because the browser doesn't remember them.

My question is pretty much identical to the this one, except that only a work around in FireFox is provided as the accepted answer to that question. I'm looking for a solution that works in all major browsers (at least Chrome, FF, and IE), if there is one.

Note: I am not talking about AJAX auto-complete plugins, which is what almost always pops up when googling this question. I am talking about your browser's built-in auto-complete or auto-fill that helps you fill out forms by remembering what you entered in the past.

This is such a huge issue in AJAX forms and I find it staggering there is such little information about it across the web or any working cross browser solution. Who knows, maybe there is resource on it out there but as you mentioned it is difficult to wade through all the auto-complete plugin stuff which the keywords are so similar for. EDIT: Just saw this was posted in 2012. Here we are 2 years later with no progress — Andy, Aug 01 '14 at 16:10
Answered here... https://stackoverflow.com/questions/15462991/trigger-autocomplete-without-submitting-a-form/30584602#30584602 — Carter Medlin, Jun 02 '15 at 20:14

Long Nguyen · Answer 1 · 2018-04-15T07:05:07.807

For anyone who's still trying to solve this, seem like I've found the answer.

Chromium tries to recognize the submit event, even if you preventDefault and handle the actual submission yourself.

That's it, you need to preventDefault the submit event, not the click event.

This worked on Chrome, Edge and IE 11 at the time of writing (I'm too lazy to download and test it on Firefox). Here's your form:

<form method="POST" id="my-form">
  <label>Email</label>
  <input autocomplete="email" type="email" name="email">
  <button type="submit">Subscribe</button>
</form>

Notice the autocomplete attribute. These are all the possible values that you can use for autocomplete.

In JavaScript, simply do this:

$("#my-form").on("submit", function (ev) {
  ev.preventDefault();

  // Do AJAX stuff here
});

The browser will remember whatever email you've entered on clicking subscribe button.

score 3 · Answer 2 · answered Apr 11 '13 at 15:11

I have also come across this; there doesn't seem to be a great solution, certainly not a cross browser one, but here is one for IE I haven't seen anyone mention:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<SCRIPT>
function subForm()
{
window.external.AutoCompleteSaveForm(f1);
f1.submit();
}
</script>
</HEAD>
<BODY>
<FORM id=f1>
User ID : <input type=text name=id></input><br>
Password :<input type=password name=pw></input><br>
E-mail :<input type = text VCARD_NAME = "vCard.Email"> <br>
<input type=button value=submit onclick="subForm()">
</FORM>
</BODY>
</HTML>

From: http://support.microsoft.com/kb/329156

score 2 · Answer 3 · answered Oct 16 '13 at 15:49

2

Use this Method:

AutoCompleteSaveForm = function(form){
    var iframe = document.createElement('iframe');
    iframe.name = 'uniqu_asdfaf';
    iframe.style.cssText = 'position:absolute; height:1px; top:-100px; left:-100px';
    document.body.appendChild(iframe);
    var oldTarget = form.target;
    var oldAction = form.action;
    form.target = 'uniqu_asdfaf';
    form.action = '/favicon.ico';
    form.submit();
    setTimeout(function(){
        form.target = oldTarget;
        form.action = oldAction;
        document.body.removeChild(iframe);
    });
}

Tested with ie10, ff latest, chrome latest

Test yourself: http://jsbin.com/abuhICu/1

answered Oct 16 '13 at 15:49

Hans Gustavson

166
11

This will consume bandwidth like hell and the data exchange is not even useful. – Marco Aurélio Deleu Nov 26 '13 at 16:52
I think this is the only solution. And yes it will send the whole form, but in the background. – Hans Gustavson Dec 09 '13 at 20:49
Regardless of being a hidden task or not, it doesn't make it less than a dead request flooding the server. I hope better solution comes to Ajax anytime soon. – Marco Aurélio Deleu Dec 09 '13 at 21:28
to bad that this is not working(anylonger) in the webkit based browsers: Opera 30, GC 43, Safari 5.1.7 – HellBaby Jul 03 '15 at 19:43
It works im my chromes: 43.0.2357 and 45.0.2448.0 canary – Hans Gustavson Jul 06 '15 at 08:14
Chrome 46 fixed its wrong behaviour - no `iframe` workarounds needed anymore. See https://stackoverflow.com/a/33113374/810109 – mkurz Oct 13 '15 at 22:09

score 1 · Answer 4 · edited May 23 '17 at 12:22

After several hours searching, I found a solution at Trigger autocomplete without submitting a form.

Basically, it uses a hidden iframe in the same page, set the action of your form to the 'src' of the iframe, and add a hidden submit button inside the form, when user clicks your button which triggers AJAX requests, you should programmatically click the hidden button before sending the AJAX request. see example below:

In your form page:

<iframe id="hidden_iframe" name="hidden_iframe" class="hidden" src="/content/blank"></iframe>
<form target="hidden_iframe" method="post" action="/content/blank" class="form-horizontal">
    <input type="text" name="name">
    <input type="text" name="age">
    ....
    <button id="submit_button" type="submit" class="hidden"></button>
    <button id="go_button" type="submit" class="hidden">Go</button>
</form>

Then java script:

$('#go_button').click(function(event){
    //submit the form to the hidden iframe
    $('#submit_button').click(); 
    //do your business here
    $.ajax(function(){
        //whatever you want here
    }})
);

Hope this helps.

score 1 · Answer 5 · answered Feb 10 '12 at 08:51

Have you try the answer of my question that you mention? The answer is using hidden iframe but seems he claim the idea is not working on IE and Chrome on that time.

Try to take the idea, and instead of using hidden iframe, just put the username/password/submit visible input element in a form POST, in an iframe. So user will enter login details directly into iframe. With proper Javascript you can put loading image, get success or denied from server and update the parent or the whole page. I believe it should work on any browser.

Or if you still want to use AJAX since you probably implemented the API on server side. You can make the iframe to just send a dummy POST at the same time send the real user/pass to AJAX URL.

Or back to use hidden iframe, not to hide it but move it to the invisible area like top: -1000px.

I am not testing it, but is there any problem using iframe? please share your issue with reader. — CallMeLaNN, Feb 27 '12 at 00:53
Chrome 46 fixed its wrong behaviour - no `iframe` workarounds needed anymore. See https://stackoverflow.com/a/33113374/810109 — mkurz, Oct 13 '15 at 22:09

How to store to browser auto-complete/auto-fill when using AJAX calls

5 Answers5

Linked