在下面的页面中，使用Firefox，删除按钮提交表单，但添加按钮不提交。
如何防止删除按钮提交表单?
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>
在按钮上设置类型:
<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>
这种技术将所有的逻辑放在一个地方，使调试变得更容易……它还允许您通过更改按钮的类型来实现回退，以提交和处理服务器端事件——这被称为不显眼的JavaScript。
在按钮上设置类型:
<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>
这种技术将所有的逻辑放在一个地方，使调试变得更容易……它还允许您通过更改按钮的类型来实现回退，以提交和处理服务器端事件——这被称为不显眼的JavaScript。
