jQuery как запретить отправку формы по нажатию Enter
У меня есть следующие JavaScript на моей странице не работают.
Я хотел бы отключить отправку формы при вводе или, еще лучше, вызвать мою форму ajax. Любое решение приемлемо, но код, который я включаю выше, не препятствует отправке формы.
16 ответов
если keyCode Не пойман, лови which :
EDIT: пропустил его, лучше использовать keyup вместо keypress
EDIT 2: Как и в некоторых новых версиях Firefox, отправка формы не предотвращается, безопаснее добавить событие нажатия клавиши в форму. Также он не работает (больше?) просто привязав событие к форме «имя», но только к идентификатору формы. Поэтому я сделал это более очевидным, изменив пример кода соответственно.
EDIT 3: изменено bind() to on()
обычно форма представляется на Enter когда у вас есть фокус на входных элементах.
мы можем отключить Enter
на событие.который свойство нормализует событие.keyCode и события.аргументом charcode. Рекомендуется смотреть событие.что для ввода клавиш клавиатуры.
Это решение работает на всех формах на веб-сайте (также на формах, вставленных с ajax), предотвращая только ввод во входные тексты. Поместите его в функцию готовности документа и забудьте об этой проблеме на всю жизнь.
переизбыток необходимости захвата и тестирования каждого нажатия клавиши для ввода ключа действительно меня беспокоит, поэтому мое решение зависит от следующего поведения браузера:
нажатие ENTER вызовет клик событие на кнопке отправки (проверено в IE11, Chrome 38, FF 31) ** (ref:http://mattsnider.com/how-forms-submit-when-pressing-enter/ )
** это поведение не применимо, если форма имеет только 1 поле ввода, и это поле является «текстовым» вводом; в этом случае форма будет отправлена при вводе ключа, даже если нет отправки кнопка присутствует в разметке HTML (например, поле поиска). Это стандартное поведение браузера с 90-х годов.
большинство ответов выше не позволят пользователям добавлять новые строки в поле textarea. Если это то, чего вы хотите избежать, вы можете исключить этот конкретный случай, проверив, какой элемент в настоящее время имеет фокус :
Если вы просто хотите отключить submit on enter и кнопку submit тоже используйте событие onsubmit формы
вы можете заменить «return false» вызовом функции JS, которая сделает все необходимое, а также отправит форму в качестве последнего шага.
Я не знаю, если вы уже решить эту проблему, или кто-то пытается решить эту проблему прямо сейчас, но, вот мое решение для этого!
вы можете сделать это идеально в чистом Javascript, просто и не требуется библиотека. Вот мой подробный ответ на подобную тему: отключение клавиши enter для формы
короче говоря, вот код:
этот код предназначен для предотвращения ввода ключа «Enter» только для типа ввода= «text». (Потому что посетителю может потребоваться нажать enter на странице) Если вы хотите отключить «Enter» для других действий, вы можете добавить консоль.log (e); для вашего вашего цели тестирования и нажмите F12 в chrome, перейдите на вкладку » консоль «и нажмите» backspace » на странице и посмотрите внутри нее, чтобы увидеть, какие значения возвращаются, затем вы можете настроить все эти параметры для дальнейшего улучшения кода выше в соответствии с вашими потребностями для «электронная.цель.nodeName», «электронная.цель.тип» и многое другое.
следующий код отменит использование клавиши enter для отправки формы, но все равно позволит вам использовать клавишу enter в текстовом поле. Вы можете редактировать его дальше в зависимости от ваших потребностей.
в firefox, когда вы на входе и нажмите enter, он отправит его в верхней форме. Решение находится в форме отправит добавить это:
3 года спустя и ни один человек не ответил на этот вопрос полностью.
asker хочет отменить отправку формы по умолчанию и вызвать свой собственный Ajax. Это простая просьба с простым решением. Нет необходимости перехватывать каждый символ, введенный в каждый вход.
когда файл закончен (загрузка завершена), скрипт обнаруживает каждое событие для ключа «запись», и он отключает событие позади.
полное решение в JavaScript для всех браузеров
код выше, и большинство решений являются совершенными. Тем не менее, я думаю, что больше всего понравился один «короткий ответ», который является неполным.
Итак, вот весь ответ. в JavaScript с родной поддержкой IE 7, а также.
это решение теперь будет препятствовать пользователю отправлять с помощью клавиши enter и не будет перезагружать страницу или принимать вас в верхней части страницы, если ваша форма где-то под.
это должно отключить все формы с кнопками отправки в вашем приложении.
Остановить отправку формы на jQuery
Как остановить отправку формы на jQuery?
Вообще говоря остановить отправку формы не так просто, потому, что во-первых скорее всего это произойдет настолько быстро, что Javascript не успеет даже обратиться к браузеру, а во-вторых у Javascript просто нет такой возможности. Но другое дело, если ты работаешь с jQuery.
Чтобы иметь возможность остановить отправку формы на пол-пути необходимо осуществлять саму отправку при помощи Ajax. Вот так:
Отправка формы через Ajax на jQuery
Это форма, и для отправки возьмем:
Итак, при отправке формы (при нажатии на Enter в поле для ввода, либо при клике на кнопку «Отправить» будет происходить следующее:
Если ты уже раньше отправлял форму Ajaxом, то наверняка задумался: «А зачем здесь переменная ajax_request«. Именно благодаря ей мы и сможем остановить загрузку формы.
Внимание! эта переманная должна быть глобальной, ну или по крайней мере в области видимости и события отправки формы и клика на кнопку остановки отправки формы.
Остановка отправки формы на jQuery
Допустим мы хотим остановить отправку формы по нажатию на ссылку «Стоп»:
И обработчик события нажатия на эту ссылку:
И всё. Вся остановка отправки формы заключается в прерывании конкретного Ajax запроса при помощи функции abort.
Главное теперь, чтобы после отправки формы кто-нибудь успел нажать на ссылку «Стоп», потому, что форма уйдет очень быстро.
Код JavaScript, чтобы остановить отправку формы
При нажатии кнопки отправки вызывается функция проверки. У меня есть дело в форме проверки. Если это условие выполняется, я вызываю функцию с именем returnToPreviousPage ();
Я использую JavaScript и инструментарий Dojo.
Скорее возвращаясь к предыдущей странице, он отправляет форму. Как я могу прервать это представление и вернуться на предыдущую страницу?
12 ответов
Вы можете использовать возвращаемое значение функции, чтобы предотвратить отправку формы
Использовать предотвращение по умолчанию
Инструментарий Dojo
jQuery
Ванильный JavaScript
Например, если у вас есть кнопка «Отправить» в форме, чтобы остановить распространение, просто напишите event.preventDefault (); в функции, которая вызывается при нажатии кнопки подтверждения или кнопки ввода.
И здесь идет ваш JQuery
Просто используйте простой button вместо кнопки отправки. И вызовите функцию JavaScript для обработки отправки формы:
Функция внутри тега script :
Вы также можете попробовать window.history.forward(-1);
Допустим, у вас есть форма, похожая на эту
Вот javascript для функции verifyAction
Этот работает на Firefox, Chrome, Internet Explorer (край), Safari и т. Д.
Если это не так, дайте мне знать
На данный момент работает следующее (проверено в Chrome и Firefox):
Много сложных способов сделать простую вещь:
Как предотвратить многократную отправку формы со стороны клиента?
Иногда, когда ответ медленный, можно несколько раз нажать кнопку отправки.
Как этого не допустить?
Используйте ненавязчивый javascript, чтобы отключить событие отправки в форме после того, как оно уже было отправлено. Вот пример использования jQuery.
РЕДАКТИРОВАТЬ: исправлена проблема с отправкой формы без нажатия кнопки отправки. Спасибо, Ичибан.
Я попробовал решение Вансти вместе с ненавязчивой проверкой asp mvc 3, и если проверка клиента не удалась, код все равно будет запущен, а формы отключена навсегда. Я не могу отправить заявку повторно после исправления полей. (см. комментарий bjan)
Поэтому я модифицировал сценарий Вансти следующим образом:
Управление отправкой формы на стороне клиента может быть реализовано довольно элегантно, если обработчик onsubmit скроет кнопку отправки и заменит ее анимацией загрузки. Таким образом, пользователь получает немедленную визуальную обратную связь в том же месте, где произошло его действие (щелчок). В то же время вы предотвращаете отправку формы в другой раз.
Если вы отправляете форму через XHR, имейте в виду, что вам также необходимо обрабатывать ошибки отправки, например тайм-аут. Вам придется снова отобразить кнопку отправки, потому что пользователю необходимо повторно отправить форму.
С другой стороны, llimllib поднимает очень важный вопрос. Вся проверка формы должна происходить на стороне сервера. Это включает в себя несколько проверок отправки. Никогда не доверяйте клиенту! Это не только случай, если отключен javascript. Вы должны иметь в виду, что весь код на стороне клиента можно изменять. Это довольно сложно представить, но html / javascript, обращающийся к вашему серверу, не обязательно является написанным вами html / javascript.
Как предлагает llimllib, сгенерируйте форму с идентификатором, уникальным для этой формы, и поместите его в скрытое поле ввода. Сохраните этот идентификатор. При получении данных формы обрабатывать их только при совпадении идентификатора. (Также связать идентификатор с сеансом пользователя и сопоставить его также для дополнительной безопасности.) После обработки данных удалите идентификатор.
Конечно, время от времени вам нужно будет очистить идентификаторы, для которых никогда не были отправлены данные формы. Но, скорее всего, на вашем веб-сайте уже используется какой-то механизм «сборки мусора».
Запретить двойную подачу форм в jQuery
У меня есть форма, которая требует немного времени для обработки сервера. Я должен убедиться, что пользователь ждет и не пытается повторно отправить форму, нажав кнопку еще раз. Я попытался использовать следующий код JQuery:
Когда я пытаюсь сделать это в Firefox, все отключается, но форма не отправляется ни с какими данными POST, которые она должна включать. Я не могу использовать jQuery для отправки формы, потому что мне нужно, чтобы кнопка была отправлена вместе с формой, поскольку есть несколько кнопок отправки, и я определяю, какое из них использовалось, какое значение включено в POST. Мне нужно отправить форму как обычно, и мне нужно отключить все сразу после того, как это произойдет.
Обновление в 2018 году : я только что получил несколько баллов за этот старый ответ и просто хотел добавить, что лучшим решением было бы сделать операцию идемпотентной, чтобы дублирующие представления были безвредными.
Например, если форма создает заказ, поместите уникальный идентификатор в форму. Когда сервер впервые видит запрос на создание заказа с таким идентификатором, он должен создать его и ответить «успех». Последующие представления также должны отвечать «успех» (в случае, если клиент не получил первый ответ), но не должны ничего менять.
Дубликаты должны быть обнаружены с помощью проверки уникальности в базе данных, чтобы предотвратить состояние гонки.
Я думаю, что ваша проблема заключается в этой строке:
Вы отключаете ВСЕ входные данные, в том числе, я полагаю, те, чьи данные должна предоставить форма.
Чтобы отключить только кнопку отправки, вы можете сделать это:
Тем не менее, я не думаю, что IE отправит форму, если даже эти кнопки отключены. Я бы предложил другой подход.
Плагин JQuery, чтобы решить это
Мы только что решили эту проблему с помощью следующего кода. Хитрость здесь в том, чтобы с помощью jQuery data() пометить форму как уже отправленную или нет. Таким образом, нам не нужно связываться с кнопками отправки, что выводит IE из себя.
Используйте это так:
Если есть формы AJAX, которые нужно разрешить отправлять несколько раз за загрузку страницы, вы можете дать им класс, указывающий на это, а затем исключить их из вашего селектора следующим образом: