Why does jQuery "toggle" button trigger the Submit button on a form?
<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">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>
