禁用单击按钮时自动提交表单

180

我有一个HTML表单，其中使用了几个按钮。问题是，无论我单击哪个按钮，即使按钮的类型不是“ submit”，也将提交表单。例如：之类的按钮<button>Click to do something</button>，导致表单提交。

e.preventDefault()为这些按钮中的每个按钮执行一次操作是非常痛苦的。

我使用jQuery和jQuery UI，并且网站使用HTML5。

有没有办法禁用这种自动行为？

— 巴黎
source

458

像按钮<button>Click to do something</button> 是提交按钮。

设置type="button"以改变它。type="submit"是默认值（由HTML建议指定）。

— 昆汀
source

24

一天的睡眠徒劳地修改了我的代码，因为我不知道这个简单的规范！

— Palerdot

4

呼应Palerdot的想法，很高兴我在Google进行了快速搜索后发现了这条笔记，并没有花费数小时。非常知道，非常感谢。

— brooklynsweb

2

@NiketJoshi —该声明似乎与此答案的问题无关。如果您有一个新问题，请提出一个问题，但请确保提供清晰的问题说明和最少的可复制示例。

— 昆汀

19

您可以尝试使用return false（return false会覆盖每个DOM元素的默认行为），如下所示：

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

然后使用myform.submit（）提交表单

或者：

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

另外，如果您使用type="button"表格，则不会提交。

— 鲍里斯·迪奥哈罗夫（Boris D.Teoharov）
source

8

<button>实际上是“提交”按钮，它们没有其他主要功能。您将必须将类型设置为按钮。
但是，如果像下面那样绑定事件处理程序，则可以将所有按钮作为目标，而不必为每个按钮手动进行操作！

$('form button').on("click",function(e){
    e.preventDefault();
});

— mas-designs
source

是e.preventDefault();。

— hlcs

0

如果要直接添加到输入作为属性，请使用此

 onclick="return false;" 

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

这将阻止表单提交行为

— bh_earth0
source

0

另一个：

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

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

                return false;
}

— 你好哈克
source