Question

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

为每个按钮执行e.preventDefault()非常痛苦。

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

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

Answer 1

<button>Click to do something</button> 之类的按钮提交按钮。

设置type="button"以更改它。 type="submit"是默认值（specified by the HTML recommendation）。

Answer 2

做你想做的事并不难。您可以尝试使用 return false （在每个DOM元素上返回false覆盖默认行为），如下所示：

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

然后使用myform.submit（）

提交表单

或者：

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

但是我认为输入类型=“按钮”/按钮类型=“按钮”不会提交您的表单，您可以毫无问题地使用它们。

Answer 3

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

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

Answer 4

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

 onclick="return false;" 

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

这会阻止表单提交行为

Answer 5

另一个：

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

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

                return false;
}

Answer 6

您可以使用纯JavaScript处理。代码示例：

<!DOCTYPE html>
<html>
  <body>
   <form onsubmit="someSubmit()">

     <input name="firstName" />
     <button onclick="someFunction()">Click me</button> 

   </form>

   <script>

      function someFunction(e) {
        /** Do some staff here **/
            
        /** Prevent submitting here **/
         e.preventDefault();
       }

      function someSubmit() {
        /** Not submitted **/
       }

    </script>

   </body>
</html>

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

6 个答案: