Как сохранить автозаполнение информации (локально) для формы без перенаправления / обновления страницы

Question

У меня есть форма, которую я отправляю через ajax с jQuery, это часть системы, которая заменит существующая, есть проблема с функциональностью, с которой я сталкиваюсь. В текущей системе пользователи заполняют всю информацию формы и отправляют, как обычно, с помощью кнопки отправки формы. Я заметил, что в этих случаях информация автозаполнения для элементов формы с одинаковым именем будет сохраняться локально в браузере (в данном случае большинство пользователей будут использовать Google Chrome), однако при попытке отправить данные формы через ajax ничего не будет сохранено. Пользователи будут иногда вводить повторяющуюся информацию (но не до такой степени, что было бы неплохо иметь список на сервере для использования автозаполнения jQuery). Мой код при нажатии кнопки отправки (вместо отправки обычным способом) в настоящее время выглядит примерно так:

jQuery("<submit button>").click(function() {
    <form validation and other stuff>
    jQuery.ajax({
        type: 'POST',
        url: '<some perl script>',
        data: '<form data>',
        success: function(data) {
            if(<expected response from server>){
                if(<certain input on the form has a specific value>){
                    <do something>
                }
            } else {
                <do something else>
            }
    });
})

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

По сути, я хочу сохранить информацию для каждого поля формы для будущего использования с автозаполнением браузера, но я не смог выполнить его с помощью ajax. Я думаю, что есть кое-что, что работает только для Internet Explorer и называется window.external.AutoCompleteSaveForm, но я не уверен (в любом случае вся эта система не будет использоваться с проводником).

ПРИМЕЧАНИЕ: я хочу сохранить предыдущие введенные значения в автозаполнении / предложениях или как угодно, как вы хотите их назвать, поэтому предположим, что пользователь вводит значение «Что-то» для ввода «имя», я хочу, чтобы пользователи были возможность написать букву «S» и автозаполнение браузера, чтобы показать список ранее введенных значений (не отображая ничего определенного по умолчанию), включая «Что-то», которое было введено при предыдущей отправке (и другие совпадающие, такие как «Что-то еще») , "Что-то не так" и т. Д.). Для того, что я тестировал до сих пор, «отправка» формы с помощью ajax (и возвращение false, чтобы избежать перезагрузки страницы) не сохранит предыдущую отправленную информацию для будущего использования при автозаполнении (по крайней мере, в Chrome, который является браузером что касается меня).

Answer 1

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

Я думаю, что большинство современных браузеров поддерживают автозаполнение при создании XHR, я могу ошибаться. В любом случае вы можете отправить данные через iframe и заставить браузер поверить, что страница изменилась

Answer 2

[править] Да, Карумба, это совсем не ясно!

Хорошо, если вы действительно отправляете через ajax, форма на самом деле не должна исчезать, следовательно, не нужно ничего сохранять. Без кода формы невозможно увидеть, что именно происходит. Однако, если у вас есть кнопка или элемент отправки формы внутри тегов <form>, форма выполняет то же, что и HTML-код по умолчанию .... отправляя форму в действие формы. Это может привести к очистке формы и, скорее всего, вообще обойдёт ваше действие ajax.

Добавьте event.preventDefault в вашу функцию щелчка. Посмотрите, что происходит .....

jQuery("<submit button>").click(function(event) {
event.preventDefault()
<form validation and other stuff>
jQuery.ajax({
    type: 'POST',
    url: '<some perl script>',
    data: '<form data>',
    success: function(data) {
        if(<expected response from server>){
            if(<certain input on the form has a specific value>){
                <do something>
            }
        } else {
            <do something else>
        }
});

})

Это переопределит функциональность формы по умолчанию, которая будет отправлять и очищать форму. Теперь все должно оставаться на месте, без очистки. Вы можете выборочно очистить элементы или оставить их как угодно.

Пожалуйста, добавьте больше деталей к вашему вопросу!

Answer 3

Если вы хотите перехватить отправленную форму, лучше сделать это, используя jQuery.submit вместо "click". Чтобы форма не отправлялась (поскольку ваш AJAX собирается это сделать), вы должны использовать return false

Пример:

jQuery('#form').submit(function() {
    // <form validation and other stuff>
    var $form_data = jQuery(this).serialize();
    jQuery.ajax({
        type: 'POST',
        url: '<some perl script>',
        data: $form_data,
        success: function(data) {
            if(<expected response from server>){
                if(<certain input on the form has a specific value>){
                    <do something>
                }
            } else {
                <do something else>
            }
    });

    return false;
})