Pavlo Ponomarenko2012-03-22 20:32:15
Pavlo Ponomarenko, 2012-03-22 20:32:15

Ajax: autocomplete fields?

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

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

var form = document.querySelector( 'form' );<br>
form.addEventListener( 'submit', function (e) {<br>
    ajaxLogin(function () {<br>
        form.innerHTML += '<br /> success';<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 the question

In order to leave comments, you need to log in

3 answer(s)
Anatoly, 2012-03-22

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

PomanoB, 2012-03-22

Try using history.pushState

1x1, 2012-03-22

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.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question