Jquery顯示和隱藏導致表單提交

Question

好的，所以我有一個窗體，它有幾組字段，如Facebook帳戶設置編輯，以顯示您點擊它時。

<form id="test" action="#" method="POST"> 
    <ul class="items"> 
     <li> 
      <button class="show-content-button">Show</button> 
      <div class="form-content ui-helper-hidden"> 
       Hello 
      </div> 
     </li> 
     <li> 
      <button class="show-content-button">Show</button> 
      <div class="form-content ui-helper-hidden"> 
       Hello 
      </div> 
     </li> 
     <li> 
      <button class="show-content-button">Show</button> 
      <div class="form-content ui-helper-hidden"> 
       Hello 
      </div> 
     </li> 
    </ul> 
</form> 
<script type="text/javascript"> 
    $(function() { 
     $("form#test").submit(function() { 
      alert("hello i have been submitted"); 
     }) 
     $(".show-content-button").click(function() { 
      var $button = $(this); 
      if ($button.text() === "Show") { 
       $(".form-content", $button.parent()).fadeIn(400); 
       $button.html("Hide"); 
      } else if ($button.text() === "Hide") { 
       $(".form-content", $button.parent()).fadeOut(200); 
       $button.html("Show"); 
      } 
     }) 
    }) 
</script> 

當我點擊其中一個節目時，它會導致表單被提交......爲什麼？我可以通過在按鈕單擊事件上返回false來解決這個問題，但是，我覺得這是一個黑客而不是解決方案。任何人幫助？

Answer 1

我相信問題是，默認情況下（在非IE的瀏覽器）按鈕的type是submit - 爲你的使用情況，您希望它是button。添加一個屬性type="button"，應該修復它。

這裏是一個working example，顯示<button>的缺少type屬性的效果。您必須在瀏覽器的開發工具（FF中的Firebug，Chrome中的開發人員工具）中查看網絡活動。

Answer 2

event.preventDefault()應該是你在找什麼：http://api.jquery.com/event.preventDefault/

<script type="text/javascript"> 
$(function() { 
    $("form#test").submit(function() { 
     alert("hello i have been submitted"); 
    }) 
    $(".show-content-button").click(function(event) { 
     event.preventDefault(); 
     var $button = $(this); 
     if ($button.text() === "Show") { 
      $(".form-content", $button.parent()).fadeIn(400); 
      $button.html("Hide"); 
     } else if ($button.text() === "Hide") { 
      $(".form-content", $button.parent()).fadeOut(200); 
      $button.html("Show"); 
     } 
    }) 
}) 
</script> 

Answer 3

你只需要添加return false;停止提交表單

<script type="text/javascript"> 
    $(function() { 
     $("form#test").submit(function() { 
      alert("hello i have been submitted"); 
     }) 
     $(".show-content-button").click(function() { 
      var $button = $(this); 
      if ($button.text() === "Show") { 
       $(".form-content", $button.parent()).fadeIn(400); 
       $button.html("Hide"); 
      } else if ($button.text() === "Hide") { 
       $(".form-content", $button.parent()).fadeOut(200); 
       $button.html("Show"); 
      } 
    return false; 
     }) 
    }) 
</script> 

Answer 4

我加入你的代碼jsFiddle（鏈接，如果你想以更多的東西），但是即使我刪除按鈕的點擊事件，提交仍然會觸發。它看起來像沒有適當的提交按鈕，HTML選擇其中一個按鈕。 （我找不到spec中按鈕特定的行爲）。

由於我是一個緩慢的typer，所以現在已經建議了其他「answerers」，您應該使用preventDefault。

您可能會發現這很有用 - How is the default submit button on an HTML form determined?