Why does the jQuery toggle button launch the submit button on a form?

Question

I built a rather complex form that includes a hidden section, which the user can switch to enter additional information if necessary. However, when you click on the toggle button indicated by I have more Nativities , it launches the submit button and submits the form prematurely.

The form is in dev right now, but it can be found here .

The code I use for the toggle button is:

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

The submit button code is pretty simple:

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

Code for the toggle button:

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

Any ideas as to why the toggle button triggers the send? And more importantly, how to solve the problem?

Thanks!

Answer 1

Try adding a type, i.e.:

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

http://www.w3schools.com/tags/tag_button.asp says that this should always be specified. Perhaps the browser uses the submit button by default.

Answer 2

Esteban has one solution. The best of these is described in the 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

Try

  return false; 

after switching the slide to the click function of the switch button.

Answer 4

From W3Schools:

Always specify the type attribute for the button. The default type for Internet Explorer is “button”, while in other browsers (and in the W3C specification), it is “send”.

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

Be sure to specify type="button"