title: Why does jQuery "toggle" button trigger the Submit button on a form?
body: <p>I have built a fairly complex form which includes a hidden section that the user can toggle open for entering more information if necessary. However, when you click on this toggle button labeled <strong>I have more Nativities</strong>, it triggers the submit button and prematurely submits the form.</p>
  
  <p>The form is in dev right now, but it can be found <a href="http://www.dayofservice.org/christmas/registration" rel="nofollow noreferrer">here</a>.</p>
  
  <p>The code I am using for the toggle button is: </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(function() {
          $("#schedule").accordion({ header: "h5", collapsible: true });
          $("#more-nativities").hide();
          $("#toggle").click(function()   {
              $("#more-nativities").slideToggle("slow");
          });
      });
      &lt;/script&gt;
  </code></pre>
  
  <p>The code for the submit button is pretty basic:</p>
  
  <pre><code>&lt;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'"/&gt;
  </code></pre>
  
  <p>The code for the toggle button is:</p>
  
  <pre><code>&lt;button id="toggle"&gt;I have more nativities&lt;/button&gt;
  </code></pre>
  
  <p>Any ideas as to why the toggle button is triggering the submit? And more importantly how to solve the problem?</p>
  
  <p>Thanks!</p>