在下面的页面中,使用Firefox,删除按钮提交表单,但添加按钮不提交。

如何防止删除按钮提交表单?

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>


当前回答

如果你有<input />

使用它

<input type="button"/>

如果你有<button>btn</button>

使用它

<button type="button">btn</button>

其他回答

在按钮上设置类型:

<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。

假设你的HTML表单有id="form_id"

<form id="form_id">
<!--your HTML code-->
</form>

将这个jQuery片段添加到您的代码中查看结果,

$("#form_id").submit(function(){
  return false;
});

返回false可以防止默认行为。但是返回false打破了其他单击事件的冒泡。这意味着在调用此函数后,如果有任何其他单击绑定,则其他的不考虑。

 <button id="btnSubmit" type="button">PostData</button>
 <Script> $("#btnSubmit").click(function(){
   // do stuff
   return false;
}); </Script>

或者你可以这样写

 <button type="submit" onclick="return false"> PostData</button>

如果你有<input />

使用它

<input type="button"/>

如果你有<button>btn</button>

使用它

<button type="button">btn</button>

只需要添加e.c preventdefault ();在你的方法中应该阻止你的页面提交表单。

function myFunc(e){
       e.preventDefault();
}

根据MDN网络文档

Event接口的preventDefault()方法告诉用户 代理,如果事件未显式处理,则其默认值 不应像通常那样考虑行动。的 事件继续像往常一样传播,除非它的侦听器之一 调用stopPropagation()或stopImmediatePropagation () 它终止了传播。