如何防止按钮提交表单

在下面的页面中，使用Firefox，删除按钮提交表单，但添加按钮没有。

如何防止remove按钮提交表单？

function addItem() {var v = $('form :hidden:last').attr('name');var n = /(.*)input/.exec(v);
var newPrefix;if (n[1].length == 0) {newPrefix = '1';} else {newPrefix = parseInt(n[1]) + 1;}
var oldElem = $('form tr:last');var newElem = oldElem.clone(true);var lastHidden = $('form :hidden:last');
lastHidden.val(newPrefix);
var pat = '=\"' + n[1] + 'input';
newElem.html(newElem.html().replace(new RegExp(pat, 'g'), '=\"' + newPrefix + 'input'));newElem.appendTo('table');$('form :hidden:last').val('');}
function removeItem() {var rows = $('form tr');if (rows.length > 2) {rows[rows.length - 1].html('');$('form :hidden:last').val('');} else {alert('Cannot remove any more rows');}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><html><body><form autocomplete="off" method="post" action=""><p>Title:<input type="text" /></p><button onclick="addItem(); return false;">Add Item</button><button onclick="removeItem(); return false;">Remove Last Item</button><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></body>
</html>

899372 次浏览
小开

设置按钮上的类型：

<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 objectrows.filter(":last").html('');$('form :hidden:last').val('');} else {alert('Cannot remove any more rows');}}

注意变化：您的原始代码从jQuery集中提取了一个超文本标记语言元素，然后尝试对其调用jQuery方法-这引发了一个异常，导致按钮的默认行为。

FWIW，还有另一种方法可以使用它……使用jQuery连接您的事件处理程序，并在jQuery的事件对象上使用//预防默认值方法预先取消默认行为：

$(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并处理事件服务器端来实现回退-这被称为不显眼的JavaScript。

小开

我相信在FF上 

removeItem

函数遇到JavaScript错误，这在IE上不会发生

当出现javascript错误时，“返回false”代码不会运行，使页面回发

小开

我同意Shog9，尽管我可能会使用：

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

根据W3School，<button>标签在不同的浏览器上有不同的行为。

小开

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

查看javascript部分中的函数demveItem：

该行：

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

不起作用。试试这个：

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

我现在无法测试这个，但我认为你可以使用jQuery的预防错误码方法。

小开

很久以前，我需要一些非常相似的东西，我得到了它。

所以我在这里说的是我如何做的技巧，让一个表单能够通过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>

在function Validator上，return True;在哪里，我还添加了一个JavaScript提交句子，类似于这样：

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

id=""仅用于JavaScriptgetElementById，name=""仅用于显示在POST数据上。

就像我需要的那样工作。

我把这个只是为了那些不需要onsubmit函数的人，但是当用户按下按钮时进行一些验证。

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

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

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

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

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

如果我在表单标签上做onsubmit的工作，我需要知道它是用户还是其他JavaScript。由于不能传递任何参数，因此无法直接传递，所以有些人添加一个变量来判断是否必须进行验证。验证函数的第一件事是检查该变量的值，等等……太复杂了，代码没有说明真正想要的是什么。

因此，解决方案是不要在表单标签上使用on提交。Insead将它放在真正需要的地方，在按钮上。

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

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

那么为什么有些人（认为或告诉我）必须在onsum bit验证上完成呢？不，从概念上讲，我不是在客户端进行onsum bit验证。我只是在按下按钮时做一些事情，所以为什么不让它实现呢？

代码和样式完美地完成了任务。在我需要发送表单的任何JavaScript上：

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

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

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

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

小开

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

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

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

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

小开

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

小开

这里有一个简单的方法：

$('.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;
});
小开

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

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

通过这种方式，您将取消提交，但仍然可以在jQuery或javascript函数中执行任何操作，并为没有javascript的用户进行提交。

小开 
return false;

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

只要这是最后一件事，表单就不会提交。

小开

假设你的超文本标记语言有id="form_id"

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

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

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

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

您可以尝试我的示例代码：

 <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>
小开

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

   <button onclick="myFunc(e)"> Remove </button>......
In function...
function myFunc(e){e.preventDefault();}
小开

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

 $(document).ready(function () {$('#BUTTON_ID').click(function(e) {
e.preventDefault();e.stopPropagation();e.stopImmediatePropagation();
return false;});});
小开

返回false阻止默认行为。但返回false会破坏额外单击事件的冒泡。这意味着如果在调用此函数后有任何其他单击绑定，则其他绑定不会考虑。

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

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

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

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

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

根据MDN Web文档

事件接口的预防默认（）方法告诉用户代理，如果事件未显式处理，则其默认值不应像通常那样考虑采取的行动事件继续像往常一样传播，除非它的一个侦听器调用stopPropagation ()或stopImmediatePropagation ()，其中之一终止传播。

小开

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

您必须添加type

小开

如果你有<input />

使用它

<input type="button"/>

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

使用它

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

提交答案