如何防止按钮提交表单
Posted
技术标签:
【中文标题】如何防止按钮提交表单【英文标题】：How to prevent buttons from submitting forms 【发布时间】：2022-01-22 11:40:14 【问题描述】：在接下来的页面中，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>【问题讨论】：
请问您推荐哪个答案？ 【参考方案1】：设置按钮的类型：
<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。
【讨论】：
type="button" 对我来说在 Firefox 中并不总是有效。如果 js 足够复杂，并且出现错误，Firefox 无论如何都会提交表单。精神错乱！ @MatthewLock：几乎没有 - 脚本中的错误只会关闭该代码块，并且操作照常进行。尝试调用 jQuery 事件方法 e.preventDefault() 和/或 e.stopPropgation() 作为方法的第一行。请参阅***.com/questions/2017755/… 了解更多信息 type=button 无论如何都不应该提交表单return false 非常重要。有时甚至将其用于提交按钮（onclick）
我觉得html在这里很奇怪。默认情况下它应该是 type="button"，而不是提交。默认情况下看到提交总是出乎我的意料。这是个例外。【参考方案2】：
我确信在 FF 上
removeItem
函数遇到 JavaScript 错误，这不是在 IE 上发生的
当出现javascript错误时，“return false”代码将无法运行，使页面回发
【讨论】：
【参考方案3】：我同意 Shog9，但我可能会改用：
<input type = "button" onClick="addItem(); return false;" value="Add Item" />
According to w3schools，<button> 标签在不同的浏览器上有不同的行为。
【讨论】：
【参考方案4】：函数 removeItem 实际上包含一个错误，这使得表单按钮执行其默认行为（提交表单）。在这种情况下，javascript 错误控制台通常会给出一个指针。
查看javascript部分的removeItem函数：
行：
rows[rows.length-1].html('');
不起作用。试试这个：
rows.eq(rows.length-1).html('');
【讨论】：
【参考方案5】：我现在无法对此进行测试，但我认为您可以使用 jQuery 的 preventDefault 方法。
【讨论】：
【参考方案6】：前段时间我需要一些非常相似的东西......我得到了它。
所以我在这里介绍的是如何让表单能够通过 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 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 验证上完成？不，从概念上讲，我没有在客户端进行 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()。
【讨论】：
【参考方案7】：您正在使用 HTML5 按钮元素。请记住，原因是此按钮具有提交的默认行为，如 W3 规范中所述，如下所示： W3C HTML5 Button
所以你需要明确指定它的类型：
<button type="button">Button</button>
为了覆盖默认提交类型。我只是想指出发生这种情况的原因。
【讨论】：
我还想指出，具有 type 属性的 HTML 元素，其中一种类型是 button，不应该 f#$'n 具有默认类型提交。这简直是白痴，并且是规范中的一个巨大错误。我一直在表单中使用按钮，即使它是一种边缘情况（它不是），将默认类型设置为提交仍然是有意义的。 ? 这周的大部分时间里，当我使用表单中的按钮打开模式时，我的 Electron 应用程序“刷新”了，这让我很恼火。它会发生一次，然后应用程序的行为符合我的预期。我完全不知道发生了什么。就是这样！我对提交的默认类型没有任何问题。考虑到我花了五年时间才了解它，这似乎有点问题。 感谢您的参考，我刚刚了解到表单有一个 type=reset。太棒了！ 我知道它不会增加任何价值，但这是我在 SO 上见过的最好的答案。最简单的解决方案? 我在这里分享情绪。让按钮具有除“按钮”之外的任何其他默认类型简直是愚蠢的。因为它完全不直观（而且不可见 - 很难确定 - 因为它是默认设置，不是我添加到元素中的东西）。我花了 2 个小时的大部分时间试图弄清楚为什么在输入框中按“enter”会选择表单中的第一个按钮并单击它。谢谢你的回答！【参考方案8】：$("form").submit(function () return false; );
这将阻止按钮提交，或者您可以将按钮类型更改为“按钮”<input type="button"/> 而不是<input type="submit"/>
仅当此按钮不是此表单中的唯一按钮时才有效。
【讨论】：
这是针对 jQuery 的，在 Javascript 中的等价物是： myform.onsubmit = function() return false ...另外，即使您删除提交按钮，表单也可以通过从另一个表单域按 Enter。【参考方案9】：这是一个简单的方法：
$('.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;
);
【讨论】：
【参考方案10】：这是一个 html5 错误，就像已经说过的那样，您仍然可以将按钮作为提交（如果您想同时涵盖 javascript 和非 javascript 用户）使用它：
<button type="submit" onclick="return false"> Register </button>
这样您将取消提交，但仍然执行您在 jquery 或 javascript 函数中所做的任何事情，并为没有 javascript 的用户执行提交。
【讨论】：
【参考方案11】：return false;
您可以在函数结束时或函数调用后返回 false。
只要是最后发生的事情，表单就不会提交。
【讨论】：
如果您在与按钮关联的字段上有“必需”属性，它就会消失。有什么想法吗？【参考方案12】：假设您的 HTML 表单有 id="form_id"
<form id="form_id">
<!--your HTML code-->
</form>
将此 jQuery sn-p 添加到您的代码中以查看结果，
$("#form_id").submit(function()
return false;
);
【讨论】：
【参考方案13】：下面的示例代码展示了如何防止按钮点击提交表单。
你可以试试我的示例代码：
<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>
【讨论】：
【参考方案14】：以正常方式设置您的按钮并使用 event.preventDefault like..
<button onclick="myFunc(e)"> Remove </button>
...
...
In function...
function myFunc(e)
e.preventDefault();
【讨论】：
【参考方案15】：您可以使用 jQuery 简单地获取按钮的引用，并阻止其传播，如下所示：
$(document).ready(function ()
$('#BUTTON_ID').click(function(e)
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
return false;
););
【讨论】：
e.preventDefault(); e.stopPropagation(); 足以让事情正常进行。 e.stopImmediatePropagation() 这会在 Chrome 中引发未定义方法的错误。【参考方案16】：
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>
【讨论】：
【参考方案17】：只需在您的方法中添加e.preventDefault(); 即可阻止您的页面提交表单。
function myFunc(e)
e.preventDefault();
根据MDN Web Docs
Event接口的preventDefault()方法告诉用户 代理，如果事件没有被明确处理，它的默认值 不应像通常那样考虑采取的行动。这 事件继续像往常一样传播，除非它的一个侦听器 致电
stopPropagation ()或stopImmediatePropagation ()，其中之一 这会终止传播。
【讨论】：
【参考方案18】：像<button>Click to do something</button> 这样的按钮是提交按钮。
您必须添加type
【讨论】：
以上是关于如何防止按钮提交表单的主要内容，如果未能解决你的问题，请参考以下文章