onclick en HTML Tag button de un formulario

En un documento HTML el elemento Button tiene el atributo Type, este atributo tiene 3 posibles valores: button, submit, reset.

Si el elemento Button pertenece a un formulario <form> y no has puesto el atributo “type”, tienes que saber que el button en su atributo type toma como valor por defecto “Submit”, es decir que aunque el button tenga un evento onclick y das click en el button, lo primero que se ejecutará será el submit del formulario.

Es decir, si tienes el siguiente código:

<form action="misegundapagina.jsp">
<button onclick="alert('Hola Mundo')">Boton</button>
</form>

Si el usuario presiona el boton el formulario sera submitado sin ejecutarse la alerta del evento del boton, por el contrario si deseas que no se submite el formulario y se ejecute el código javascript que hay en el evento onclick, el codigo html tendria que ser el siguiente:

<form action="misegundapagina.jsp">
<button type="button" onclick="alert('Hola Mundo')">Boton</button>
</form>

El articulo comenta un código cross-browser, pero he de resaltar que en el Internet Explorer en los 2 casos el formulario no se submita y el evento onclick lanzará la alerta “Hola Mundo”.

Información Oficial:
http://www.w3.org/TR/html4/interact/forms.html#h-17.5

3 comentarios para “onclick en HTML Tag button de un formulario”

  1. Cesar Dice:

    Muchas gracias por el articulo! me ha servido.

  2. onclick Dice:

    Lo mejor en estos casos a nivel de accesibilidad y usabilidad de los formularios web es agregar a la etiqueta FORM un parámetro llamado ONSUBMIT en el cual ejecutemos la función JS que deseemos.

    El botón del formulario en vez de ser tipo BUTTON lo tendremos que hacer tipo SUBMIT, y en el caso de que el navegador del usuario no tenga javascript habilitado se enviará el formulario.

    Un saludo,
    Alejandro Arco

  3. Malc Dice:

    OIe como le haces para poder escribir código de esa forma, que no se interprete pro el explorador y se numeren las lineas y eso?

    Tnx viejo

Escribe un comentario