javascript - 表单提交事件 - 表单验证




如何防止按钮提交表单 (10)

在下面的页面中,使用Firefox的删除按钮提交表单,但添加按钮没有。 如何防止删除按钮提交表单?

<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
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>
</head>
<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>

以正常方式设置你的按钮,并使用event.preventDefault,如..

   <button onclick="myFunc(e)"> Remove </button>  
   ...
   ...

   In function...

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

$("form").submit(function () { return false; }); 这将阻止按钮提交,或者你可以改变按钮类型为“按钮” <input type="button"/>而不是<input type="submit"/>这将只在该按钮不是只有这种形式的按钮。


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

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

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

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

函数removeItem实际上包含一个错误,这使得表单按钮成为默认行为(提交表单)。 在这种情况下,javascript错误控制台通常会提供一个指针。

检查javascript部分中的removeItem函数:

该行:

rows[rows.length-1].html('');

不起作用。 试试这个:

rows.eq(rows.length-1).html('');

在按钮上设置类型:

<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的event对象上使用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>

这种技术可以将所有的逻辑保存在一个地方,使调试变得更加容易......它还允许您通过更改按钮上的typesubmit和处理事件服务器端来实现回退 - 这是已知的作为不显眼的JavaScript


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

所以你需要明确指定它的类型:

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

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

=)


我现在无法测试这个,但我认为你可以使用jQuery的preventDefault()方法。


我相信在FF上

removeItem 

函数遇到JavaScript错误,这在IE上不会发生

当javascript错误出现时,“返回false”代码将不会运行,从而使页面回发


这是一个简单的方法:

$('.mybutton').click(function(){

    /* Perform some button action ... */
    alert("I don't like it when you press my button!");

    /* Then, the most important part ... */
    return false;

});

return false;

您可以在函数结束或函数调用后返回false。

只要这是最后一件事情发生,表单将不会提交。







submit