在下一页中，使用 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>看看 form 标签如何没有onsubmit="..." （记住这是一个没有它的条件）。
问题是无论onclick返回true还是false ，表单总是被提交。
如果我为type="button"更改type="submit" ，它似乎可以工作但不会。它从不发送表单，但可以轻松完成。
所以最后我用了这个：
<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 代码。
如果我在表单标签上进行onsubmit的工作，我需要知道它是用户还是其他 JavaScript。由于没有参数可以传递，因此无法直接传递，因此有些人会添加一个变量来判断是否必须进行验证。验证函数的第一件事是检查变量值等... 太复杂而且代码没有说出真正想要的东西。
所以解决方案是不要在表单标签上提交 onsubmit。 Insead 把它放在真正需要的地方，按钮上。
另一方面，为什么要提交代码，因为从概念上讲我不想提交 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() 。