отключить отправку формы jquery
Остановить отправку формы на jQuery
Как остановить отправку формы на jQuery?
Вообще говоря остановить отправку формы не так просто, потому, что во-первых скорее всего это произойдет настолько быстро, что Javascript не успеет даже обратиться к браузеру, а во-вторых у Javascript просто нет такой возможности. Но другое дело, если ты работаешь с jQuery.
Чтобы иметь возможность остановить отправку формы на пол-пути необходимо осуществлять саму отправку при помощи Ajax. Вот так:
Отправка формы через Ajax на jQuery
Это форма, и для отправки возьмем:
Итак, при отправке формы (при нажатии на Enter в поле для ввода, либо при клике на кнопку «Отправить» будет происходить следующее:
Если ты уже раньше отправлял форму Ajaxом, то наверняка задумался: «А зачем здесь переменная ajax_request«. Именно благодаря ей мы и сможем остановить загрузку формы.
Внимание! эта переманная должна быть глобальной, ну или по крайней мере в области видимости и события отправки формы и клика на кнопку остановки отправки формы.
Остановка отправки формы на jQuery
Допустим мы хотим остановить отправку формы по нажатию на ссылку «Стоп»:
И обработчик события нажатия на эту ссылку:
И всё. Вся остановка отправки формы заключается в прерывании конкретного Ajax запроса при помощи функции abort.
Главное теперь, чтобы после отправки формы кто-нибудь успел нажать на ссылку «Стоп», потому, что форма уйдет очень быстро.
События и их обработка в jQuery
В этой статье мы рассмотрим методы jQuery, которые предназначены для обработки различных событий, возникающих на странице.
Событие – это «сигнал», возникающий в браузере, который сообщает вам, что что-то произошло для того, чтобы вы могли с ним взаимодействовать.
Обработка событий с помощью методов jQuery
Функция one отличается от on только тем, что она выполняет обработчик при наступлении указанного события только один раз.
Например, добавим с помощью функции on событие click для всех элементов с классом btn :
Вышеприведённый код, записанный с использованием короткой записи функции on :
Дополнительная информация о событии
При обработке события вы можете узнать некоторую дополнительную информацию о нём. Передача этой информации, а именно объекта Event в обработчик события осуществляется всегда посредством первого аргумента.
Пространство имён
В jQuery после указания имени события вы можете ещё дополнительно указать пространство имён.
Также с его помощью очень просто удалять определённые события:
Описание и примеры использования функций trigger и off рассматриваются в статье немного ниже.
Передача дополнительных данных в обработчик
Осуществляется это так (пример):
Пример использования одного обработчика для нескольких (2 или более) событий:
Для каждого события своя функция:
Пример использования в jQuery несколько обработчиков (функций) на одно событие:
Например, узнать в какой очерёдности будут выполняться события можно так:
Программный вызов события
Для вызова события из кода в jQuery есть 2 метода:
Процесс добавления к некоторому элементу обработчика события обычно осуществляется после загрузки страницы, т.е. когда DOM дерево документа уже построено. Иначе при написании обработчиков, вы можете обратиться к элементам, которых ещё нет на странице.
Самая короткая запись события загрузки страницы в jQuery выглядит так:
Но, можно использовать и более длинную запись:
Например, выполнить функцию, когда страница будет полностью загружена (включая картинки):
Например, выведем сообщение в консоль, когда указанное изображение будет загружено:
В jQuery для отслеживания действий мыши наиболее часто используют следующие события:
Например, повесим событие onclick на все элементы с классом btn :
Краткая запись события по клику:
Например, разберем, как можно скрыть блок через некоторое время после события click :
Событие при поднесении курсора является сложным и состоит из 2 событий:
События mouseenter и mouseleave в jQuery отличаются от mouseover и mouseout только тем, что они не возникают когда курсор соответственно входит и покидает внутренние элементы прослушиваемого элемента. Другими словами события mouseover и mouseout всплывают, а mouseenter и mouseleave – нет.
Например, изменим цвет элемента списка при поднесении к нему курсора:
Те же самые действия, но использованиям mouseover и mouseout :
Данные методы необязательно использовать вместе, их можно также применять по отдельности.
Например, подсчитаем количество посещений элемента при наступлении события «Навести мышью»:
Например, перепишем вышеприведённый пример, используя hover :
Если указать событию hover один обработчик, то он будет выполняться как для обработки наведения мыши, так и для её покидания.
Событие mousemove посылается элементу, когда указатель мыши перемещается внутри него. Любой HTML элемент может получать это событие.
Прослушивание события прокрутки колёсика (wheel) мышки можно осуществить так:
jQuery – События клавиатуры
При нажатии клавиши клавиатуры браузер генерирует события в следующем порядке:
Например, напишем обработчик для прослушивания всех событий, которые происходят при нажатии клавиши:
Пример, в котором показано, как можно прослушать событие keypress и узнать, нажато ли указанное сочетание клавиш:
Пример, как можно прослушать сочетание клавиш Ctrl+Enter :
Пример, с использованием событий keydown и keyup :
jQuery – События элементов формы
В jQuery можно выделить следующие события для элементов формы и не только:
Например, при получении элементом div события фокуса установим ему фон оранжевого цвета:
Точно такое же выполнить с помощью событий focus и blur не получится, т.к. они не всплывают:
Пример, в котором рассмотрим, как получить значение элемента select при его изменении:
Пример, в котором рассмотрим, как получить все выбранные элементы select при его изменении:
Пример программного вызова события change для элемента select :
Пример использования события изменения change для получения значения элемента input :
Но кроме события change есть ещё событие input для текстовых элементов. Данное событие в отличие от change генерируется сразу, а не после того как данный элемент потеряет фокус.
Пример, использования события ввода для получения значения элемента input :
Пример, в котором представлен один из способов получения значения элемента textarea :
Событие выбора select генерируется браузером, когда пользователь внутри элементов input с type=»text» или textarea выделяет текст.
jQuery – Событие отправки формы (submit)
Пример, использования события submit :
Программный вызов отправки формы:
Для прослушивания события изменения окна браузера используется resize :
Например, создадим обработчик, который будет при изменении окна браузера выводить в конец страницы её ширину и высоту:
Например, отменим стандартное поведение всех ссылок на странице, имеющих класс service :
Что такое всплытие и как его остановить
Кроме отмены стандартного действия, в механизме событий есть ещё такое понятие как всплытие. Оно заключается в том, что когда браузер генерирует событие, то он это делает не только для текущего элемента (цели), но и для всех его потомков включая родителя:
Добавление событий к динамически созданным объектам
Например, добавим событие к элементу, которого ещё нет на странице:
Делегирование может применяться не только для обработки событий динамически созданных объектов, но и для того чтобы не привязывать к каждому элементу (если их на странице может быть очень много) обработчик.
Например, запретим в комментариях переходить по внешним ссылкам (такие действия будем перенаправлять на страницу away):
Вызов метода off без аргументов снимет у указанных элементов все добавленные к ним обработчики событий.
Например, отключим все обработчики у элементов с классом link:
Например, удалим событие click у всех элементов с классом link :
Специальный селектор ( ** ) позволяет удалить только делегированные события с сохранением не делегированных:
Удалить только указанные делегированные события (с помощью селектора):
Удалить все обработчики openModal делегированного события click в пространстве имён modal для элементов с классом show :
Создание пользовательского события
Принцип создания специального события jQuery рассмотрим посредством следующего примера:
У меня возникли небольшие проблемы при попытке отменить отправку формы. Я следовал этому уроку (хотя я не делаю сценарий входа в систему), и, похоже, он работает для него.
Я уже импортировал jQuery в шапку, и я знаю, что он работает. Моей первой мыслью было, что это может быть устаревшим, но на самом деле это всего лишь год назад.
Так кто-нибудь видит, что не так?
РЕДАКТИРОВАТЬ: Из того, что я прочитал, самый простой и подходящий способ прервать отправку, это вернуть ложь? Но я не могу заставить его работать. Я искал на форуме, и я нашел несколько полезных тем, но ни одна из них на самом деле не работает. Я должен что-то напортачить.
12 ответов
Спасибо всем за ответы! Мой друг попросил меня добавить
на форме. Это работает, но я все еще хотел бы знать не-inline-javascript трюк, который работает.
Вы указываете, что «что предупреждение перед» return false «не отображается».
У меня также была эта проблема, мой код (который не работал) был что-то вроде этого:
и внутри функции before_submit у меня было «return false», чтобы остановить отправку формы:
Я добавил «return» при привязке функции-обработчика события к форме, и это сработало:
Функция, прикрепленная к событию submit, должна возвращать false (в моем случае это анонимная функция). Итак. это одно решение одной причины этой проблемы
Просто мой скромный вклад в этот (без ответа, тоже устаревший) вопрос. Я уже несколько раз работал над этой проблемой с одним и тем же решением:
Это вызывает неправильный элемент / элемент, не приводя ни к ошибкам, ни к предупреждениям. Так что просто назовите свою кнопку отправки как-нибудь еще, и все волшебным образом начнет работать снова
Форма, к которой вы пытаетесь получить доступ, может быть динамически добавлена на вашу страницу. Вы должны использовать делегат для доступа к этой форме в этом случае
Для начала, вот достойный SSCCE. Все, что вам нужно сделать, это скопировать и запустить его.
Если это работает (по крайней мере, здесь работает, я получаю предупреждение, а форма вообще не отправляется), сравните его с вашим собственным кодом и постарайтесь урезать свой собственный код до такого вида, чтобы вы могли лучше заметить различия (и, следовательно, ваша ошибка).
Несмотря на это, по моему мнению, будет стоить усилий, чтобы пройтись по некоторым базовым / тривиальным учебникам по jQuery (и предпочтительно также JavaScript), чтобы лучше понять, что происходит под прикрытием, и научиться использовать такие инструменты, как Firebug.
jquery отключить отправку формы при вводе
У меня есть следующий javascript на моей странице, который, похоже, не работает.
Я хотел бы отключить отправку формы при вводе или, еще лучше, вызвать мою форму ajax submit. Любое решение приемлемо, но код, который я включаю выше, не препятствует отправке формы.
18 ответов
Я использую плагин jQuery Form для установки обработчика событий для отправки формы. Однако мне нужно отключить повторную отправку формы до тех пор, пока я не получу событие, которое сервер закончил обрабатывать. Как мне это сделать?
Если keyCode не пойман, поймайте which :
EDIT: пропустил, лучше использовать keyup вместо keypress
EDIT 2: Поскольку в некоторых более новых версиях Firefox отправка формы не предотвращается, безопаснее также добавить событие нажатия клавиши в форму. Кроме того, он не работает (больше?), Просто привязывая событие к форме «name», но только к идентификатору формы. Поэтому я сделал это более очевидным, соответствующим образом изменив пример кода.
EDIT 3: Изменено bind() на on()
Мы можем отключить ключ Enter (код 13 ) на элементах ввода в форме:
DEMO: http://jsfiddle.net/bnx96/325 /
Свойство event.which нормализует event.keyCode и event.charCode. Рекомендуется смотреть event.which для ввода клавиш клавиатуры.
Это решение работает на всех формах на веб-сайте (также на формах, вставленных с ajax), предотвращая только ввод входных текстов. Поместите его в функцию готовности документа и забудьте об этой проблеме на всю жизнь.
Большинство приведенных выше ответов не позволят пользователям добавлять новые строки в поле textarea. Если вы хотите избежать этого, вы можете исключить этот конкретный случай, проверив, какой элемент в данный момент имеет фокус :
Излишняя необходимость фиксировать и проверять каждое нажатие клавиши для ключа ENTER действительно беспокоит меня, поэтому мое решение основано на следующем поведении браузера:
Нажатие ENTER вызовет событие щелчка по кнопке отправки (проверено в IE11, Chrome 38, FF 31) ** (ссылка: http://mattsnider.com/how-forms-submit-when-pressing-enter / )
Как я могу предотвратить отправку формы в JS/jQuery, когда одно поле имеет фокус на нем, сохраняя при этом нормальное поведение во всех других полях ввода?
если вы просто хотите отключить отправку при вводе и кнопку отправки, используйте событие onsubmit формы
А в js или jquery добавить:
Вы можете сделать это идеально в чистом Javascript, простом и не требующем библиотеки. Вот мой подробный ответ на аналогичную тему: Отключение клавиши ввода для формы
Короче говоря, вот код:
Этот код предназначен для предотвращения ключа «Enter» только для типа ввода=’text’. (Потому что посетителю может потребоваться нажать enter на странице) Если вы хотите отключить «Enter» и для других действий, вы можете добавить console.log(e); для ваших целей тестирования и нажмите F12 в chrome, перейдите на вкладку «console» и нажмите «backspace» на странице и посмотрите, какие значения возвращаются, затем вы можете настроить все эти параметры для дальнейшего улучшения кода выше, чтобы удовлетворить ваши потребности в «e.target.nodeName», «e.target.type» и многих других.
Я не знаю, решили ли вы уже эту проблему или кто-то пытается решить ее прямо сейчас, но вот мое решение для этого!
Следующий код отменит использование ключа ввода для отправки формы, но все равно позволит вам использовать ключ ввода в textarea. Вы можете отредактировать его в зависимости от ваших потребностей.
В firefox, когда вы на входе и нажимаете enter, он отправит свою верхнюю форму. Решение находится в форме отправки, добавьте это:
Прошло 3 года, и ни один человек не ответил на этот вопрос полностью.
Спрашивающий хочет отменить отправку формы по умолчанию и вызвать свой собственный Ajax. Это простой запрос с простым решением. Нет необходимости перехватывать каждый символ, введенный в каждый ввод.
Я слышал, что which не рекомендуется, поэтому измените лучший оцененный ответ на этот вопрос.
Когда файл закончен (загрузка завершена), скрипт обнаруживает каждое событие для ключа «Вход» и отключает событие позади.
Полное решение в JavaScript для всех браузеров
Приведенный выше код и большинство решений идеальны. Тем не менее, я думаю, что самый любимый «short answer», который является неполным.
Итак, вот полный ответ. в JavaScript с встроенной поддержкой IE 7.
Это решение теперь предотвратит отправку пользователем с помощью клавиши enter и не будет перезагружать страницу или переносить вас в верхнюю часть страницы, если ваша форма находится где-то ниже.
Это должно отключить все формы с кнопками отправки в вашем приложении.
Похожие вопросы:
Я пытаюсь отключить отправку формы с помощью jQuery, я проверил плагин jQuery.validate.js, но он не распознает мой массив txtQty[]: rules : < 'txtQty[]' :
Как я могу отключить отправку формы для всех полей ввода, кроме кнопки отправки (с идентификатором, называемым submit). Приведенный ниже код работает, но проблема в том, что я не могу создавать.
Я использую плагин jQuery Form для установки обработчика событий для отправки формы. Однако мне нужно отключить повторную отправку формы до тех пор, пока я не получу событие, которое сервер закончил.
Как я могу предотвратить отправку формы в JS/jQuery, когда одно поле имеет фокус на нем, сохраняя при этом нормальное поведение во всех других полях ввода?
я пытаюсь отключить ввод в моей форме с помощью jquery, но это не сработало. Смотреть: @using (Html.BeginForm(Create, Contrato, FormMethod.Post, new < < @Html.AntiForgeryToken().
Ниже мой код: Как отключить отправку формы с.
Как отключить «повторную отправку формы» при использовании AJAX?
Данные отправляются, НО при обновлении страницы с формой выскакивает предложение об повторной отправке формы.
Примечания: Изначально форма скрыта, она появляется (fadeIn()) после клика по некоторому полю.
2 ответа 2
Вы «слушаете» событие submit на форме и «через него» отправляете данные. А событие submit для html формы является событием по умолчанию, т.е. таким, которое запускает стандартное поведение элемента. Для формы это переход по ссылке в атрибуте action с отправкой туда данных своих инпутов и прочих текстарэев методом, указанным в атрибуте method
а лучше не вызывать вовсе:
Всё ещё ищете ответ? Посмотрите другие вопросы с метками php html jquery ajax или задайте свой вопрос.
Похожие
Подписаться на ленту
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
дизайн сайта / логотип © 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.11.5.40661
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.