如何防止按钮提交表单
在下面的页面中，使用Firefox的删除按钮提交表单，但添加按钮没有。 如何防止删除按钮提交表单？
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
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>
</head>
<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
所以你需要明确指定它的类型：
<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函数的人提供的，但是当用户按下按钮时进行一些验证。
为什么我不需要在表单标签上提交onsubmit？ 很简单，在我需要执行提交的其他JavaScript部分中，但我不希望有任何验证。
原因是：如果用户是执行提交我想要的，并需要验证完成，但如果是JavaScript，有时我需要执行提交，而这种验证会避免它。
这听起来很奇怪，但是在思考时例如：在登录...上有一些限制......比如不允许使用PHP会话，也不允许使用Cookie！
所以任何链接都必须转换为表单提交，所以登录数据不会丢失。 当没有登录完成时，它也必须工作。 所以不需要验证链接。 但是，如果用户未输入字段，用户名和密码，我想向用户显示一条消息。 所以如果有人遗失，表格一定不能发送！ 有问题。
看到问题：只有当用户按下按钮时，一个字段为空的表单不能被发送，如果它是一个JavaScript代码，它必须能够被发送。
如果我在form标签上进行onsubmit的工作，我需要知道它是用户还是其他JavaScript。 由于没有参数可以传递，所以不可能直接使用，所以有些人添加一个变量来告诉验证是否必须完成。 验证功能的第一件事是检查变量值等等。太复杂了，代码没有说明真正想要的东西。
所以解决方案是不要在表单标签上提交onsubmit。 Insead将它放在真正需要的地方，放在按钮上。
另一方面，为什么从概念上提交提交代码，我不想提交验证。 我真的想要按钮验证。
不仅代码更清晰，而且代码更加清晰。 请记住这一点： - 我不希望JavaScript验证表单（必须始终由服务器端的PHP完成） - 我想向用户显示一条消息，告诉所有字段不能为空，需要JavaScript（客户端侧）
那么为什么有些人（想想或告诉我）必须通过验证来验证？ 不，从概念上讲，我不是在客户端进行验证。 我只是在按钮上做一些事情，所以为什么不让它实现呢？
那么代码和风格完美地完成了这个技巧。 在我需要发送表单的任何JavaScript上，我只是说：
document.getElementById('theFormID').action='./GoToThisPage.php'; // Where to go
document.getElementById('theFormID').submit(); // Send POST data and go there
当我不需要它时，它跳过验证。 它只是发送表单并加载不同的页面等。
但是，如果用户点击提交按钮（又名type="button" not type="submit" ），则在提交表单之前进行验证，如果无效则不发送。
那么希望这有助于其他人不要尝试冗长复杂的代码。 如果不需要，不要使用onsubmit ，并使用onclick 。 但是请记住将type="submit"更改为type="button" ，请不要忘记使用JavaScript进行submit() 。