如何防止按钮提交表单

16 回答

• 1

  我同意Shog9，尽管我可能会改用：

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

  According to w3schools， <button> 标记在不同的浏览器上有不同的行为 .

  回复于 2024-05-10T02:01:58+08:00
• 24

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

  查看javascript部分中的函数removeItem：

  这条线：

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

  不起作用 . 试试这个：

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

  回复于 2024-05-10T02:01:58+08:00
• 28

  在按钮上设置类型：

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

  这种技术将您的所有逻辑保存在一个位置，使其更容易调试...它还允许您通过将按钮上的 type 更改回 submit 并处理事件服务器端来实现回退 - 这是已知的如unobtrusive JavaScript .

  回复于 2024-05-10T02:01:58+08:00
• 1379

  这是一个简单的方法：

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

  回复于 2024-05-10T02:01:58+08:00
• 7

  return false;
  

  您可以在函数末尾或函数调用后返回false .

  只要这是最后发生的事情，表单就不会提交 .

  回复于 2024-05-10T02:01:58+08:00
• 0

  以下示例代码显示如何防止按钮单击提交表单 .

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

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

  回复于 2024-05-10T02:01:58+08:00
• 2

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

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

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

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

  回复于 2024-05-10T02:01:58+08:00
• 13

  您可以使用jQuery简单地获取按钮的引用，并阻止其传播，如下所示：

  $(document).ready(function () {
      $('#BUTTON_ID').click(function(e) {
  
              e.preventDefault();
              e.stopPropagation();
              e.stopImmediatePropagation();
  
              return false;
      });});
  

  回复于 2024-05-10T02:01:58+08:00
• 17

  以正常方式设置按钮并使用event.preventDefault之类的..

  <button onclick="myFunc(e)"> Remove </button>  
     ...
     ...
  
     In function...
  
     function myFunc(e){
         e.preventDefault();
     }
  

  回复于 2024-05-10T02:01:58+08:00
• 9

  我用三种方式解决了这个问题，对你有所帮助

  如果我们使用jquery验证插件

  $("form").validate({
        submitHandler: function (form) {
                       console.log('test');
                            }
                        });
  

  第二种方法使用防止默认

  $( "form" ).submit(function( event ) {
  
        event.preventDefault();
  console.log('test');
      });
  

  3使用javscript（onsubmit事件）

  如果我们在form标签中使用onsubmit事件，它会触发url，如果我们在按钮中使用onsubmit或者输入type = submit

  <button type="submit" onsubmit="submitfunction()">submit</button>
      function submitfunction(event){
  event.preventDefault();
  console.log('test');
  }
  

  希望它会有所帮助

  回复于 2024-05-10T02:01:58+08:00
• 2

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

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

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

  以覆盖默认提交类型 . 我只是想指出为什么会发生这种情况=）

  =）

  回复于 2024-05-10T02:01:58+08:00
• 564

  我是'm not able to test this right now, but I would think you could use jQuery' s preventDefault方法 .

  回复于 2024-05-10T02:01:58+08:00
• 0

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

  回复于 2024-05-10T02:01:58+08:00
• 3

  我确信在FF上

  removeItem
  

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

  当javascript错误出现时，“return false”代码将无法运行，使页面回发

  回复于 2024-05-10T02:01:58+08:00
• 5

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

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

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

  回复于 2024-05-10T02:01:58+08:00
• 0

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

  所以我在这里提出的是如何让一个表单能够通过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="button" 更改 type="submit" ，它似乎可以工作但不会 . 它从不发送表单，但可以轻松完成 .

  所以最后我用了这个：

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

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

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

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

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

  另一方面，为什么要提交代码，因为从概念上讲我不想提交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" ，请不要忘记通过JavaScript执行 submit() .

  回复于 2024-05-10T02:01:58+08:00