Ajax: autocomplete fields?

Question

JavaScript

Let's say this is the situation. There is an ajax application in which the login form looks something like this :

<form><br>
    <input type="text"     name="ajax-username" /><br>
    <input type="password" name="ajax-password" /><br>
    <input type="submit" /><br>
</form>​<br>

var form = document.querySelector( 'form' );<br>
<br>
form.addEventListener( 'submit', function (e) {<br>
    ajaxLogin(function () {<br>
        form.innerHTML += '<br /> success';<br>
    });<br>
    e.preventDefault();<br>
}, false);​<br>

THOSE. We intercept the form submission and instead of re-requesting the page, we send it with ajax, log in and generate new code with JS.

But in this approach, everything is fine except for one thing - there is no “remembering” of the entered information - the login and password, and the next input, instead of setting them up by the browser, you have to enter them again.

If you just remove e.preventDefault()the , then the page will reload after submitting the form.

Can you recommend any solution to this problem?

Answer 1

1. Make yourself a fake address that does nothing and returns a 200 response
2. Specify this fake address in the form and _target = "iframe_name" (of course there should be a frame)
2. Before Ajax sending data to the correct address, do a real submit of the form.
3. Log in with Ajax, see how the browser asks if you remember your login/password
4.!!!
5. PROFIT!

Answer 2

Try using history.pushState

Answer 3

If I remember correctly, only Google Chrome does not remember. As a solution, you can redirect the form to a hidden frame, making sure that the form has an action attribute that is different from the current page.