使用JQuery - 阻止表單提交

我什麼都試過了 - 看，我嘗試以下3個不同的選項，但是這一切都將無法正常工作：

$(document).ready(function() { 

      //option A 
      $("#form").submit(function(e){ 
       e.preventDefault(); 
      }); 

      //option B 
      $("#form").submit(function(e){ 
       stopEvent(e); 
      }); 

      //option C 
      $("#form").submit(function(){ 
       return false; 
      }); 
    });

出了什麼問題？

更新 - 這裏是我的html：

<form id="form" class="form" action="page2.php" method="post"> 
     <!-- tags in the form --> 
     <p class="class2"> 
      <input type="submit" value="Okay!" /> 
     </p> 
    </form>

這有什麼錯嗎？

來源

2012-02-19 Lucy Weatherford

顯示你的HTML因爲（在提交類型的相關頁面）當您發佈它時，preventDefault沒有任何問題或返回false，除了您的選擇器完全錯誤。在'.submit（）'爲我工作之後'返回false;'' – Sparky 2012-02-19 06:53:05

'我有同樣的問題 – 2012-09-30 21:05:36

141

兩件事情引人注目：

它可能是你的表單名稱不form。而是通過刪除＃來引用標籤。

另外e.preventDefault是正確的JQuery語法，例如，

//option A 
    $("form").submit(function(e){ 
     e.preventDefault(); 
    });

選項C也應該工作。我不熟悉的B選項

一個完整的例子：

<html> 
    <head> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 

     <script type='text/javascript'> 
     $(document).ready(function() { 
      //option A 
      $("form").submit(function(e){ 
       alert('submit intercepted'); 
       e.preventDefault(e); 
      }); 
     }); 
     </script> 
    </head> 

    <body> 
     <form action="http://google.com" method="GET"> 
      Search <input type='text' name='q' /> 
      <input type='submit'/> 
     </form> 
    </body> 
</html>

來源

2012-02-19 06:36:20

我嘗試過，仍然提交表單... :( – 2012-02-19 06:48:10

其他的東西是錯的，我每天都在使用這種技術，最好的猜測是頁面上有JavaScript錯誤，或許檢查它與FireBug？ – 2012-02-19 06:58:14

我沒有看到任何錯誤在螢火蟲:( – 2012-02-19 07:09:00

要prevant默認/防止表單提交使用

e.preventDefault();

要停止事件bubling使用

e.stopPropagation();

要防止表單提交'返回錯誤'也應該工作。

來源

2012-02-19 06:39:25

我試過了，仍然被提交... – 2012-02-19 06:48:25

什麼是bubling？ – 2012-02-19 06:48:47

看到這個答案，因爲jQuery處理這些不同。 http://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false – Sparky 2012-02-19 06:51:18

$("#form')尋找具有id="form"的元素。

$('form')查找表單元素

來源

2012-02-19 07:57:01 Rahul

我也有同樣的問題。我也嘗試了你曾經嘗試過的。然後我改變我的方法不使用jQuery，而是通過在表單標籤中使用「onsubmit」屬性。

<form onsubmit="thefunction(); return false;">

它的工作原理。

但是，當我試圖把虛假的返回值只放在「function（）」中時，它並不妨礙提交過程，所以我必須把「返回false」。在onsubmit屬性中。所以，我認爲我的表單應用程序無法從Javascript函數獲取返回值。我對此毫不知情。

來源

2013-08-23 08:14:18 lukibsubekti

您可能在頁面上使用了很少的表單並使用$（'form'）。submit（）將此事件添加到頁面上第一次出現的表單。使用類選擇，而不是，或試試這個：

$('form').each(function(){ 
    $(this).submit(function(){ 
     e.preventDefault(); 
     alert('it works!'); 
     return false; 
    }) 
})

或更高版本的它：

$(document).on("submit", "form", function(e){ 
    e.preventDefault(); 
    alert('it works!'); 
    return false; 
});

來源

2014-02-15 11:24:10

在我的情況下，返回false是一個關鍵。 – artificis 2016-03-04 02:27:04

你忘了形式ID，和它的作品

$('form#form').submit(function(e){ 
    e.preventDefault(); 
    alert('prevent submit');    
});

來源

2014-04-23 12:57:27

我有同樣的問題並且我用這種方式解決了這個問題（不是很高雅，但是很有效）：

$('#form').attr('onsubmit','return false;');

而且它的優勢在於，在我看來，你能恢復的情況下，你想要的任何時候：當我使用<form>標籤

$('#form').attr('onsubmit','return true;');

來源

2016-08-31 15:33:13 vinxxe

也許當恢復表單提交預防'$（'＃form'）。removeAttr（'onsubmit'）時刪除屬性會更舒服一些。 ;' – barbieswimcrew 2017-06-01 05:27:42

沒有屬性id="form"並通過其標籤名稱直接在jQuery的調用它它與我合作。
你的代碼的HTML文件：

<form action="page2.php" method="post">

和jQuery腳本：

$(document).ready(function() { 
     $('form').submit(function(evt){ 
      evt.preventDefault();// to stop form submitting 
     }); 
});

來源

2017-07-12 09:57:36

// Prevent form submission 
$("form").submit(function(event) { 
    event.preventDefault(); 
});

從這裏：https://api.jquery.com/submit-selector/

來源

2017-11-18 13:20:40

使用JQuery - 阻止表單提交

回答

相關問題