Отключить автоматическую отправку формы при нажатии кнопки

180

У меня есть HTML-форма, где я использую несколько кнопок. Проблема в том, что независимо от того, какую кнопку я нажимаю, форма будет отправлена, даже если кнопка не имеет типа «отправить». например, кнопки типа:, <button>Click to do something</button>приводят к отправке формы.

Это довольно больно делать e.preventDefault()для каждой из этих кнопок.

Я использую jQuery и jQuery UI, а сайт работает на HTML5.

Есть ли способ отключить это автоматическое поведение?

Париж
источник

Ответы:

460

Кнопки вроде <button>Click to do something</button> являются кнопками отправки.

Установите, type="button"чтобы изменить это. type="submit"по умолчанию (как указано в рекомендации HTML ).

Quentin
источник
24
потерял сон, исправляя мой код, потому что я не знал этой простой спецификации!
palerdot
4
Повторяя идею Палердо, рад, что нашел эту заметку после быстрого поиска в Google и не убитых часов. Очень знаю, большое спасибо.
Brooklynsweb
2
@NiketJoshi - Это утверждение не имеет ничего общего с вопросом, на который он отвечает. Если у вас есть новый вопрос, задайте его, но обязательно предоставьте четкое изложение проблемы и минимальный воспроизводимый пример .
Квентин
19

Вы можете просто попытаться использовать return false (возвращать false, переопределяет поведение по умолчанию для каждого элемента DOM) следующим образом:

myform.onsubmit = function ()
{ 
  // do what you want
  return false
}

а затем отправьте форму с помощью myform.submit ()

или альтернативно:

mybutton.onclick = function () 
{
   // do what you want
   return false
}

Также, если вы используете type="button"вашу форму, она не будет отправлена.

Борис Дмитриевич Теохаров
источник
8

<button>Это кнопки отправки, они не имеют других основных функций. Вам нужно будет установить тип кнопки.
Но если вы привязываете свой обработчик событий, как показано ниже, вы выбираете все кнопки и вам не нужно делать это вручную для каждой кнопки!

$('form button').on("click",function(e){
    e.preventDefault();
});
MAS-проекты
источник
Это e.preventDefault();.
17
0

если вы хотите добавить непосредственно к входу в качестве атрибута, используйте этот

 onclick="return false;" 

<input id = "btnPlay" type="button" onclick="return false;" value="play" /> 

это предотвратит поведение при отправке формы

bh_earth0
источник
0

другой:

if(this.checkValidity() == false) {

                $(this).addClass('was-validated');
                e.preventDefault();
                e.stopPropagation();
                e.stopImmediatePropagation();

                return false;
}
Привет хак
источник