首页猿问如何防止按钮提交表单

如何防止按钮提交表单

JavaScript Html/CSS

ITMISS 2019-05-30 17:46:21

如何防止按钮提交表单在下面的页面中，使用Firefox，Remove按钮提交表单，但是Add按钮没有提交表单。如何防止“删除”按钮提交表单？<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>

查看完整描述

3 回答

侃侃无极

TA贡献2051条经验获得超10个赞

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

因此，您需要显式地指定它的类型：

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

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

反对回复 2019-05-30

largeQ

TA贡献2039条经验获得超8个赞

在按钮上设置类型：

<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方法-这会抛出一个异常，从而导致按钮的默认行为。

还有另一种方法你可以用这个.。使用jQuery连接事件处理程序，并使用预防性Default()方法在jQuery的事件对象以取消默认行为：

$(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.

反对回复 2019-05-30

白衣染霜花

TA贡献1796条经验获得超10个赞

不久前我需要一些类似的东西.。我明白了。

因此，我在这里介绍的是如何使用技巧，使一个表单能够由JavaScript提交，而不需要在用户按下按钮(通常是发送按钮)时才能验证和执行验证。

例如，我将使用一个最小的表单，只有两个字段和一个Submit按钮。

记住我们想要的东西：从JavaScript，它必须能够在没有任何检查的情况下提交。但是，如果用户按下这样的按钮，验证必须完成，只有通过验证才能发送表单。

通常情况下，所有这些都是从附近开始的(我删除了所有不重要的额外内容)：

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

查看表单标记如何没有onsubmit="..."(记住这是一个条件，没有它)。

问题是表格总是提交的，不管onclick回报true或false.

如果我改变了type="submit"为type="button"，似乎起作用了，但不起作用。它从不发送表单，但这很容易完成。

最后我用了这个：

<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提交语句，类似于以下内容：

function Validator(){
   //  ...bla bla bla... the checks
   if(                              ){
      document.getElementById('theFormID').submit();
      return(true);
   }else{
      return(false);
   }}

这个id=""只是为了JavaScriptgetElementById，name=""只是为了让它出现在帖子数据上。

在这样的道路上，它的工作，我需要。

我只是为了不需要的人onsubmit函数，但在用户按下按钮时进行一些验证。

为什么我不需要在表格标签上提交？很简单，在其他JavaScript部件上，我需要执行一个Submit，但我不希望有任何验证。

原因是：如果用户执行我想要的提交，并且需要进行验证，但如果是JavaScript，有时我需要执行Submit，而这样的验证会避免提交。

这听起来可能很奇怪，但在思考的时候-例如：在一个登录上.有一些限制.。比如不允许使用PHP会话，也不允许使用cookie！

因此，任何链接都必须转换为这样的表单提交，这样登录数据就不会丢失。当还没有登录时，它也必须工作。因此，必须对链接执行任何验证。但是，如果用户没有同时输入用户和PASS两个字段，我想向用户显示一条消息。因此，如果一个人失踪，该表格不得发送！这就是问题所在。

请参见问题：只有当用户按下按钮时，只有当一个字段为空时才发送表单；如果是JavaScript代码，则必须能够发送表单。

如果我在onsubmit在Form标记上，我需要知道它是用户还是其他JavaScript。由于没有任何参数可以通过，所以不可能直接传递，因此有些人添加了一个变量来判断是否必须进行验证。验证函数的第一件事是检查变量值，等等.太复杂了，代码没有说出真正想要的东西。

因此，解决方案是在表单标记上不包含onSubmit。INSEAD把它放在真正需要的地方，放在按钮上。

另一方面，为什么要放置onSubmit代码，因为在概念上我不需要onSubmit验证。我真的想要按钮验证。

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

那么，为什么有些人(想想或告诉我)必须通过一次性验证来完成呢？不，从概念上讲，我不是在客户端进行一次性验证。我只是在按下按钮，所以为什么不让它实现呢？

好吧，这种代码和风格完美地发挥了作用。在我需要发送的任何JavaScript上，我刚刚放置的表单：

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

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

但是如果用户单击Submit按钮(也就是type="button"不type="submit")验证是在允许提交表单之前完成的，如果不有效，则不发送。

希望这有助于其他人不要尝试冗长而复杂的代码。只是不使用onsubmit如果不需要，并使用onclick。但记住要改变type="submit"到type="button"请不要忘记submit()用JavaScript写的。

反对回复 2019-05-30

3 回答
0 关注
922 浏览

关注

如何防止按钮提交表单

如何防止按钮提交表单

3 回答

相关问题推荐

添加回答

热搜

最近搜索清空

如何防止按钮提交表单

如何防止按钮提交表单

3 回答

相关问题推荐

添加回答