Jquery显示和隐藏导致表单提交

好的，所以我有一个窗体，它有几组字段，如Facebook帐户设置编辑，以显示您点击它时。Jquery显示和隐藏导致表单提交

<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来解决这个问题，但是，我觉得这是一个黑客而不是解决方案。任何人帮助？

来源

2011-05-30 Michael

我相信问题是，默认情况下（在非IE的浏览器）按钮的type是submit - 为你的使用情况，您希望它是button。添加一个属性type="button"，应该修复它。

这里是一个working example，显示<button>的缺少type属性的效果。您必须在浏览器的开发工具（FF中的Firebug，Chrome中的开发人员工具）中查看网络活动。

来源

2011-05-30 23:04:21

让我试试这个东西 – Michael 2011-05-30 23:07:11

你是对的我的朋友。这是奇怪的默认行为，有点愚蠢。哦，好吧。我喜欢我的按钮方式，因为它使按钮内的HTML样式变得容易。感谢您的正确解决方案！ – Michael 2011-05-30 23:16:21

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>

来源

2011-05-30 22:55:17

好的，我在我的评论中提出了一个返回false，它做了诡计。我不是问如何解决它，我问为什么？为什么显示基于按钮点击的内容与表单提交没有关系会导致表单提交？ – Michael 2011-05-30 23:02:32

@Michael查看我的答案 - 它与'

你只需要添加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>

来源

2011-05-30 23:00:52 Mayoo

请阅读我的评论以上请！ :)感谢您的答案，并给予您的尝试，但也许我不清楚我的问题 – Michael 2011-05-30 23:02:50

我加入你的代码jsFiddle（链接，如果你想以更多的东西），但是即使我删除按钮的点击事件，提交仍然会触发。它看起来像没有适当的提交按钮，HTML选择其中一个按钮。（我找不到spec中按钮特定的行为）。

由于我是一个缓慢的typer，所以现在已经建议了其他“answerers”，您应该使用preventDefault。

您可能会发现这很有用 - How is the default submit button on an HTML form determined?

来源

2011-05-30 23:04:14

即使我添加一个提交按钮，问题依然存在。并且它不会选择1个按钮，它会选择所有3个按钮 – Michael 2011-05-30 23:06:42

Bah，我应该比我第一个测试的时候多测试一下！ – 2011-05-30 23:08:22

Jquery显示和隐藏导致表单提交

回答

相关问题