gpt4 book ai didi

javascript - 如何防止按钮提交表单

转载 作者:bug小助手 更新时间:2023-10-28 10:53:00 24 4
gpt4 key购买 nike

在接下来的页面中,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

所以你需要明确指定它的类型:

<button type="button">Button</button>

为了覆盖默认提交类型。我只是想指出发生这种情况的原因。

关于javascript - 如何防止按钮提交表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/932653/

24 4 0
文章推荐: javascript - 如何检索 HTML 元素的实际宽度和高度?
文章推荐: html - 如何仅使用 CSS 禁用链接
文章推荐: html -
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com