Question

我构建了一个相当复杂的表单，其中包含一个隐藏部分，用户可以切换打开该部分以便在必要时输入更多信息。但是，当您点击标有我有更多本地性的此切换按钮时，它会触发提交按钮并过早提交表单。

表格目前处于开发状态，但可以找到here。

我用于切换按钮的代码是：

<script type="text/javascript">
    $(function() {
        $("#schedule").accordion({ header: "h5", collapsible: true });
        $("#more-nativities").hide();
        $("#toggle").click(function()   {
            $("#more-nativities").slideToggle("slow");
        });
    });
    </script>

提交按钮的代码非常基本：

<input id="submit2" type="image" src="_images/btn_register.jpg" name="submit"  alt="" onmouseover="javascript:this.src='_images/btn_register2.jpg'" onmouseout="javascript:this.src='_images/btn_register.jpg'"/>

切换按钮的代码是：

<button id="toggle">I have more nativities</button>

关于为什么切换按钮触发提交的任何想法？更重要的是如何解决问题？

谢谢！

Answer 1

尝试添加类型，即：

<button type="button" id="#toggle">Text</button>

http://www.w3schools.com/tags/tag_button.asp说这应该始终定义。浏览器可能默认为提交按钮。

Answer 2

Esteban有一个解决方案。 jQuery tutorial中描述了一个更好的方法：

 $(document).ready(function(){
   $("a").click(function(event){
     alert("As you can see, the link no longer took you to jquery.com");
     event.preventDefault();
   });
 });

Answer 3

尝试

 return false;

在切换按钮的单击功能上滑动切换后。

Answer 4

来自W3Schools：

始终为其指定type属性按钮。的默认类型 Internet Explorer是“按钮”，而在其他浏览器中（以及在W3C中）规范）它是“提交”。

http://www.w3schools.com/tags/tag_button.asp

请务必指定type="button"

为什么jQuery“切换”按钮会触发表单上的“提交”按钮？

4 个答案: