关于javascript:如何防止按钮提交表单

How to prevent buttons from submitting forms

在下一页中,使用Firefox,删除按钮提交表单,但添加按钮不提交。 如何阻止删除按钮提交表单?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.min.js">
<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');
  }
}

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


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

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

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

为了覆盖默认的提交类型。我只是想指出为什么会发生这种情况=)

=)


在按钮上设置类型:

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

...当事件处理程序发生异常时,它们将阻止它们触发提交操作。然后,修复removeItem()函数,使其不会触发异常:

1
2
3
4
5
6
7
8
9
10
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()方法预先取消默认行为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
$(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>

这种技术将您的所有逻辑保存在一个位置,使其更容易调试...它还允许您通过将按钮上的type更改回submit并处理事件服务器端来实现回退 - 这被称为不引人注目的JavaScript。


前段时间我需要一些非常相似的东西......我明白了。

所以我在这里提出的是如何让一个表单能够通过JavaScript提交,而无需任何验证和执行验证,只有当用户按下按钮(通常是发送按钮)时。

对于示例,我将使用最小形式,仅使用两个字段和一个提交按钮。

记住想要的东西:
从JavaScript开始,它必须能够在没有任何检查的情况下提交。但是,如果用户按下这样的按钮,则必须完成验证并且仅在通过验证时发送表单。

通常所有人都会从这附近的东西开始(我删除了所有额外的东西并不重要):

1
2
3
4
5
<form method="post" id="theFormID" name="theFormID" action="">
   <input type="text" id="Field1" name="Field1" />
   <input type="text" id="Field2" name="Field2" />
   <input type="submit" value="Send" onclick="JavaScript:return Validator();" />
</form>

看看form标签没有onsubmit="..."(记住这是一个没有它的条件)。

问题是,无论onclick是否返回truefalse,表单始终都会被提交。

如果我为type="button"更改type="submit",它似乎可以工作但不会。它从不发送表单,但可以轻松完成。

所以最后我用了这个:

1
2
3
4
5
<form method="post" id="theFormID" name="theFormID" action="">
   <input type="text" id="Field1" name="Field1" />
   <input type="text" id="Field2" name="Field2" />
   <input type="button" value="Send" onclick="JavaScript:return Validator();" />
</form>

function Validator上,return True;,我还添加了一个JavaScript提交句子,类似于:

1
2
3
4
5
6
7
8
9
function Validator(){
   //  ...bla bla bla... the checks
   if(                              ){
      document.getElementById('theFormID').submit();
      return(true);
   }else{
      return(false);
   }
}

id=""仅适用于JavaScript getElementByIdname=""仅适用于POST数据。

这样就可以按照我的需要工作。

我把它放在表单上不需要onsubmit功能的人,但是当用户按下按钮时进行一些验证。

为什么我不需要在表单标签上提交onsubmit?很容易,在其他JavaScript部分我需要执行提交但我不希望有任何验证。

原因是:如果用户是执行我想要的提交并且需要完成验证的用户,但如果是JavaScript,有时我需要执行提交,而这样的验证将避免它。

这可能听起来很奇怪,但不是在考虑例如:登录...有一些限制......比如不允许使用PHP会话而且不允许使用cookie!

因此,任何链接都必须转换为此类表单提交,因此登录数据不会丢失。
如果还没有登录,它也必须工作。因此,不必对链接执行验证。
但是如果用户没有输入字段,用户和传递,我想向用户显示一条消息。因此,如果缺少一个,则不得发送表格!有问题。

查看问题:只有当用户按下按钮时,如果一个字段为空,则不能发送表单,如果是必须能够发送的JavaScript代码。

如果我在表单标记上的onsubmit上工作,我需要知道它是用户还是其他JavaScript。由于没有参数可以传递,因此无法直接传递,因此有些人会添加一个变量来判断是否必须进行验证。验证函数的第一件事是检查变量值等...太复杂而代码没有说出真正想要的东西。

所以解决方案是不要在表单标签上提交onsubmit。 Insead把它放在真正需要的地方,按钮上。

另一方面,为什么要提交代码,因为从概念上讲我不想提交onsubmit验证。我真的想要按钮验证。

不仅代码更清晰,它必须在哪里。记住这个:
- 我不希望JavaScript验证表单(必须始终由服务器端的PHP完成)
- 我想向用户显示一条消息,告诉所有字段不能为空,需要JavaScript(客户端)

那么为什么有些人(想想或告诉我)必须在onsumbit验证上完成?不,从概念上讲,我没有在客户端进行onsumbit验证。我只是在按下按钮时做了一些事情,那么为什么不让它实现呢?

那么代码和风格完美地完成了这个伎俩。在我需要发送表单的任何JavaScript上,我只是说:

1
2
document.getElementById('theFormID').action='./GoToThisPage.php'; // Where to go
document.getElementById('theFormID').submit(); // Send POST data and go there

当我不需要时,它会跳过验证。它只是发送表单并加载不同的页面等。

但是,如果用户单击提交按钮(又名type="button"不是type="submit"),则在提交表单之前完成验证,如果无效则不会发送。

希望这有助于其他人不要尝试冗长而复杂的代码。如果不需要,请不要使用onsubmit,并使用onclick。但请记住将type="submit"更改为type="button",请不要忘记通过JavaScript执行submit()

好。


我同意Shog9,尽管我可能改用:

1
<input type ="button" onClick="addItem(); return false;" value="Add Item" />

根据w3schools,