Warum löst die Schaltfläche "toggle" von jQuery die Schaltfläche "Senden" in einem Formular aus?

Question

Ich habe ein ziemlich komplexes Formular erstellt, das einen versteckten Abschnitt enthält, den der Benutzer öffnen kann, um bei Bedarf weitere Informationen einzugeben. Wenn Sie jedoch auf diese Schaltfläche klicken, die mit gekennzeichnet ist, habe ich mehr Krippen, es löst die Übermittlungsschaltfläche aus und übermittelt das Formular vorzeitig.

Der Formular ist derzeit in dev. Unter der Suchanfragen befinden sich: here.

Der Code, den ich für den Umschaltknopf bin mit ist:

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

Der Code für die Submit-Button ist ziemlich einfach:

<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'"/> 

Der Code für die Toggle-Taste ist:

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

Irgendwelche Ideen, warum die Umschalttaste das Senden auslöst? Und noch wichtiger, wie man das Problem löst?

Danke!

Answer 1

Versuchen Sie, eine Art Zugabe, d.h .:

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

http://www.w3schools.com/tags/tag_button.asp sagt dies immer definiert werden sollte. Es ist möglich, dass der Browser standardmäßig eine Senden-Schaltfläche verwendet.

Answer 2

Versuchen

return false; 

nach dem Schlitten Toggle auf der Klickfunktion fro die Toggle-Taste.

Answer 3

Von W3Schools:

Geben Sie immer das type-Attribut für die Taste. Der Standardtyp für Internet Explorer ist "Knopf", während in anderen Browsern (und in der W3C Spezifikation) ist es "senden".

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

Seien Sie sicher, type="button"

Answer 4

Esteban hat eine Lösung angeben. Ein besseres ist in der jQuery tutorial beschrieben:

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