¿Por qué jQuery "alternar" botón desencadenar el botón Enviar en un formulario?

Question

He creado una forma bastante compleja que incluye una sección oculta que el usuario puede alternar para ingresar más información si es necesario. Sin embargo, cuando hace clic en este botón de alternar etiquetado tengo más Nativities, desencadena el botón de enviar y envía el formulario de forma prematura.

El formulario está en desarrollo en este momento, pero se puede encontrar here.

El código que estoy utilizando para el botón de activación es:

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

El código para el botón de envío es bastante básico:

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

El código para el botón de activación es:

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

¿Alguna idea de por qué el botón de alternar está activando el envío? Y más importante aún, ¿cómo resolver el problema?

Gracias!

Answer 1

trate de añadir un tipo, es decir .:

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

http://www.w3schools.com/tags/tag_button.asp dice que esto debería ser siempre definida. Es posible que el navegador tenga un botón de envío predeterminado.

Answer 2

Trate

return false; 

después de que el conmutador deslizante en la función de clic aquí para allá el botón de activación.

Answer 3

De W3Schools:

Siempre especifique el atributo de tipo para el botón. El tipo predeterminado para Internet Explorer es "botón", mientras que en otros navegadores (y en la especificación W3C ) es "enviar".

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

Asegúrese de especificar type="button"

Answer 4

Esteban tiene una solución. Una mejor se describe en el 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(); 
    }); 
});