Html запретить отправку формы

Как запретить кнопкам отправлять формы

На следующей странице с Firefox кнопка удаления отправляет форму, но кнопка добавления — нет. Как предотвратить удаление кнопки удаления формы?

      
Title:
 Add Item Remove Last Item 
Name
 
 
 
 
   

15 ответов

Вы используете элемент кнопки HTML5. Помните, причина в том, что эта кнопка имеет поведение по умолчанию для submit, как указано в спецификации W3, как показано здесь: W3C HTML5

Поэтому вам нужно явно указать его тип:

чтобы переопределить тип отправки по умолчанию. Я просто хочу указать, почему это происходит =)

Я также хотел бы отметить, что элемент HTML, имеющий атрибут type, одним из типов которого является кнопка , не должен иметь f # $ ‘n тип отправки по умолчанию. Это просто идиотизм, и огромная ошибка в спецификации. Я использую кнопки в формах все время, и даже если бы это был крайний случай (а это не так), все равно было бы целесообразно, чтобы тип по умолчанию был отправлен.

Установите тип на кнопках:

Add Item Remove Last Item 

. что не позволит им инициировать действие отправки, когда в обработчике события возникает исключение. Затем исправьте свою функцию removeItem() , чтобы она не вызывала исключение:

function removeItem() < var rows = $('form tr'); if ( rows.length >2 ) < // change: work on filtered jQuery object rows.filter(":last").html(''); $('form :hidden:last').val(''); >else < alert('Cannot remove any more rows'); >> 

Обратите внимание на изменение: ваш исходный код извлек элемент HTML из набора jQuery, а затем попытался вызвать на нем метод jQuery — это вызвало исключение, в результате чего было задано поведение по умолчанию для кнопки.

FWIW, вы можете пойти по этому пути. Подключите обработчики событий с помощью jQuery и используйте метод preventDefault() на jQuery event объект, чтобы отменить начальное поведение по умолчанию:

$(function() // execute once the DOM has loaded < // wire up Add Item button click event $("#AddItem").click(function(event) < event.preventDefault(); // cancel default behavior //. rest of add logic >); // wire up Remove Last Item button click event $("RemoveLastItem").click(function(event) < event.preventDefault(); // cancel default behavior //. rest of remove last logic >); >); . Add Item Remove Last Item 

Этот метод сохраняет всю вашу логику в одном месте, что упрощает отладку. она также позволяет вам реализовать откат, изменив type на кнопки обратно на submit и обработать событие server-side — это ненавязчивый JavaScript .

type = «button» не всегда работает в Firefox для меня. Если js достаточно сложный и есть ошибка, Firefox все равно отправит форму. Безумие!

@ MatthewLock: Вряд ли — ошибка в скрипте просто отключает этот блок кода, и действие продолжается как обычно. Попробуйте вызвать методы событий jQuery e.preventDefault () и / или e.stopPropgation () в качестве первых строк метода. Смотрите stackoverflow.com/questions/2017755/… чтобы узнать больше

Я думаю, что HTML здесь странно. По умолчанию это должно быть type = «button», а не отправка. Для меня всегда неожиданно видеть эту отправку по умолчанию. Это исключение.

Учтите, что type=»button» совершенно бесполезен, если вы не подключите скрипт @httpete. Конечно, это довольно распространенный сценарий использования — но если вы все равно стараетесь указать поведение не по умолчанию .

Когда-то мне было нужно что-то очень похожее. и я понял.

Итак, что я здесь делаю, так это то, как я делаю трюки, чтобы иметь форму, которая может быть отправлена ​​JavaScript без проверки и выполнения проверки только тогда, когда пользователь нажимает кнопку (обычно кнопку отправки).

В этом примере я буду использовать минимальную форму, только с двумя полями и кнопкой отправки.

Помните, что нужно: Из JavaScript он должен быть представлен без проверки. Однако, если пользователь нажимает такую ​​кнопку, валидация должна быть выполнена и отправлена ​​форма, только если пройти проверку.

Обычно все начиналось бы с чего-то рядом (я удалял все лишние вещи неважно):

Посмотрите, как тег формы не имеет onsubmit=». » (помните, что это условие не имело его).

Проблема заключается в том, что форма всегда отправляется, независимо от того, возвращается ли onclick true или false .

Если я изменяю type=»submit» для type=»button» , он работает, но не работает. Он никогда не отправляет форму, но это можно сделать легко.

И на function Validator , где return True; есть, я также добавляю предложение отправки JavaScript, что-то похожее на это:

id=»» предназначен только для JavaScript getElementById , name=»» предназначен только для того, чтобы он отображался в данных POST.

Таким образом, он работает так, как мне нужно.

Я помещаю это только для людей, которым не нужна функция onsubmit в форме, но сделайте некоторую проверку, когда кнопка нажата пользователем.

Почему мне не нужно вводить onsubmit в теге формы? Легко, на других частях JavaScript мне нужно выполнить отправку, но я не хочу, чтобы там была какая-либо проверка.

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

Это может показаться странным, но не тогда, когда вы думаете, например: о входе в систему. с некоторыми ограничениями. например, не позволяйте использовать сеансы PHP и ни куки файлы не разрешены!

Поэтому любая ссылка должна быть преобразована в такую ​​форму submit, поэтому данные входа не будут потеряны. Когда логин еще не сделан, он также должен работать. Поэтому никакие проверки не должны выполняться по ссылкам. Но я хочу представить сообщение пользователю, если пользователь не ввел оба поля, пользователь и пароль. Так что, если его нет, форма не должна быть отправлена! есть проблема.

См. проблему: форма не должна отправляться, когда одно поле пуст, только если пользователь нажал кнопку, если это код JavaScript, он должен быть отправлен.

Если я выполняю работу над onsubmit в теге формы, мне нужно будет знать, является ли это пользователем или другим JavaScript. Поскольку никакие параметры не могут быть переданы, это невозможно напрямую, поэтому некоторые люди добавляют переменную, чтобы указать, нужно ли делать валидацию или нет. Первым делом в функции проверки является проверка этого значения переменной и т.д. Слишком сложно, и код не говорит, что действительно нужно.

Таким образом, решение не должно иметь onsubmit в теге формы. Insead поместите его там, где это действительно необходимо, на кнопку.

С другой стороны, зачем ставить код onsubmit, так как концептуально я не хочу, чтобы он прошел проверку. Мне действительно нужна проверка кнопок.

Не только код более понятен, но и там, где он должен быть. Просто запомните это: — Я не хочу, чтобы JavaScript проверял форму (которая всегда должна выполняться PHP на стороне сервера) — Я хочу показать пользователю сообщение о том, что все поля не должны быть пустыми, для чего нужен JavaScript (клиентская сторона)

Итак, почему некоторые люди (подумайте или скажите), это должно быть сделано при проверке onsumbit? Нет, концептуально я не делаю проверку onsumbit на стороне клиента. Я просто что-то нажимаю на кнопку, поэтому почему бы просто не позволить этому реализовать?

Хорошо, что код и стиль отлично подходят. На любом JavaScript, который мне нужно отправить, я просто поставил:

document.getElementById('theFormID').action='./GoToThisPage.php'; // Where to go document.getElementById('theFormID').submit(); // Send POST data and go there 

И это пропускает проверку, когда мне это не нужно. Он просто отправляет форму и загружает другую страницу и т.д.

Но если пользователь нажимает кнопку отправки (aka type=»button» not type=»submit» ), проверка выполняется до того, как отправить форму и если она не действительна не отправлена.

Надеюсь, это поможет другим не пытаться использовать длинный и сложный код. Просто не используйте onsubmit , если это не нужно, и используйте onclick . Но просто не забудьте изменить type=»submit» на type=»button» и, пожалуйста, не забудьте сделать submit() JavaScript.

Источник

Запретить HTML от отправки с помощью JavaScript/jQuery

В этом посте мы обсудим, как предотвратить отправку формы HTML в JavaScript и jQuery.

Самое простое решение для предотвращения отправки формы — вернуть false в обработчик события отправки, определенный с помощью onsubmit свойство в HTML элемент.

HTML

Choose your preferred contact method:

В качестве альтернативы вы можете позвонить в Event.preventDefault() чтобы предотвратить выполнение действия по умолчанию при отправке формы.

HTML

Choose your preferred contact method:

Обратите внимание, что всегда рекомендуется отделить JavaScript от разметки HTML, но приведенное выше решение не может этого сделать. Лучшее решение — привязать обработчик события к событию “отправить” JavaScript. Событие отправки срабатывает всякий раз, когда пользователь отправляет форму.

JS

HTML

Choose your preferred contact method:

Это все о предотвращении HTML

от отправки в JavaScript и jQuery.

Средний рейтинг 4.27 /5. Подсчет голосов: 37

Голосов пока нет! Будьте первым, кто оценит этот пост.

Сожалеем, что этот пост не оказался для вас полезным!

Расскажите, как мы можем улучшить этот пост?

Спасибо за чтение.

Пожалуйста, используйте наш онлайн-компилятор размещать код в комментариях, используя C, C++, Java, Python, JavaScript, C#, PHP и многие другие популярные языки программирования.

Как мы? Порекомендуйте нас своим друзьям и помогите нам расти. Удачного кодирования 🙂

Этот веб-сайт использует файлы cookie. Используя этот сайт, вы соглашаетесь с использованием файлов cookie, нашей политикой, условиями авторского права и другими условиями. Читайте наши Политика конфиденциальности. Понятно

Источник

Блокировка отправки html формы по событию submit на чистом JavaScript

Блокировка в событии submit добавляемом через addEventListener в виде анонимной функции.

Для того чтобы остановить/запретить/заблокировать отправку html формы на чистом JavaScript через событие которое добавляется к форме через передаваемую в addEventListener анонимную функцию можно воспользоваться кодом из листинга ниже.

Пример работы скрипта

Блокировка в событии submit добавляемом через addEventListener через передаваемую функцию.

Если Вам требуется описать функцию которая в частности будет останавливать отправку html отдельно, а не передавать анонимную функцию непосредственно в addEventListener как это показано в коде выше, тогда код можно переписать следующим образом.

Обратите внимание, что блокировка отправи html формы осуществляется именно за счёт использования preventDefault применяемого к объекту передаваемого в функцию события, а не за счёт возврата этой функцией значения false через return в отличии от примера который рассмотрен ниже. Поскольку код мало отличается от первого примера отдельно демонстрация его работы не приводится.

Onsubmit.

Пример работы скрипта

Вы так же можете прочитать следующие статьи:

• Отличия возврата товара в интернет-магазине и в рознице.
• Могут ли приставы забрать машину за долги и как этого избежать?
• Валидация HTML форм JQuery плагином
• Функция для получения Id свойства типа список(enum) в Bitrix по значению, а в случаи если такого значения не существует создаёт его и возвращает Id.
• SQL запросы которые выполняет Joomla 3.9.14 в процессе загрузки главной страницы сайта
• Маппинг сетевых портов на Delphi 6 (portMapping)
• Не удалось снять LHR защиту на карте Palit 3060 ti LHR Dual V1 на материнской плате ASUS H81m-k.
• Функция для копирования части строки представленной в виде указателя на массив char для Borland C++ Builder 6 аналогичная PHP substr.
• API bitrix добавление, удаление и обновление колличества товаров в корзине
• Добавление типа информационного блока в Bitrix с помощью API
• Продвижение канала YouTube. Программы и сервисы для начинающих и состоявшихся YouTube блогеров.
• Проверка подлинности документации

В YouTube есть достаточно популярный канал, а ещё он есть по другой ссылке — Danatar. Вернее В YouTube есть несколько каналов данного автора, Вы можете перейти по ссылке и посмотреть какие классные видео снимает Danatar. Как с использованием Bitrix ORM связать несколько(три или более) таблиц.

Источник