如何防止按钮提交表单

javascript html

2022-08-29 22:06:00

在下一页中，使用 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>

答案 1

您使用的是 HTML5 按钮元素。请记住，原因是此按钮具有默认的提交行为，如 W3 规范中所述，如下所示：W3C HTML5 按钮

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

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

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

答案 2

设置按钮上的类型：

<button type="button" onclick="addItem(); return false;">Add Item</button>
<button type="button" onclick="removeItem(); return false;">Remove Last Item</button>

...这将防止它们在事件处理程序中发生异常时触发提交操作。然后，修复函数，使其不会触发异常：removeItem()

function removeItem() {
  var rows = $('form tr');
  if ( rows.length > 2 ) {
    // change: work on filtered jQuery object
    rows.filter(":last").html('');
    $('form :hidden:last').val('');
  } else {
    alert('Cannot remove any more rows');
  }
}

请注意更改：您的原始代码从jQuery集中提取了一个HTML元素，然后尝试在其上调用jQuery方法 - 这引发了异常，导致按钮的默认行为。

FWIW，还有另一种方法可以做到这一点...使用 jQuery 连接事件处理程序，并在 jQuery 的事件对象上使用 preventDefault（）方法预先取消默认行为：

$(function() // execute once the DOM has loaded
{

  // wire up Add Item button click event
  $("#AddItem").click(function(event)
  {
    event.preventDefault(); // cancel default behavior

    //... rest of add logic
  });

  // wire up Remove Last Item button click event
  $("RemoveLastItem").click(function(event)
  {
    event.preventDefault(); // cancel default behavior

    //... rest of remove last logic
  });

});

...

<button type="button" id="AddItem" name="AddItem">Add Item</button>
<button type="button" id="RemoveLastItem" name="RemoveLastItem">Remove Last Item</button>

此技术将所有逻辑保存在一个位置，从而更轻松地进行调试...它还允许您通过将按钮上的按钮更改回退到并处理事件服务器端来实现回退 - 这被称为不显眼的JavaScript。typesubmit