在下一页中,使用 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>
P粉9081386202023-10-11 09:42:03
您正在使用 HTML5 按钮元素。请记住,原因是此按钮具有默认的提交行为,如 W3 规范中所述,如下所示: W3C HTML5 按钮一个>
因此您需要显式指定其类型:
<button type="button">Button</button>
为了覆盖默认的提交类型。我只是想指出发生这种情况的原因。