How can I make browser remember form values for autocomplete on ajax submit?

Question

I have created a form, which on submit does a ajax call for the submission. It is not a standard form submit. How can I make browser remember form data(not just username and password) for autocomplete? I have tried submitting the form to hidden iframe but it is only working for chrome. Is there a solution or workaround which can work on all the browser.

Answer 1

I finally found the solution to this.

Basically the browser store the input value when the submit event is triggered on the form.

All you need to do is then prevent the page reload by calling the event.preventDefault() function and handle the rest with Javascript.

Here's a basic example : https://codesandbox.io/s/phnsn

<form name="jsForm">
    <input type="text" name="search" autocomplete="search" />
    <button type="submit">Search</button>
</form>

<script>
    document.jsForm.addEventListener("submit", function(event) {
        event.preventDefault();

        // Handle Ajax call here
    });
</script>

Keep in mind that if you added a click event on the submit button, you still need to programmatically trigger the submit event. So it's best to use a button with submit type.