Event preventdefault не работает submit

event.preventDefault не работает

У меня есть этот простой код, ничего особенного.

Всякий раз, когда я нажимаю кнопку «отправить», функция event.preventDefault не работает, и страница загружается.

Есть идеи, почему?

7 ответов

форма имеет событие отправки, а не кнопку. Кроме того, идентификатор должен быть уникальным, поэтому tag#id может быть просто #id .

1. Добавить кавычки вокруг ‘add.php’
2. Измените селектор в первой строке на атрибут id формы, которая содержит input#send .

Преимущество обработки обработчика submit() в форме, а не обработчика click на входе, состоит в том, что некоторые формы могут быть отправлены нажатием клавиши ввода (когда пользователь фокусируется на одном из полей формы). ) . Если у вас нет атрибута id , добавьте его или используйте другой селектор jQuery для нацеливания на тег формы.

Если вы используете protectDefault, я предполагаю, что это означает, что вы НЕ хотите действия отправки по умолчанию. Я бы просто использовал другое событие вместо .submit. Для меня это не действие отправки, которое вы хотите перехватить, а щелчок, который обычно вызывает отправку.

Вам необходимо привязать событие submit формы или событие click кнопки и вызвать event.preventDefault() , если вы хотите остановить отправку формы:

Если оба return false и event.stopPropagation() не работают, попробуйте следующий метод. Использование .on() сделает функцию отправки доступной. Как только вы измените .submit() на .on(«submit»..) , вы можете использовать return false или e.stopPropagation() .

Я полагаю, что событие submit относится к элементу form . Для ввода [type = ‘button’] вы можете использовать событие click.

Попробуйте вместо этого использовать return false

Источник

Почему не срабатывает preventDefault?

Есть html форма в которой пользователь может менять свои данные:

Но по неизвестным причинам, при нажатии на submit, сайт переходит по ссылке, которая указана в action=». Почему-то preventDefault не делает то, что должен. В чём проблема? Версия jquery 3.1.0, на сервере форму обрабатывает код.

В итоге форма отправляется и в базу заносятся новые данные, но страница перезагружается, хотя мне это не нужно.
Все действия происходят на странице /user/:userid

3 ответа 3

Если так вышло, что preventDefault не прервал отправки данных на сервер через submit , то можно добавить дополнительную проверку:

Также, чтобы отправки формы не произошло — достаточно внутри обработчика, точнее внутри функции, в конце, написать return false; . Если функция возвращает false , то отправки не будет, а если true — выполниться отправка формы.

preventDefault может не срабатывать по причине того, что имеются другие обработчики, которые отправляют данные с формы, к примеру. Для такого случая можно попробовать вызвать stopImmediatePropagation , а не preventDefault . То есть так:

Ну а вообще, вот этот код:

Вы в bind к «body» устанавливаете обработчик события на ajaxSend , который срабатывает каждый раз перед отправкой Ajax-запроса, причем setRequestHeader — устанавливает значение заголовка запроса HTTP . Проблема кроется скорее всего тут и preventDefault срабатывает, но срабатывает уже другой обработчик, после preventDefault . Ну и проблемная строка кода вот эта:

Источник

Почему не работает preventDefault на submit?

1) Есть форма. Есть обработчик на jQuery:

2) Как перед отправкой формы, после клика на submit, сначала исполнить AJAX запрос, и уже после выполнения(в моем случае это запись в БД) продолжить отправку формы?

• Вопрос задан более трёх лет назад
• 21593 просмотра

#cartForm — должен быть id формы. И, желательно, проверить консоль на наличие ошибок.

$(«#cartForm»).on(‘submit’, function (e) <

$(‘body’).on(‘submit’, ‘#cartForm’, function(e) <

1) $(«#cartForm»).on(‘submit’, function () <
Не работает потому что вы его аргументом функции не передаете надо — .on(‘submit’, function (event) <

2) Сделать submit формы програмно в javascript ($( «#cartForm» ).submit(callback) ) и разместить этот код в колбеке ajax запроса

Источник

Зачем нужен метод preventDefault

Возможно, вам уже когда-то встречалась в коде такая строка — evt.preventDefault() . Например, в интерактивных курсах по JavaScript. Давайте подробно разберём, зачем она нужна.

При разработке таких типичных элементов интерфейса, как форма или попап, часто нужно изменить поведение браузера по умолчанию. Допустим, при клике по ссылке мы хотим, чтобы открывался попап, но вместо этого браузер будет автоматически переходить по адресу, указанному в атрибуте href . Или вот другая проблема — мы хотим перед отправкой формы проверять корректность введённых данных, но после нажатия на кнопку submit форма каждый раз будет отправляться на сервер, даже если там куча ошибок. Такое поведение браузера нам не подходит, поэтому мы научимся его переопределять.

Объект события и метод preventDefault

Событие — это какое-то действие, произошедшее на странице. Например, клик, нажатие кнопки, движение мыши, отправка формы и так далее. Когда срабатывает событие, браузер создаёт объект события Event . Этот объект содержит всю информацию о событии. У него есть свои свойства и методы, с помощью которых можно эту информацию получить и использовать. Один из методов как раз позволяет отменить действие браузера по умолчанию — preventDefault() .

Event можно передать в функцию-обработчик события и в ней указать инструкции, которые должны быть выполнены, когда оно сработает. При передаче объекта события в обработчик обычно используется сокращённое написание — evt .

Пример: когда ссылка — не ссылка

Ранее мы уже говорили о попапе, который должен появляться при клике на ссылку — давайте разберём этот кейс на практике. Так будет выглядеть разметка в упрощённом виде:

Мы хотим при клике на ссылку click-button добавлять элементу с классом content класс show . Он сделает попап видимым, поменяв значение свойства display с none на block . Напишем логику добавления этого класса с помощью JavaScript:

Если мы уберём строку evt.preventDefault() , вместо попапа откроется отдельная страница pop-up.html , адрес которой прописан в атрибуте href у ссылки. Такая страница нужна, потому что мы хотим, чтобы вся функциональность сайта была доступна, если скрипт по какой-то причине не будет загружен. Именно поэтому мы изначально реализовали кнопку с помощью тега a , а не button . Но у нас с JavaScript всё в порядке, поэтому вместо отдельной страницы мы открыли попап, отменив действие браузера по умолчанию.

Пример: проверка формы перед отправкой

Разберём следующий кейс — отправку формы при нажатии на кнопку submit . Допустим, мы хотим перед отправкой проверять введённые данные, потому что в поле ввода обязательно должно быть значение ‘Кекс’ и никакое другое. Разметка формы:

При нажатии на кнопку «Готово» сработает событие отправки формы submit , и форма отправится вне зависимости от корректности введённого значения, поэтому мы должны перехватить отправку.

Здесь мы не дали отправить форму при неверно введённом значении. Но если всё в порядке, условие не выполнится, и форма будет отправлена как обычно.

Неотменяемые события

Не для всех событий можно отменить действие по умолчанию. Например, событие прокручивания страницы scroll проигнорирует попытки отменить его. Чтобы узнать, можно отменить действие по умолчанию или нет, нужно обратиться к свойству cancelable объекта Event . Оно будет равно true , если событие можно отменить, и false — в обратном случае.

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

События — важная часть JavaScript

Пройдите бесплатный тренажёр — узнаете много нового.

Нажатие на кнопку — согласие на обработку персональных данных

Источник

Действия браузера по умолчанию

Многие события автоматически влекут за собой действие браузера.

• Клик по ссылке инициирует переход на новый URL.
• Нажатие на кнопку «отправить» в форме – отсылку её на сервер.
• Зажатие кнопки мыши над текстом и её движение в таком состоянии – инициирует его выделение.

Если мы обрабатываем событие в JavaScript, то зачастую такое действие браузера нам не нужно. К счастью, его можно отменить.

Отмена действия браузера

Есть два способа отменить действие браузера:

• Основной способ – это воспользоваться объектом event . Для отмены действия браузера существует стандартный метод event.preventDefault() .
• Если же обработчик назначен через on (не через addEventListener ), то также можно вернуть false из обработчика.

В следующем примере при клике по ссылке переход не произойдёт:

Обычно значение, которое возвращает обработчик события, игнорируется.

Единственное исключение – это return false из обработчика, назначенного через on .

В других случаях return не нужен, он никак не обрабатывается.

Пример: меню

Рассмотрим меню для сайта, например:

Данный пример при помощи CSS может выглядеть так:

В HTML-разметке все элементы меню являются не кнопками, а ссылками, то есть тегами . В этом подходе есть некоторые преимущества, например:

• Некоторые посетители очень любят сочетание «правый клик – открыть в новом окне». Если мы будем использовать или , то данное сочетание работать не будет.
• Поисковые движки переходят по ссылкам при индексации.

Например, вот так:

Если мы уберём return false , то после выполнения обработчика события браузер выполнит «действие по умолчанию» – переход по адресу из href . А это нам здесь не нужно, мы обрабатываем клик сами.

Кстати, использование здесь делегирования событий делает наше меню очень гибким. Мы можем добавить вложенные списки и стилизовать их с помощью CSS – обработчик не потребует изменений.

Некоторые события естественным образом вытекают друг из друга. Если мы отменим первое событие, то последующие не возникнут.

Например, событие mousedown для поля приводит к фокусировке на нём и запускает событие focus . Если мы отменим событие mousedown , то фокусирования не произойдёт.

В следующем примере попробуйте нажать на первом – происходит событие focus . Но если вы нажимаете по второму элементу, то события focus не будет.

Это потому, что отменено стандартное действие mousedown . Впрочем, фокусировка на элементе всё ещё возможна, если мы будем использовать другой способ. Например, нажатием клавиши Tab можно перейти от первого поля ввода ко второму. Но только не через клик мышью на элемент, это больше не работает.

Опция «passive» для обработчика

Необязательная опция passive: true для addEventListener сигнализирует браузеру, что обработчик не собирается выполнять preventDefault() .

Почему это может быть полезно?

Есть некоторые события, как touchmove на мобильных устройствах (когда пользователь перемещает палец по экрану), которое по умолчанию начинает прокрутку, но мы можем отменить это действие, используя preventDefault() в обработчике.

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

Опция passive: true сообщает браузеру, что обработчик не собирается отменять прокрутку. Тогда браузер начинает её немедленно, обеспечивая максимально плавный интерфейс, параллельно обрабатывая событие.

Для некоторых браузеров (Firefox, Chrome) опция passive по умолчанию включена в true для таких событий, как touchstart и touchmove .

event.defaultPrevented

Свойство event.defaultPrevented установлено в true , если действие по умолчанию было предотвращено, и false , если нет.

Рассмотрим практическое применение этого свойства для улучшения архитектуры.

Помните, в главе Всплытие и погружение мы говорили о event.stopPropagation() и упоминали, что останавливать «всплытие» – плохо?

Иногда вместо этого мы можем использовать event.defaultPrevented , чтобы просигналить другим обработчикам, что событие обработано.

Давайте посмотрим практический пример.

По умолчанию браузер при событии contextmenu (клик правой кнопкой мыши) показывает контекстное меню со стандартными опциями. Мы можем отменить событие по умолчанию и показать своё меню, как здесь:

Теперь в дополнение к этому контекстному меню реализуем контекстное меню для всего документа.

При правом клике должно показываться ближайшее контекстное меню.

Проблема заключается в том, что когда мы кликаем по элементу elem , то мы получаем два меню: контекстное меню для кнопки и (событие всплывает вверх) контекстное меню для документа.

Как это поправить? Одно из решений – это подумать: «Когда мы обрабатываем правый клик в обработчике на кнопке, остановим всплытие», и вызвать event.stopPropagation() :

Теперь контекстное меню для кнопки работает как задумано. Но цена слишком высока. Мы навсегда запретили доступ к информации о правых кликах для любого внешнего кода, включая счётчики, которые могли бы собирать статистику, и т.п. Это слегка неразумно.

Альтернативным решением было бы проверить в обработчике document , было ли отменено действие по умолчанию? Если да, тогда событие было обработано, и нам не нужно на него реагировать.

Сейчас всё работает правильно. Если у нас есть вложенные элементы и каждый из них имеет контекстное меню, то код также будет работать. Просто убедитесь, что проверяете event.defaultPrevented в каждом обработчике contextmenu .

Как мы можем видеть, event.stopPropagation() и event.preventDefault() (также известный как return false ) – это две разные функции. Они никак не связаны друг с другом.

Есть также несколько альтернативных путей, чтобы реализовать вложенные контекстные меню. Одним из них является единый глобальный объект с обработчиком document.oncontextmenu и методами, позволяющими хранить в нём другие обработчики.

Объект будет перехватывать любой клик правой кнопкой мыши, просматривать сохранённые обработчики и запускать соответствующий.

Но при этом каждый фрагмент кода, которому требуется контекстное меню, должен знать об этом объекте и использовать его вместо собственного обработчика contextmenu .

Итого

Действий браузера по умолчанию достаточно много:

• mousedown – начинает выделять текст (если двигать мышкой).
• click на – ставит или убирает галочку в input .
• submit – при нажатии на или при нажатии клавиши Enter в форме данные отправляются на сервер.
• keydown – при нажатии клавиши в поле ввода появляется символ.
• contextmenu – при правом клике показывается контекстное меню браузера.
• …и многие другие…

Все эти действия можно отменить, если мы хотим обработать событие исключительно при помощи JavaScript.

Чтобы отменить действие браузера по умолчанию, используйте event.preventDefault() или return false . Второй метод работает, только если обработчик назначен через on .

Опция passive: true для addEventListener сообщает браузеру, что действие по умолчанию не будет отменено. Это очень полезно для некоторых событий на мобильных устройствах, таких как touchstart и touchmove , чтобы сообщить браузеру, что он не должен ожидать выполнения всех обработчиков, а ему следует сразу приступать к выполнению действия по умолчанию, например, к прокрутке.

Если событие по умолчанию отменено, то значение event.defaultPrevented становится true , иначе false .

Технически, отменяя действия браузера по умолчанию и добавляя JavaScript, мы можем настроить поведение любого элемента. Например, мы можем заставить ссылку работать как кнопку, а кнопку вести себя как ссылка (перенаправлять на другой URL).

Но нам следует сохранять семантическое значение HTML элементов. Например, не кнопки, а тег должен применяться для переходов по ссылкам.

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

Источник