如何防止按钮提交表单

您正在使用 HTML5 按钮元素。请记住，原因是此按钮具有提交的默认行为，如 W3 规范中所述，如下所示：W3C HTML5 Button

所以你需要明确指定它的类型：

<button type="button">Button</button>

为了覆盖默认提交类型。我只想指出发生这种情况的原因。

---

在按钮上设置类型：

<button type="button" onclick="addItem(); return false;">Add Item</button>
<button type="button" onclick="removeItem(); return false;">Remove Last Item</button>

...这将防止他们在事件处理程序中发生异常时触发提交操作。然后，修复您的 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');
  }
}

请注意更改：您的原始代码从 jQuery 集合中提取了一个 HTML 元素，然后尝试对其调用 jQuery 方法 - 这引发了异常，导致按钮的默认行为。

FWIW，您可以使用另一种方法...使用 jQuery 连接您的事件处理程序，并使用 jQuery 的 event 对象上的 preventDefault() 方法预先取消默认行为：

$(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
  });

});

...

<button type="button" id="AddItem" name="AddItem">Add Item</button>
<button type="button" id="RemoveLastItem" name="RemoveLastItem">Remove Last Item</button>

这种技术将您的所有逻辑保存在一个地方，使其更易于调试......它还允许您通过将按钮上的 type 更改回 submit 并处理事件服务器端来实现回退- 这称为 unobtrusive JavaScript。

---

前段时间我需要一些非常相似的东西......我得到了它。

因此，我在这里介绍的是如何使表单能够通过 JavaScript 提交而无需任何验证，并且仅在用户按下按钮（通常是发送按钮）时才执行验证。

对于示例，我将使用一个最小的表单，只有两个字段和一个提交按钮。

记住需要什么：从 JavaScript 必须能够在没有任何检查的情况下提交。但是，如果用户按下这样的按钮，则必须完成验证，并且只有通过验证才能发送表单。

通常一切都会从这个附近的东西开始（我删除了所有不重要的额外内容）：

<form method="post" id="theFormID" name="theFormID" action="">
   <input type="text" id="Field1" name="Field1" />
   <input type="text" id="Field2" name="Field2" />
   <input type="submit" value="Send" onclick="JavaScript:return Validator();" />
</form>

看看表单标签是如何没有 onsubmit="..." 的（记住它是没有它的条件）。

问题是表单总是被提交，无论 onclick 返回 true 还是 false。

如果我将 type="submit" 更改为 type="button"，它似乎有效但无效。它从不发送表单，但这很容易完成。

所以最后我用了这个：

<form method="post" id="theFormID" name="theFormID" action="">
   <input type="text" id="Field1" name="Field1" />
   <input type="text" id="Field2" name="Field2" />
   <input type="button" value="Send" onclick="JavaScript:return Validator();" />
</form>

在 return True; 所在的 function Validator 上，我还添加了一个 JavaScript 提交语句，类似于以下内容：

function Validator(){
   //  ...bla bla bla... the checks
   if(                              ){
      document.getElementById('theFormID').submit();
      return(true);
   }else{
      return(false);
   }
}

id="" 仅适用于 JavaScript getElementById，name="" 仅适用于它出现在 POST 数据中。

以这种方式，它可以按我的需要工作。

我只为那些不需要在表单上使用 onsubmit 功能，但在用户按下按钮时进行一些验证的人。

为什么我不需要在表单标签上提交？很简单，在其他 JavaScript 部分我需要执行提交，但我不希望有任何验证。

原因：如果用户是执行我想要的提交并且需要完成验证的用户，但如果是 JavaScript，有时我需要执行提交，而这样的验证会避免它。

这听起来可能很奇怪，但在思考时却不是这样：在登录时……有一些限制……比如不允许使用 PHP 会话，也不允许使用 cookie！

所以任何链接都必须转换成这样的表单提交，这样登录数据才不会丢失。当尚未完成登录时，它也必须工作。因此，不必对链接执行验证。但是，如果用户没有输入用户和通行证这两个字段，我想向用户显示一条消息。因此，如果缺少一个，则不得发送该表格！有问题。

看到问题：只有当用户按下按钮时，一个字段为空时才不能发送表单，如果它是 JavaScript 代码，则必须能够发送。

如果我在表单标记上执行 onsubmit 的工作，我需要知道它是用户还是其他 JavaScript。由于不能传参数，所以不能直接传，所以有人加了一个变量来判断是否必须做验证。验证功能的第一件事是检查变量值等......太复杂了，代码并没有说明真正想要什么。

所以解决方案是不要在表单标签上设置 onsubmit。 Insead 把它放在了真正需要的地方，就在按钮上。

另一方面，为什么要放置 onsubmit 代码，因为从概念上讲我不想要 onsubmit 验证。我真的想要按钮验证。

不仅代码更清晰，而且它必须在哪里。请记住这一点： - 我不希望 JavaScript 验证表单（必须始终由服务器端的 PHP 完成） - 我想向用户显示一条消息，告诉所有字段不能为空，这需要 JavaScript（客户端边）

那么为什么有些人（想或告诉我）必须在现场验证上完成？不，从概念上讲，我没有在客户端进行 onsumbit 验证。我只是在按下按钮上做某事，那么为什么不让它实现呢？

好吧，代码和样式完美地解决了问题。在我需要发送我刚刚输入的表单的任何 JavaScript 上：

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

当我不需要它时，它会跳过验证。它只是发送表单并加载不同的页面等。

但是，如果用户单击提交按钮（又名 type="button" 而不是 type="submit"），则在提交表单之前完成验证，如果无效则不发送。

希望这可以帮助其他人不要尝试冗长而复杂的代码。如果不需要，请不要使用 onsubmit，而使用 onclick。但请记住将 type="submit" 更改为 type="button" 并且请不要忘记通过 JavaScript 执行 submit()。

---

我同意 Shog9，但我可能会改用：

<input type = "button" onClick="addItem(); return false;" value="Add Item" />

According to w3schools，<button> 标记在不同浏览器上的行为不同。

---

您可以使用 jQuery 简单地获取按钮的引用，并防止其传播，如下所示：

 $(document).ready(function () {
    $('#BUTTON_ID').click(function(e) {

            e.preventDefault();
            e.stopPropagation();
            e.stopImmediatePropagation();

            return false;
    });});

---

$("form").submit(function () { return false; }); 这将阻止按钮提交，或者您可以将按钮类型更改为“按钮”<input type="button"/> 而不是 <input type="submit"/> 只有当此按钮不是此表单中的唯一按钮时才有效。

---

假设您的 HTML 表单有 id="form_id"

<form id="form_id">
<!--your HTML code-->
</form>

将此 jQuery 片段添加到您的代码中以查看结果，

$("#form_id").submit(function(){
  return false;
});

---

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

您必须添加 type

---

这是一个 html5 错误，就像已经说过的那样，您仍然可以将按钮作为提交（如果您想同时涵盖 javascript 和非 javascript 用户）使用它，例如：

     <button type="submit" onclick="return false"> Register </button>

这样，您将取消提交，但仍然执行您在 jquery 或 javascript 函数中所做的任何事情，并为没有 javascript 的用户执行提交。

---

只需在您的方法中添加 e.preventDefault(); 即可阻止您的页面提交表单。

function myFunc(e){
       e.preventDefault();
}

根据 MDN Web Docs

Event 接口的 preventDefault () 方法告诉用户代理，如果事件没有被显式处理，它的默认操作不应该像通常那样被考虑在内。事件继续像往常一样传播，除非其中一个侦听器调用 stopPropagation () 或 stopImmediatePropagation ()，其中任何一个都会终止传播。

---

return false 防止默认行为。但 return false 打破了额外点击事件的冒泡。这意味着如果在调用此函数后还有任何其他点击绑定，则其他的不考虑。

 <button id="btnSubmit" type="button">PostData</button>
 <Script> $("#btnSubmit").click(function(){
   // do stuff
   return false;
}); </Script>

或者简单地说你可以这样放

 <button type="submit" onclick="return false"> PostData</button>

---

我确信在 FF

removeItem 

函数遇到 JavaScript 错误，这在 IE 上没有发生

当出现 javascript 错误时，“return false”代码将无法运行，从而使页面回发

---

以正常方式设置按钮并使用 event.preventDefault like..

   <button onclick="myFunc(e)"> Remove </button>  
   ...
   ...

   In function...

   function myFunc(e){
       e.preventDefault();
   }

---

return false;

您可以在函数结束时或函数调用后返回 false。

只要它是最后发生的事情，表单就不会提交。

---

这是一个简单的方法：

$('.mybutton').click(function(){

    /* Perform some button action ... */
    alert("I don't like it when you press my button!");

    /* Then, the most important part ... */
    return false;

});

---

我现在无法对此进行测试，但我认为您可以使用 jQuery 的 preventDefault 方法。

---

以下示例代码向您展示了如何防止按钮单击提交表单。

你可以试试我的示例代码：

 <form autocomplete="off" method="post" action="">
   <p>Title:
     <input type="text" />
   </p>
   <input type="button" onclick="addItem()" value="Add Item">
   <input type="button" onclick="removeItem()" value="Remove Last Item">
   <table>
     <th>Name</th>

     <tr>
       <td>
         <input type="text" id="input1" name="input1" />
       </td>
       <td>
         <input type="hidden" id="input2" name="input2" />
       </td>
     </tr>
   </table>
   <input id="submit" type="submit" name="submit" value="Submit">
 </form>
<script language="javascript">
function addItem() {
return false;
}

function removeItem() {
return false;
}
</script>

---

如果您有 <input />

用它

<input type="button"/>

如果您有 <button>btn</button>

用它

<button type="button">btn</button>

---

函数 removeItem 实际上包含一个错误，这使得表单按钮执行其默认行为（提交表单）。在这种情况下，javascript 错误控制台通常会给出一个指针。

查看 javascript 部分中的函数 removeItem ：

该行：

rows[rows.length-1].html('');

不起作用。试试这个：

rows.eq(rows.length-1).html('');

---