[英]How to prevent buttons from submitting forms
在接下来的页面中，对于 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>
您正在使用 HTML5 按钮元素。 请记住，原因是此按钮具有提交的默认行为，如 W3 规范中所述，如下所示： W3C HTML5 按钮
所以你需要明确指定它的类型：
<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事件对象上的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和处理事件服务器端 - 这是已知的作为不显眼的 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>
在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 验证。 我只是在按下按钮上做某事，那么为什么不让它实现呢？
好吧，代码和样式完美地解决了问题。 在我需要发送我刚刚输入的表单的任何 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" />
根据 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 网络文档
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;
});
以下示例代码向您展示了如何防止按钮单击提交表单。
你可以试试我的示例代码：
<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>
我现在无法对此进行测试，但我认为您可以使用 jQuery 的preventDefault方法。
函数 removeItem 实际上包含一个错误，这使得表单按钮执行它的默认行为（提交表单）。 在这种情况下，javascript 错误控制台通常会给出一个指针。
查看 javascript 部分中的函数 removeItem ：
该行：
rows[rows.length-1].html('');
不起作用。 试试这个：
rows.eq(rows.length-1).html('');
未选择值时如何防止按钮提交表单。 不使用JavaScript
[英]How to prevent buttons from submitting forms when value is not selected. Without using javascript
如何防止 document.forms[0].submit() 提交表单？
[英]How to prevent document.forms[0].submit() from submitting a form?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.