4

Chome is used for simplicity. I am curious about Firefox as well

In a non-AJAX form, when a user enters data into a field with a name, then that data will be remembered in the future when they want to put data into that field again.

So, if I have this:

<h1>Normal Form</h1>
<form id="normalForm" action="/api/submitData" method="POST">
    <input name="willAutofillInTheFutureNormal" type="text" />
    <input type="submit" value="Submit" />
</form>

Then when the Submit button is clicked, then Chrome will POST the data to the backend, and when the user visits the page again, if they click in the field, then their previous entries will be shown.

But, if I add this code

$("#form").submit(e => {
    e.preventDefault();
    const data = {
        data: document.getElementsByName("willAutofillInTheFuture")[0].value
    };
    $.post("/api/submitData", JSON.stringify({ data: data }));
});

Now Chrome doesn't save the inputs anymore.

You can try this out here. JSFiddle
Note: You'll need to re-run when using the normal form to re-load the page and see the auto-complete.

I've tried changing the action URI, and setting the form to have display:none as suggested in Getting Chrome to prompt to save password when using AJAX to login, but that didn't work individually or combined.

David
  • 4,744
  • 5
  • 33
  • 64
  • I am fairly certain you have to manually create the attr fields and programmatically add the values i.e. .attr("email", whatever) – Jacob Aug 14 '20 at 02:29
  • I am basing this off what I read here. Feel free to check it out and see if this is helpful :) https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete – Jacob Aug 14 '20 at 02:29
  • 2
    @Jacob You can do that to help Chrome know exactly what a field is for, as well as screen readers, but it's not required. See my example. If you use the standard post form, even though it doesn't work, it will still save what you put in. The AJAX side doesn't do that. – David Aug 14 '20 at 02:30
  • Perhaps this is what you are looking for? https://stackoverflow.com/a/2295091/8367146 Edit: Maybe not...hmmm – Jacob Aug 14 '20 at 02:36
  • I'd say this is a duplicate of [How to store to browser auto-complete/auto-fill when using AJAX calls](https://stackoverflow.com/questions/9201858/how-to-store-to-browser-auto-complete-auto-fill-when-using-ajax-calls) but it looks like you're doing all that anyway with the exception of no `autocomplete` attributes. Perhaps it's because your AJAX POST is busted. You're sending a JSON payload with `application/x-www-form-urlencoded` content-type – Phil Aug 14 '20 at 02:45
  • @Phil, I have a working version of this concept, and the issue persists, so I don't think that's it. The reason I'm not putting any autocomplete attributes because the form I'm making isn't for well-defined fields like name and address. Though I may try that to see if it makes it work. – David Aug 14 '20 at 02:57
  • Just noting that adding an `autocomplete` attribute did not work. – David Aug 17 '20 at 04:34

0 Answers0