如何从$提交形态磷$ pvent按钮 [英] How to prevent buttons from submitting forms
本文介绍了如何从$提交形态磷$ pvent按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在下面的页面，与Firefox的删除按钮提交表单，但添加按钮不会。我如何prevent删除按钮从提交表单？
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =jQuery的-1.3.2.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
功能的addItem（）{
变种V = $（'形式：隐藏：去年'）ATTR（'名'）;。
变种N = /(.*)input/.exec(v）;
新变种preFIX;
如果（N [1]。长度== 0）{
新的preFIX ='1';
}其他{
新的preFIX = parseInt函数（N [1]）+ 1;
}
VAR oldElem = $（'形式TR：去年'）;
VAR newElem = oldElem.clone（真）;
VAR lastHidden = $（'形式：隐藏：去年'）;
lastHidden.val（新preFIX）;
VAR拍拍='= \\'+ N [1] +'输入';
newElem.html（newElem.html（）替代（新的RegExp（拍拍，'G'），'= \\'+新preFIX +'输入'））;
newElem.appendTo（'表'）;
$（'形式：隐藏：去年'）VAL（''）;
}
功能的removeItem（）{
VAR行= $（'形式TR'）;
如果（rows.length→2）{
行[rows.length-1]的.html（''）;
$（'形式：隐藏：去年'）VAL（''）;
}其他{
警报（'无法删除任何更多的行'）;
}
}
＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT;形式自动完成=关闭方法=邮报行动=＆GT;
＆LT; P＆GT;标题：LT;输入类型=文本/＆GT;＆LT; / P＆GT;
＆LT;按钮的onclick =的addItem（）;返回false;＆gt;添加项目＆lt; /按钮＆GT;
＆LT;按钮的onclick =为removeItem（）;返回false;＆GT;删除最后一个项目＆lt; /按钮＆GT;
＆LT;表＆gt;
＆LT;第i个姓名和LT; /第i＆所述; TR＆GT;
＆LT; TD＆GT;＆LT;输入类型=文本ID =输入1NAME =输入1/＆GT;＆LT; / TD＆GT;
＆LT; TD＆GT;＆LT;输入类型=隐藏ID =输入2NAME =输入2/＆GT;＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
＆LT;输入ID =提交类型=提交名称=提交值=提交＆GT;
＆LT; /表及GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
解决方案
您使用的是HTML5按钮元素。还记得原因是此按钮的默认行为提交类型，如W3规格说明如下所示：
W3C HTML5按钮
所以，你需要指定它的下明确键入：
＆LT;按钮式=按钮＆GT;按钮和LT; /按钮＆GT;
为了覆盖默认的提交类型。我只是想指出，之所以出现这种情况=）
=）
In the following page, with Firefox the remove button submits the form, but the add button doesn't. How do I prevent the remove button from submitting the form?
<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>
解决方案
You're using an HTML5 button element. Remember the reason it's this button has as default behavior a submit type, as stated in the W3 Specification as seen here: W3C HTML5 Button
So you need to specify it's type explicitly:
<button type="button">Button</button>
in order to override the default submit type. I just want to point out the reason why this happens =)
=)
这篇关于如何从$提交形态磷$ pvent按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
