Подтвердить что ты не робот

Как заставить Chrome запомнить пароль для формы AJAX?

Я использую AJAX для быстрой проверки ввода на моей странице входа. Если все правильно, пользователь перенаправляется.

Здесь код:

$(form).submit(function () {
    $.post($(this).attr('action'), $(this).serialize(), function (data) {
        if (data.status == 'SUCCESS') {
            window.location = data.redirectUrl;
        }
   }
...

Он отлично работает во всех браузерах. Но проблема в Chrome. Он не предлагает сохранять пароль.

Когда JavaScript отключен, пароль будет сохранен, поэтому проблема будет перенаправлена ​​на новое место.

Как я могу это исправить?

4b9b3361

Ответ 1

Я нашел грязный обходной путь для этой проблемы, вставив невидимый iframe и нацелив на него форму:

<iframe src="/blank.html" id="loginTarget" name="loginTarget" style="display:none">
</iframe>

<form id="loginForm" action="/blank.html" method="post" target="loginTarget"></form>

Соответствующий JavaScript:

$('#loginForm').submit(function () {
    $.post('/login', $(this).serialize(), function (data) {
        if (data.status == 'SUCCESS') {
            window.location = data.redirectUrl;
        }
    })
})

Фокус в том, что на самом деле есть два запроса. Сначала форма отправляется в /blank.html, который будет игнорироваться сервером, но это вызывает диалог сохранения пароля в Chrome. Кроме того, мы делаем запрос ajax и отправляем реальную форму в /login. Поскольку целью первого запроса является невидимый iframe, страница не обновляется.

Это, конечно, более полезно, если вы не хотите перенаправлять на другую страницу. Если вы хотите перенаправить в любом случае, изменение атрибута действия является лучшим решением.

Edit:

Вот простая JSFiddle версия. Вопреки утверждениям в разделе комментариев, нет необходимости загружать нужную страницу и, похоже, работает очень надежно. Я тестировал его на Win XP с Chrome и Linux с помощью Chromium.

Ответ 2

Можете ли вы изменить значение формы action на data.redirectUrl и отправить форму как обычно? Это должно вызвать приглашение браузера для сохранения имени пользователя и пароля.

$(form).submit(function () {
    $.post($(this).attr('action'), $(this).serialize(), function (data) {
        if (data.status == 'SUCCESS') {
            $("form#name").attr('action', data.redirectUrl);
        }
    }
...

Ответ 3

Прочитайте здесь - почему хром не распознает эту регистрационную форму?.

Важный комментарий:

Да, это не работает, когда вы удаляете return false. Вам нужно будет переписать ваш код. Chrome не предлагает сохранять пароли из форм, которые не являются "представлен" как функция безопасности. Если вы хотите, чтобы функция "Сохранить пароль" работа, вам придется прорезать весь причудливый вход AJAX.

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

Ответ 4

Я исправил его следующим образом:

<form action="/login"></form>

И JavaScript:

$(form).submit(function () {
   if(-1 !== this.action.indexOf('/login')) {
      var jForm = $(this);
      $.post(this.action, $(this).serialize(), function (data) {
         if (data.status == 'SUCCESS') {

            // change the form action to another url
            jForm[0].action = data.redirectUrl;

            // and resubmit -> so, no AJAX will be used 
            // and function will return true
            jForm.submit();
         }
      });
      return false;
   }
}

Ответ 5

В моем случае Chrome не помнил пароль, потому что в одной форме было два разных ввода типа пароля (создать/войти в одну форму). Проблема в моем случае была решена с помощью javascript-манипуляции с удалением одного из вводимых паролей типа, чтобы браузер мог решить, какие представленные поля содержат учетные данные.

Ответ 6

Я обнаружил, что поля ввода имени пользователя и пароля должны содержать тег имени, чтобы Chrome предлагал сохранить пароль. Этот поток - это простые формы, но та же самая фиксированная форма представления формы jQuery AJAX.

Ответ 7

Со вчерашнего дня, 10/07/2013, Chrome 28, теперь это возможно без всякого трюка. Кажется, они исправили это...