AJAX Form submit with save password from browser and no “Confirm form submission” request if I reload the page

Question

I'm doing a simple login form on my site. Here is the situation:

• If I do a pure Jquery AJAX form submission and then redirect (in the JS code), the browser doesn't offer to save the info (ie username and password).
• If I do a normal form submit, when I land on the next page and I do back or refresh, I get that very irritating and annoying "Confirm form submission".

My question is, it possible to get the best of both worlds? If yes, how?

To be clear, I want to do a form submit, preferably using AJAX so that if there is an error, I don't have to reload the page and just display the error, I want the browser to offer the possibility of saving the information and I don't want the "confirm form submission" on the page I redirect.

I thought of adding a page in the middle, so submit to a blank page that just redirects to the page I want to go. But once you are there, if you hit back, you are redirected to the same page, so you have click back 2 times. Is that how other people do it?

Thanks for your help.

PS: I've seen all these posts...

• Ajax login form - browsers won't save password
• How to make Chrome remember password for an AJAX form?
• How can I get browser to prompt to save password?
• Why won't this form prompt the browser to offer to save password?

PPS: Seems like the submit to iframe no longer works in modern browsers.

Answer 1

For this to work, you need a well-formed HTML form element, with method and action, and a submit button as well, like this one:

<form method="post" action="login.xxx" onsubmit="return validate();">
  <input type="text" id="username" />
  <input type="password" id="password" />

  <input type="submit" value="Send" />
</form>

After that, handle everything into the validate javascript method, preventing your form post (that will work on a non-javascript environment anyway) and using ajax instead:

function validate() {
  // Ajax request using gathered form data, followed by a redirect to the logged-in page

  return false; // To prevent form submission
}

This way, your login info should be saved. For the "Confirm form submission" message, it will not appear since you'll do an javascript redirect if login info is okay.