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

【问题标题】：Disable form auto submit on button click在按钮单击时禁用表单自动提交
【发布时间】：2012-04-07 03:55:29
【问题描述】：

我有一个使用多个按钮的 HTML 表单。问题是无论我点击哪个按钮，即使按钮不是“提交”类型，表单也会被提交。例如像 :<button>Click to do something</button> 这样的按钮会导致表单提交。

为这些按钮中的每一个都做一个e.preventDefault() 是相当痛苦的。

我使用 jQuery 和 jQuery UI，网站是 HTML5。

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

【问题讨论】：

标签： javascript html button form-submit forms

【解决方案1】：

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

设置type="button" 来改变它。 type="submit" 是默认值（如specified by the HTML spec）：

缺失值默认和无效值默认为提交按钮状态。

【讨论】：

【解决方案2】：

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

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

【讨论】：

我是e.preventDefault();。
美女，我也是来发同样的东西的

【解决方案3】：

你可以像这样尝试使用 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"，您的表单将不会被提交。

【讨论】：

【解决方案4】：

如果你想直接添加到输入作为属性，使用这个

 onclick="return false;" 

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

这将阻止表单提交行为

【讨论】：

【解决方案5】：

另一个：

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

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

                return false;
}

【讨论】：

【解决方案6】：

如mas-designs 所说，请致电preventDefault()。您可以在表单本身上调用它。这是一个适用于所有表单的函数，vanilla JS。

function forms_ini(){
  for(var form of document.getElementsByTagName('form')){
    form.addEventListener('submit', function(ev){
      ev.preventDefault()
    })
  }
}

【讨论】：