Auf der nächsten Seite wird bei Verwendung von Firefox durch Entfernen der Schaltfläche das Formular gesendet, durch Hinzufügen der Schaltfläche jedoch nicht.
Wie kann verhindert werden, dass die Schaltfläche remove
ein Formular absendet?
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 按钮一个>
因此您需要显式指定其类型:
为了覆盖默认的提交类型。我只是想指出发生这种情况的原因。