Как отменить отправку формы jquery
События и их обработка в 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 рассмотрим посредством следующего примера:
Код 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):
Много сложных способов сделать простую вещь:
У меня возникли небольшие проблемы при попытке отменить отправку формы. Я следовал этому уроку (хотя я не делаю сценарий входа в систему), и, похоже, он работает для него.
Я уже импортировал jQuery в шапку, и я знаю, что он работает. Моей первой мыслью было, что это может быть устаревшим, но на самом деле это всего лишь год назад.
Так кто-нибудь видит, что не так?
РЕДАКТИРОВАТЬ: Из того, что я прочитал, самый простой и подходящий способ прервать отправку, это вернуть ложь? Но я не могу заставить его работать. Я искал на форуме, и я нашел несколько полезных тем, но ни одна из них на самом деле не работает. Я должен что-то напортачить.
12 ответов
Спасибо всем за ответы! Мой друг попросил меня добавить
на форме. Это работает, но я все еще хотел бы знать не-inline-javascript трюк, который работает.
Вы указываете, что «что предупреждение перед» return false «не отображается».
У меня также была эта проблема, мой код (который не работал) был что-то вроде этого:
и внутри функции before_submit у меня было «return false», чтобы остановить отправку формы:
Я добавил «return» при привязке функции-обработчика события к форме, и это сработало:
Функция, прикрепленная к событию submit, должна возвращать false (в моем случае это анонимная функция). Итак. это одно решение одной причины этой проблемы
Просто мой скромный вклад в этот (без ответа, тоже устаревший) вопрос. Я уже несколько раз работал над этой проблемой с одним и тем же решением:
Это вызывает неправильный элемент / элемент, не приводя ни к ошибкам, ни к предупреждениям. Так что просто назовите свою кнопку отправки как-нибудь еще, и все волшебным образом начнет работать снова
Форма, к которой вы пытаетесь получить доступ, может быть динамически добавлена на вашу страницу. Вы должны использовать делегат для доступа к этой форме в этом случае
Для начала, вот достойный SSCCE. Все, что вам нужно сделать, это скопировать и запустить его.
Если это работает (по крайней мере, здесь работает, я получаю предупреждение, а форма вообще не отправляется), сравните его с вашим собственным кодом и постарайтесь урезать свой собственный код до такого вида, чтобы вы могли лучше заметить различия (и, следовательно, ваша ошибка).
Несмотря на это, по моему мнению, будет стоить усилий, чтобы пройтись по некоторым базовым / тривиальным учебникам по jQuery (и предпочтительно также JavaScript), чтобы лучше понять, что происходит под прикрытием, и научиться использовать такие инструменты, как Firebug.
Отмена повторной отправки формы
Мне часто задают вопросы относительно отмены повторной отправки формы. Например, Вы сделали форму добавления комментария, добавили обработчик на эту же страницу. Затем при добавлении комментария он успешно добавляется, но стоит пользователю нажать F5, как форма будет отправлена ещё раз. А F5 пользователь может легко нажать, если страница будет долго грузиться. В итоге, вместо 1-го комментария будет целых 2, а то и больше. В этой статье я покажу, как этого можно избежать.
Для начала разберём более подробно проблему на примере этого кода:
Нажав на кнопку «Возвести в квадрат«, Вы увидите результат работы скрипта. Но стоит после этого пользователю нажать F5, как скрипт снова будет выполняться. В данном случае, это не так критично, как с добавлением комментарием, однако, зачем нужна лишняя нагрузка на сервер?
А код страницы с формой теперь будет выглядеть так:
Подведу итог того, как отменить повторную отправку формы:
Вот так это делается в простых скриптах. Да и, в сложных, в конечном счёте делается то же самое.
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Комментарии ( 11 ):
Или написать в форме action=».»
При таком примере писать придется. Редирект убьет все POSTы
А я делал по проще: в форму добавил скрытый input, в котором храниться случайное число генерирующееся php. А также при генерации оно забивается в сессии. Затем при принятии формы сначала проверяется совпадение числа, и если нет совпадения форма не обрабатывается. Это как скрытая капча, которая сама вводиться
Я сделал так: if (isset($_POST[‘knopka’]))
А меня интересует совсем противоположный вопрос! А как зделать чтоб отправка формы продублировалясь три раза с интервалом в секунду! Какой обрабочик нужно добавить в код?
Здравствуйте. Не очень понял как делать. Изучаю Ваш курс основы PHP. Перепроверил код, но все равно при обновлении страницы комментарий дублируется. А у Вас на видео все нормально, без всяких редиректов. Вот сам код:
Добавить запись
Записи в гостевой книге:
Я конечно извиняюсь, но вы сами то запускали, тестили свои скрипты, во первых после нажатия и отправки запроса белый экран, результаты почему то выводятся в консоле, а во вторых это не работает, т.к. при обновлении данные отправляются повторно. Только что проверил!
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2021 Русаков Михаил Юрьевич. Все права защищены.
Запретить/отключить повторную отправку формы php
Подробно о повторной отправке формы php
Пример повторной отправки формы
Разместим выше приведенный код прямо здесь:
Нажмите кнопку «Нажми на меня».
После перезагрузки страницы нажмите «F5».
Если вы нажмете «продолжить», то первые данные отправятся второй раз на сервер.
Если речь идет о комментариях, то тут появятся два абсолютно одинаковых комментария.
Как избавиться от «повторной отправки формы!?»
Отключаем повторную отправку формы php
Чтобы отключить «повторную отправку формы php» нам придется немного изменить код, который мы написали ранее.
Чем отличается выше приведенный код(в предыдущем пункте).
Создаем сессию «$_SESSION[example1]» и предаем туда данные из «_POST».
+ exit, чтобы программа дальше не пошла.
При перезагрузке проверяем существует ли сессия:
Соберем весь код отмены повторной отправки формы php
Как найду, так исправлю.
Если у вас тоже не срабатывает, то выделенное красным можно удалить.
Еще вариант отключения повторной отправки формы.
Как избавиться от повторной отправки формы? Для этого нам понадобится.
Сделать отдельную страницу, на которую произойдет переадресация после выполнения php.
Для вывода результата. тоже можно использовать сессию.
Об использовании этого варианта отключения повторной отправки формы?
Можно ли использовать такой вариант отключения повторной отправки формы? Вполне! Этот вариант
Как происходит процесс отключения повторной отправки формы в php?
Чтобы отключить повторную отправку формы через сторонний файл нам понадобится:
Пример формы, чтобы отправить первичный post запрос.
Чтобы не бродить по все странице ища результат выполнения скрипта, нам нужен якорь
Как работает отключение повторной отправки формы!?
Переходим к примеру. который отключит повторную отправку формы!
В поле ввода введите свой текст, либо оставьте так.
Нажмите кнопку Удали повторную отправку формы! :
После получения ответа. попробуйте нажать «F5».
Вы ничего не увидите, страница просто перезагрузится. му убрали повторную отправку формы!
Сообщение системы комментирования :
Форма пока доступна только админу. скоро все заработает. надеюсь.