Форма отправлена ​​дважды с помощью submit() при включении

Question

У меня был jQuery / HTML-код, похожий на этот:

<form action="/SomeAction" method="post">
  <input id="my-textbox" type="text" placeholder="Write something and press enter to continue..." />
</form>

<script type="text/javascript">
 $(function() {
     $('#my-textbox').keyup(function(e) {
        var $textbox = $(this);
        if ($textbox.val().length > 0 && e.keyCode == 13) {
           $textbox.parent('form').submit();
        }
     });
 });
</script>

Цель состояла в том, чтобы автоматически отправить форму, когда пользователь нажал клавишу "Ввод". Я регулярно использую Firefox, так что все было в порядке, пока я не проверил в Google Chrome и Internet Explorer.

Когда я нажимал клавишу Enter в более поздних браузерах, иногда я получал форму, отправленную дважды. Это было легко заметить, потому что я получал повторяющиеся записи в моей БД и видел два POSTс помощью Fiddler.

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

Мои вопросы:

Почему браузеры не запрещают публикацию второй формы (как это сделал в моем тестировании Firefox)?

Стоит ли ожидать такого поведения во всех основных браузерах на всех платформах?

Есть ли способ улучшить этот код, чтобы я выполнял отправку с использованием JavaScript, но не получал форму, отправленную дважды?

Answer 1

Почему браузеры не запрещают публикацию второй формы (как это сделал в моем тестировании Firefox)?

Это поведение по умолчанию. Что делать, если у вас не было своего сценария и поведение по умолчанию было таким, что форма не POST при вводе.

Стоит ли ожидать такого поведения во всех основных браузерах на всех платформах?

да

Есть ли способ улучшить этот код, чтобы я выполнял отправку с использованием JavaScript, но не получал форму, отправленную дважды?

Используйте глобальный mutex переменной и установите его один раз в форме POST - проверяя его на последующих POST для проверки. Или верните false из keyup обработчик и остановка распространения события.

Answer 2

Некоторые браузеры интерпретируют кнопку ввода как отправку, если в форме есть только одна кнопка. Просто return false в вашей функции, чтобы предотвратить отправку формы по умолчанию.

if ($textbox.val().length > 0 && e.keyCode == 13) {
    $textbox.parent('form').submit();
    return false;
}

Answer 3

Ваша форма отправляется сразу после нажатия клавиши ввода (при нажатии клавиши и до ее запуска), так что вы можете сделать

$(function() {
    $('#my-textbox').keydown(function(e){
        if(e.keyCode==13) e.preventDefault();
    }); 

    $('#my-textbox').keyup(function(e) {
        e.preventDefault();
        var $textbox = $(this);
        if($textbox.val().length > 0 && e.keyCode == 13) {
           $textbox.parent('form').submit();
        }
     });
 });​

Простой тест

Answer 4

Добавьте логическую переменную, которая будет иметь значение true после первой отправки, и используйте эту переменную в вашем условии if. Это предотвратит случайный двойной щелчок.

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