Блог

У меня есть простая форма, и я хочу предоставить пользователю возможность выбирать ранее опубликованные данные, используя autocomplete="on" . Я отправляю форму с помощью AJAX. Я использую Google Chrome 87.0.4280.88 64 bit . Вот код, который у меня есть:

 <form action="/Debug" method="POST" id="myForm">
    Brand: <input type="text" name="brand" autocomplete="on" /><br />
    Model: <input type="text" name="model" autocomplete="on" /><br />
    <button type="submit">Submit</button>
</form>

<script>
    $(document).ready(function () {
        $('#myForm').on('submit', function (e) {
            e.preventDefault();

            $.ajax({
                url: '/Debug',
                type: 'POST',
                cache: false,
                success: function (data) {
                    console.log('data', data);
                }
            });
        });
    });
</script>
 

ЖИВАЯ ДЕМОНСТРАЦИЯ: https: //jsfiddle.net/jcuzfo69/

Когда я отправляю форму в первый раз, опубликованные данные сохраняются и отображаются в раскрывающемся списке автозаполнения. Но, когда я ввожу новые данные и снова отправляю форму, данные не сохраняются браузером.

Данные для первой отправки:

Автозаполнение после первой отправки:

Данные для второй отправки:

Автозаполнение после второй отправки:

Я ожидал бы увидеть Volkswagen в списке брендов после появления второй отправки. Почему он не сохраняется браузером?

Попробуйте это, используя кнопку run snipets:

 $(document).ready(function () {
        $('#myForm').on('submit', function (e) {
            e.preventDefault();

            $.ajax({
                url: '/Debug',
                type: 'POST',
                cache: false,
                success: function (data) {
                    console.log('data', data);
                }
            });
        });
    }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="/Debug" method="POST" id="myForm">
    Brand: <input type="text" name="brand" autocomplete="on" /><br />
    Model: <input type="text" name="model" autocomplete="on" /><br />
    <button type="submit">Submit</button>
</form>