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

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.

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

Leave a Comment