I have built a fairly plex 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 I have more Nativities, it triggers the submit button and prematurely submits the form.

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

The code I am using 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 code for the submit button is pretty basic:

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

The code for the toggle button is:

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

Any ideas as to why the toggle button is triggering the submit? And more importantly how to solve the problem?

Thanks!

I have built a fairly plex 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 I have more Nativities, it triggers the submit button and prematurely submits the form.

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

The code I am using 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 code for the submit button is pretty basic:

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

The code for the toggle button is:

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

Any ideas as to why the toggle button is triggering the submit? And more importantly how to solve the problem?

Thanks!

• javascript
• jquery

• 4 As an aside, I would suggest not using inline JS. Write unobtrusive Javascript. – Peter Ajtai Commented Sep 19, 2010 at 22:34
• It's very helpful to provide as much pertinent code as possible. I edited in your original code for the toggle button. – Peter Ajtai Commented Sep 19, 2010 at 22:46

4 Answers 4

Try adding a type, i.e.:

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

http://www.w3schools./tags/tag_button.asp says this should be always defined. It's possible the browser is defaulting to a submit button.

Esteban has one solution. A better one 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.");
     event.preventDefault();
   });
 });

Try

 return false;

after the slide toggle on the click function fro the toggle button.

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 "submit".

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

Be sure to specify type="button"