Остановить отправку формы на jQuery
Как остановить отправку формы на jQuery?
Вообще говоря остановить отправку формы не так просто, потому, что во-первых скорее всего это произойдет настолько быстро, что Javascript не успеет даже обратиться к браузеру, а во-вторых у Javascript просто нет такой возможности. Но другое дело, если ты работаешь с jQuery.
Чтобы иметь возможность остановить отправку формы на пол-пути необходимо осуществлять саму отправку при помощи Ajax. Вот так:
Отправка формы через Ajax на jQuery
Это форма, и для отправки возьмем:
Итак, при отправке формы (при нажатии на Enter в поле для ввода, либо при клике на кнопку «Отправить» будет происходить следующее:
Если ты уже раньше отправлял форму Ajaxом, то наверняка задумался: «А зачем здесь переменная ajax_request«. Именно благодаря ей мы и сможем остановить загрузку формы.
Внимание! эта переманная должна быть глобальной, ну или по крайней мере в области видимости и события отправки формы и клика на кнопку остановки отправки формы.
Остановка отправки формы на jQuery
Допустим мы хотим остановить отправку формы по нажатию на ссылку «Стоп»:
И обработчик события нажатия на эту ссылку:
И всё. Вся остановка отправки формы заключается в прерывании конкретного Ajax запроса при помощи функции abort.
Главное теперь, чтобы после отправки формы кто-нибудь успел нажать на ссылку «Стоп», потому, что форма уйдет очень быстро.
Как запретить кнопкам отправлять формы
Вы используете элемент кнопки HTML5. Помните, причина в том, что эта кнопка имеет стандартное поведение отправки, как указано в спецификации W3, как показано здесь: W3C HTML5 Button
Так что вам нужно явно указать его тип:
для того, чтобы переопределить тип отправки по умолчанию. Я просто хочу указать причину, по которой это происходит =)
Установите тип для ваших кнопок:
. это удержит их от запуска действия отправки при возникновении исключения в обработчике события. Затем исправьте свою removeItem() функцию, чтобы она не вызывала исключение:
Итак, что я здесь изложу, так это то, как я делаю трюки, чтобы форма могла быть отправлена с помощью JavaScript без какой-либо проверки и выполнять проверку только тогда, когда пользователь нажимает кнопку (обычно кнопку отправки).
Для примера я буду использовать минимальную форму, только с двумя полями и кнопкой отправки.
Помните, что нужно: из JavaScript он должен быть в состоянии быть поданным без какой-либо проверки. Однако, если пользователь нажимает такую кнопку, проверка должна быть выполнена, и форма должна быть отправлена, только если она прошла проверку.
Обычно все начинается примерно с этого (я удалил все лишние вещи, не важно):
Посмотрите, как тег формы не имеет onsubmit=». » (помните, что это было условие, чтобы не иметь его).
Итак, наконец, я использовал это:
И function Validator где return True; я также добавляю предложение отправки JavaScript, что-то похожее на это:
По такому способу все работает как мне нужно.
Я поместил это только для людей, которые не нуждаются в какой-либо onsubmit функции в форме, но делают некоторую проверку, когда пользователь нажимает кнопку.
Почему мне не нужно подавать заявку на тег формы? Легко, на других частях JavaScript мне нужно выполнить отправку, но я не хочу, чтобы была какая-либо проверка.
Таким образом, любая ссылка должна быть преобразована в такую форму отправки, чтобы данные для входа не были потеряны. Когда еще не выполнен вход, он также должен работать. Поэтому проверка ссылок не должна выполняться. Но я хочу представить сообщение пользователю, если пользователь не ввел оба поля, user и pass. Поэтому, если кто-то отсутствует, форма не должна быть отправлена! есть проблема.
Смотрите проблему: форму нельзя отправлять, когда одно поле пусто, только если пользователь нажал кнопку, если это код JavaScript, он должен быть в состоянии отправить.
Таким образом, решение заключается в том, чтобы не отправлять на тег формы. Insead положил его там, где он действительно нужен, на кнопку.
С другой стороны, зачем ставить код отправки, поскольку концептуально я не хочу проверять передачу. Я действительно хочу подтверждение кнопки.
Так почему же некоторые люди (подумайте или скажите мне), что это должно быть сделано на основе подтверждения? Нет, концептуально я не делаю проверку на стороне клиента. Я просто что-то нажимаю на кнопку, так почему бы просто не позволить этому быть реализованным?
Хорошо, что код и стиль отлично справляются с задачей. На любой JavaScript, который мне нужен, чтобы отправить форму, которую я только что поместил:
И это пропускает проверку, когда мне это не нужно. Он просто отправляет форму и загружает другую страницу и т. Д.
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:
Когда я пытаюсь сделать это в Firefox, все отключается, но форма не отправляется ни с какими данными POST, которые она должна включать. Я не могу использовать jQuery для отправки формы, потому что мне нужно, чтобы кнопка была отправлена вместе с формой, поскольку есть несколько кнопок отправки, и я определяю, какое из них использовалось, какое значение включено в POST. Мне нужно отправить форму как обычно, и мне нужно отключить все сразу после того, как это произойдет.
22 ответа
Например, если форма создает заказ, поместите уникальный идентификатор в форму. Когда сервер впервые видит запрос на создание заказа с этим идентификатором, он должен создать его и ответить «успех». Последующие представления также должны отвечать «успех» (в случае, если клиент не получил первый ответ), но не должны ничего менять.
Дубликаты должны быть обнаружены с помощью проверки уникальности в базе данных, чтобы предотвратить состояние гонки.
Я думаю, что ваша проблема в этой строке:
Вы отключаете ВСЕ входные данные, в том числе, я полагаю, те, чьи данные должна предоставить форма.
Чтобы отключить только кнопки отправки, вы могли бы сделать это:
Тем не менее, я не думаю, что IE отправит форму, если даже эти кнопки отключены. Я бы предложил другой подход.
Плагин JQuery, чтобы решить это
Мы только что решили эту проблему с помощью следующего кода. Хитрость здесь заключается в том, чтобы с помощью jQuery data() пометить форму как уже отправленную или нет. Таким образом, нам не нужно связываться с кнопками отправки, что выводит IE из себя.
Используйте это так:
Если есть формы AJAX, которые должны быть разрешены для многократной отправки на загрузку страницы, вы можете указать им класс, указывающий на это, а затем исключить их из вашего селектора следующим образом:
Используйте простой счетчик при отправке.
И вызвать функцию monitor() при отправке формы.
Код Натана, но для плагина jQuery Validate
Если вы используете плагин jQuery Validate, в них уже реализован обработчик отправки, и в этом случае нет причин для реализации более одного. Код:
Я не могу поверить старому доброму уловке css событий указателя: ни один еще не был упомянут. У меня была та же проблема, добавив отключенный атрибут, но это не отправляет назад. Попробуйте ниже и замените #SubmitButton на идентификатор вашей кнопки отправки.
Я решил очень похожую проблему, используя:
В моем случае при отправке формы был некоторый проверочный код, поэтому я увеличиваю ответ Натана Лонга, включая контрольную точку onsubmit
Используйте две кнопки отправки.
Как это сделать
Когда форма отправлена, она отключит все кнопки отправки внутри.
Помните, что в Firefox при отключении кнопки это состояние будет запомнено, когда вы вернетесь в историю. Чтобы предотвратить это, вы должны включить кнопки при загрузке страницы, например.
РЕДАКТИРОВАТЬ : если это не будет добавлено, пользователь никогда не сможет отправить форму, если проверка на стороне клиента обнаружит ошибку.
. но форма не отправлена с данными POST, которые она должна включать.
Кроме того, якоря не могут быть отключены таким образом. Вам нужно будет либо удалить их HREF (не рекомендуется), либо предотвратить их поведение по умолчанию (лучший способ), например:
Подводя итог всем предыдущим ответам, вот плагин, который делает работу и работает кросс-браузер.
Чтобы обратиться к Kern3l, метод синхронизации работает для меня просто потому, что мы пытаемся остановить двойной щелчок на кнопке отправки. Если у вас очень много времени отклика на отправку, я рекомендую заменить кнопку отправки или бланк бланком.
Полное блокирование последующих представлений формы, как это делается в большинстве приведенных выше примеров, имеет один плохой побочный эффект: в случае сбоя в сети, и они хотят повторить попытку, они не смогут это сделать и потеряют изменения, которые они сделали. Это определенно сделает злой пользователя.
В итоге я использовал идеи из этого поста, чтобы найти решение, очень похожее на версию AtZako.
Я обнаружил, что решения, которые не включают какой-либо таймаут, а просто отключают отправку или отключают элементы формы, вызывают проблемы, потому что после срабатывания блокировки вы не сможете отправить снова, пока не обновите страницу. Это вызывает некоторые проблемы у меня при работе с AJAX.
Это, вероятно, можно немного приукрашивать, так как это не так уж и красиво.
У меня были подобные проблемы, и мои решения следующие.
Если у вас нет проверки на стороне клиента, вы можете просто использовать метод jquery one (), как описано здесь.
Это отключает обработчик после его вызова.
Если вы делаете проверку на стороне клиента, как я делал, то это немного сложнее. Приведенный выше пример не позволит вам отправить снова после неудачной проверки. Попробуйте этот подход вместо
Немного изменил решение Натана для Bootstrap 3. Это установит загрузочный текст для кнопки отправки. Кроме того, он будет отключен через 30 секунд и позволит повторно отправить форму.
Этот код будет отображать загрузку на ярлыке кнопки и установить кнопку в
Отключить состояние, затем после обработки снова включить и вернуть исходный текст кнопки **
Вы можете остановить вторую отправку этим
Существует возможность улучшить подход Натана Лонга. Вы можете заменить логику обнаружения уже отправленной формы этой:
jQuery как запретить отправку формы по нажатию Enter
У меня есть следующие JavaScript на моей странице не работают.
Я хотел бы отключить отправку формы на enter, или еще лучше, чтобы вызвать мою форму ajax submit. Любое решение является приемлемым, но код, который я включаю выше, не препятствует отправке формы.
16 ответов:
если keyCode Не пойман, лови which :
EDIT: пропустил, лучше использовать keyup вместо keypress
EDIT 2: Как и в некоторых новых версиях Firefox, подача формы не предотвращается, безопаснее также добавить событие нажатия клавиши в форму. Также он не работает (больше?) просто привязав событие к форме «имя», но только к идентификатору формы. Поэтому я сделал это более очевидным, изменив пример кода соответственно.
изменить 3: изменено bind() до on()
обычно форма подается на введите когда вы фокусируетесь на элементах ввода.
мы можем отключить введите
The событие.который свойство нормализует событие.код ключа и событие.аргументом charcode. Рекомендуется следить за происходящим.что для ввода клавиш клавиатуры.
Это решение работает на всех формах на веб-сайте (также на формах, вставленных с ajax), предотвращая только ввод во входные тексты. Поместите его в функцию готовности документа и забудьте об этой проблеме на всю жизнь.
излишняя необходимость захвата и тестирования каждого нажатия клавиши для ввода ключа действительно вызывает у меня проблемы, поэтому мое решение зависит от следующего поведения браузера:
нажатие ENTER вызовет a клик событие на кнопке отправки (проверено в IE11, Chrome 38, FF 31) ** (ref:http://mattsnider.com/how-forms-submit-when-pressing-enter/ )
** это поведение не применимо, если форма имеет только 1 поле ввода, и это поле является «текстовым» вводом; в этом случае форма будет отправлена при вводе ключа, даже если нет отправки кнопка присутствует в разметке HTML (например, поле поиска). Это было стандартное поведение браузера с 90-х годов.
большинство ответов будет запретить пользователям добавлять новые строки в поле textarea. Если это то, чего вы хотите избежать, вы можете исключить этот конкретный случай, проверив, какой элемент в настоящее время имеет фокус :
Если вы просто хотите отключить отправить на enter и отправить кнопку тоже использовать форму onsubmit событие