如何防止按钮提交表单

917

在下一页中，使用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>
javascript  html  forms  button  submit 
— 汉坡
source
您推荐哪个答案？
— sanepete

Answers:

1795

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

因此，您需要明确指定其类型：

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

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

=）

— Metafaniel
source
17
我还想指出，具有type属性（其中一种类型是button）的HTML元素不应具有默认的Submit类型。这只是白痴，而且是规范中的巨大错误。我一直在使用表单中的按钮，即使这是一个极端的情况（不是），也要使用默认类型来提交。
— dudewad
3
this当我使用表单中的按钮打开模态时，我花了大部分时间来烦恼我的Electron应用程序“刷新”。它会发生一次，然后该应用程序表现出预期。我完全不知道发生了什么。就是这样！我没有默认类型被提交的问题。鉴于我花了五年时间来了解它，这似乎有些困惑。
— freethebees
4
多亏了您的参考，我才知道表单有一个type = reset。太棒了！
— 阮阮
602

在按钮上设置类型：

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

该技术将所有逻辑保持在一个地方，从而使调试更加容易...它还允许您通过将type按钮上的按钮更改回submit并处理事件服务器端来实现后备状态-这被称为不显眼JavaScript。

— 刺9
source
4
对于我来说，type =“ button”在Firefox中并不总是有效。如果js足够复杂，并且出现错误，Firefox仍将提交表单。疯狂！
— 马修·洛克
1
@MatthewLock：很难-脚本中的错误只会关闭该代码块，并且操作照常进行。尝试调用jQuery事件方法e.preventDefault（）和/或e.stopPropgation（）作为该方法的第一行。请参阅stackoverflow.com/questions/2017755/…了解更多信息
— brichins 2013年
8
type = button无论如何都不要提交表单
— Matthew Lock
1
return false非常重要 有时甚至将其用于提交按钮（onclick）
— 2014年
7
我认为html在这里很奇怪。默认情况下，它应为type =“ button”，而不是提交。看到默认情况下提交，这总是让我感到意外。例外。
— httpete
31

不久前，我需要一些非常相似的东西……而我明白了。

因此，我在这里提出的技巧是如何使JavaScript能够提交表单而不进行任何验证，并且仅在用户按下按钮（通常是发送按钮）时执行验证。

对于示例，我将使用最小表单，其中仅包含两个字段和一个提交按钮。

记住想要的是什么：从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=""仅仅是对JavaScript getElementById的name=""仅仅是它出现在POST数据。

以这种方式，它可以根据需要工作。

我将其仅用于不需要onsubmit功能的人员，但是在用户按下按钮时进行一些验证。

为什么我不需要在表单标签上进行onsubmit？容易，在其他JavaScript部件上，我需要执行提交，但是我不希望进行任何验证。

原因：如果用户是执行我想要的提交的人，并且需要完成验证，但是如果是JavaScript，有时我需要执行提交，而这种验证可以避免这种情况。

听起来可能有些奇怪，但例如在思考时就不会这样：在登录时……有一些限制……例如不允许使用PHP会话，也不允许使用cookie！

因此，任何链接都必须转换为这种提交格式，因此登录数据不会丢失。当尚未登录时，它也必须工作。因此，不必对链接执行任何验证。但是，如果用户未同时输入user和pass两个字段，我想向用户显示一条消息。因此，如果缺少该表格，则不得发送该表格！有问题。

看到问题：仅当用户按下按钮时，一个字段为空时，才可以发送表单；如果它是JavaScript代码，则必须能够发送该表单。

如果我onsubmit在form标签上进行工作，则需要知道它是用户还是其他JavaScript。由于无法传递任何参数，因此无法直接传递，因此有些人添加了一个变量来告知是否必须执行验证。验证功能的第一件事是检查变量值等。太复杂了，代码没有说出真正想要的是什么。

因此，解决方案是在表单标签上没有onsubmit。Insead将其放在真正需要的按钮上。

另一方面，为什么要放置onsubmit代码，因为从概念上讲我不希望onsubmit验证。我真的想要按钮验证。

不仅代码更清晰，而且必须在此处。请记住以下几点：-我不希望JavaScript验证表单（必须始终通过服务器端的PHP来完成）-我想向用户显示一条消息，告知所有字段不得为空，需要JavaScript（客户端侧）

那么，为什么有些人（想想或告诉我）必须在onsumbit验证中完成？不，从概念上讲，我不是在客户端进行onsumbit验证。我只是在按下按钮上做某事，为什么不让它实现呢？

好的代码和样式可以完美地解决问题。在需要发送表单的任何JavaScript上，我只需输入：

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"，请不要忘记submit()通过JavaScript进行操作。

— 666
source
28

我同意Shog9，但可以改用：

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

根据w3schools，该<button>标记在不同的浏览器上具有不同的行为。

— 磅力
source
18

假设您的HTML表单具有 id="form_id"

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

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

$("#form_id").submit(function(){
  return false;
});
— 普拉泰克·乔希（Prateek Joshi）
source
18

您可以使用jQuery来获取按钮的引用，并防止其传播，如下所示：

 $(document).ready(function () {
    $('#BUTTON_ID').click(function(e) {

            e.preventDefault();
            e.stopPropagation();
            e.stopImmediatePropagation();

            return false;
    });});
— 阿塔·拉瓦尼（Ata Iravani）
source
2
e.preventDefault(); e.stopPropagation();足以使工作正常。e.stopImmediatePropagation()这会在Chrome中引发未定义方法错误。
— Subroto
14

$("form").submit(function () { return false; }); 这将阻止按钮提交，或者您可以将按钮类型更改为“按钮”，<input type="button"/>而不是<input type="submit"/> 仅当此按钮不是此表单中的唯一按钮时才起作用。

— 什阿拉
source
2
这是针对jQuery的，Javascript中的等效项是：myform.onsubmit = function（）{return false} ...而且，即使您删除了Submit按钮，也可以通过在另一个表单字段中按Enter来提交表单。
— Synexis
10

这是一个html5错误，就像已经说过的那样，您仍然可以使用如下按钮作为提交按钮（如果您想同时覆盖JavaScript和非JavaScript用户）：

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

这样，您将取消提交，但仍然可以在jquery或javascript函数中执行任何操作，并为没有javascript的用户执行提交。

— 速腾
source
8

我确定在FF 

removeItem

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

当出现JavaScript错误时，“ return false”代码将不会运行，从而使页面回发

— 阿林·瓦西莱
source
8

返回false阻止默认行为。但是return 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>
— 苏尼尔·达帕帕度（Sunil Dhappadhule）
source
7

只需添加e.preventDefault();您的方法，即可防止您的页面提交表单。

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

根据MDN网络文档

Event接口的preventDefault（）方法告诉用户代理，如果未显式处理事件，则不应像通常那样考虑其默认操作。该事件继续照常传播，除非其侦听器之一调用stopPropagation ()或stopImmediatePropagation ()，其中一个终止传播。

— 姆塞米·阿里（Mselmi Ali）
source
6

正常设置按钮，并使用event.preventDefault之类的。 

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

   In function...

   function myFunc(e){
       e.preventDefault();
   }
— 维沙尔
source
4 
return false;

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

只要这是最后一件事情，表单就不会提交。

— WonderWorker
source
2

这是一个简单的方法：

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

});
— 公理82
source
1

下面的示例代码向您展示如何防止按钮单击提交表单。

您可以尝试我的示例代码：

 <form autocomplete="off" method="post" action="">
   <p>Title:
     <input type="text" />
   </p>
   <input type="button" onclick="addItem()" value="Add Item">
   <input type="button" onclick="removeItem()" value="Remove Last Item">
   <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>
<script language="javascript">
function addItem() {
return false;
}

function removeItem() {
return false;
}
</script>
— KNVB
source
0

函数removeItem实际上包含一个错误，该错误使表单按钮执行其默认行为（提交表单）。在这种情况下，javascript错误控制台通常会提供一个指针。

在javascript部分中查看功能removeItem：

该行：

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

不起作用。尝试以下方法：

rows.eq(rows.length-1).html('');
— ylebre
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.