6

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.

dzekoo
  • 81
  • 6
  • autocomplete function is an automatic browser feature (it saves the last words that you type). You can disable autocompletation http://stackoverflow.com/questions/2530/how-do-you-disable-browser-autocomplete-on-web-form-field-input-tag?rq=1 – Angelo Dec 06 '16 at 11:11
  • Have you had the chance to find a solution? I can't seem to find anything about *forcing* persistence while handling the form with Javascript. – SimonDepelchin May 16 '19 at 07:49

1 Answers1

5

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.

SimonDepelchin
  • 2,013
  • 22
  • 18