Как сохранить автозавершение/автозаполнение браузера при использовании вызовов AJAX

Я заметил, что браузеры не сохраняют значения форм до тех пор, пока форма не будет отправлена, а это означает, что если вы используете AJAX вместо стандартной формы, ваш автозаполнение браузера никогда не заселяется. Есть ли способ принудительно заполнить ваши браузеры автозаполнением/автозаполнением, чтобы я мог иметь это удобство с формами, которые отправляются через AJAX? Это раздражает, чтобы перейти на мою страницу AJAX и каждый раз вводить одни и те же вещи в поля формы, потому что браузер их не помнит.

Мой вопрос в значительной степени идентичен этому, за исключением того, что в качестве принятого ответа на этот вопрос предоставляется только работа в FireFox. Я ищу решение, которое работает во всех основных браузерах (по крайней мере, в Chrome, FF и IE), если оно есть.

Примечание. Я не говорю об автозавершающих плагинах AJAX, что почти всегда появляется при поиске по этому вопросу. Я говорю о вашем браузере, встроенном автозаполнением или автозаполнением, который помогает вам заполнять формы, запоминая, что вы ввели в прошлом.

Ответ 1

Я также сталкивался с этим; там, кажется, не было отличного решения, конечно, не перекрестного браузера, но вот одно для IE. Я не видел никого упоминания:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<SCRIPT>
function subForm()
{
window.external.AutoCompleteSaveForm(f1);
f1.submit();
}
</script>
</HEAD>
<BODY>
<FORM id=f1>
User ID : <input type=text name=id></input><br>
Password :<input type=password name=pw></input><br>
E-mail :<input type = text VCARD_NAME = "vCard.Email"> <br>
<input type=button value=submit onclick="subForm()">
</FORM>
</BODY>
</HTML>

От: http://support.microsoft.com/kb/329156

Ответ 2

Попробуйте ответить на мой вопрос, который вы упомянули? Ответ заключается в использовании скрытого iframe, но, похоже, он утверждает, что идея не работает на IE и Chrome в то время.

Попытайтесь принять эту идею, и вместо использования скрытого iframe просто поместите имя пользователя/пароль/отправьте видимый элемент ввода в форму POST в iframe. Таким образом, пользователь вводит данные для входа непосредственно в iframe. С надлежащим Javascript вы можете поместить загружаемое изображение, получить успех или отказаться от сервера и обновить родительскую или целую страницу. Я считаю, что он должен работать в любом браузере.

Или, если вы все еще хотите использовать AJAX, поскольку вы, вероятно, реализовали API на стороне сервера. Вы можете сделать iframe просто отправить фиктивный POST, в то же время отправить реального пользователя/передать URL-адрес AJAX.

Или вернитесь к использованию скрытого iframe, чтобы не скрыть его, но переместите его в невидимую область, например top: -1000px.

Ответ 3

Используйте этот метод:

AutoCompleteSaveForm = function(form){
    var iframe = document.createElement('iframe');
    iframe.name = 'uniqu_asdfaf';
    iframe.style.cssText = 'position:absolute; height:1px; top:-100px; left:-100px';
    document.body.appendChild(iframe);
    var oldTarget = form.target;
    var oldAction = form.action;
    form.target = 'uniqu_asdfaf';
    form.action = '/favicon.ico';
    form.submit();
    setTimeout(function(){
        form.target = oldTarget;
        form.action = oldAction;
        document.body.removeChild(iframe);
    });
}

Протестировано с помощью ie10, ff latest, chrome latest

Проверьте себя: http://jsbin.com/abuhICu/1

Ответ 4

После нескольких часов поиска я нашел решение в Автозаполнение триггера без отправки формы.

В принципе, он использует скрытый iframe на той же странице, устанавливает действие вашей формы на "src" iframe и добавляет скрытую кнопку отправки в форму, когда пользователь нажимает кнопку, которая запускает запросы AJAX, вы должны программным образом нажать скрытую кнопку перед отправкой запроса AJAX. см. пример ниже:

На странице формы:

<iframe id="hidden_iframe" name="hidden_iframe" class="hidden" src="/content/blank"></iframe>
<form target="hidden_iframe" method="post" action="/content/blank" class="form-horizontal">
    <input type="text" name="name">
    <input type="text" name="age">
    ....
    <button id="submit_button" type="submit" class="hidden"></button>
    <button id="go_button" type="submit" class="hidden">Go</button>
</form>

Затем java script:

$('#go_button').click(function(event){
    //submit the form to the hidden iframe
    $('#submit_button').click(); 
    //do your business here
    $.ajax(function(){
        //whatever you want here
    }})
);

Надеюсь, что это поможет.