Möglichkeiten, das Formular vor der Übermittlung per Schaltfläche zu schützen
P粉245276769
P粉245276769 2023-10-10 10:47:12
0
1
684

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>


P粉245276769
P粉245276769

Antworte allen(1)
P粉908138620

您正在使用 HTML5 按钮元素。请记住,原因是此按钮具有默认的提交行为,如 W3 规范中所述,如下所示: W3C HTML5 按钮一个>

因此您需要显式指定其类型:

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

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

Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage