Enviar un formulario al pulsar un enlace, con Javascript

  • Por
Un ejemplo sobre como se puede enviar un formulario por POST al pulsar un enlace, utilizando Javascript
El objetivo de este artículo es enviar unos datos por post a una página web utilizando Javascript. En realidad lo que vamos a hacer es enviar un formulario al pulsar un enlace de una página web. El formulario no se verá en la página, lo único que veremos es un enlace y al hacer clic, con javascript haremos que ese formulario se envíe, con lo que se mandarán los datos del formulario por POST a la página de destino del formulario.

El ejemplo es sencillo. Requiere de tres partes, el formulario, la función javascript para enviarlo y el enlace que se debe hacer clic para que se realice el envío.

El formulario con los datos a enviar por POST

Lo más cómodo es que, si queremos enviar datos por POST, creemos el formulario con los datos que se desea enviar. El formulario tendrá el atributo action dirigido a la página a la que queremos enviar los datos y el método de envío POST.

<form action="pagina_destino.php" method=post name="formulario1">
<input type="hidden" name="campo1" value="valor">
<input type="hidden" name="campo2" value="otroValor">
</form>


Como no queremos que se vea el formulario, sólo queremos enviar sus datos por POST, todos los campos del formulario son hidden, es decir, ocultos.

Función Javascript para enviar un formulario

La segunda parte es una función Javascript que ejecutaremos para enviar el formulario. Hace uso del método submit() asociado a los formularios.

<script>
function enviar_formulario(){
   document.formulario1.submit()
}
</script>


Si nos fijamos, la función tiene una única sentencia que submite el formulario. Para ello se accede primero al formulario por el nombre que le hemos dado en el atributo name de la etiqueta <FORM> en el código HTML. El nombre del formulario era "formulario1". Así que esa instrucción hace un submit() del formulario1, que a su vez es una propiedad del objeto document de la página.

Enlace para enviar los datos por POST

Ahora, el objetivo del artículo es enviar unos datos por post al hacer clic en un enlace. Así que simplemente, enviando el formulario haremos llegar esos datos por post al destino. Por tanto, tenemos que construir un enlace que llame a la función javascript anterior.

<a href="javascript:enviar_formulario()">Enviar formulario</a>

Esto es muy sencillo. Simplemente se indica con javascript: que se debe ejecutar un código javascript al pulsar el enlace. El código javascript es una simple llamada a la función enviar_formulario().

El código completo de este ejemplo se puede ver aquí:

<html>
<head>
   <title>Enviar formulario al pulsar un enlace</title>
<script>
function enviar_formulario(){
   document.formulario1.submit()
}
</script>
</head>

<body>
<form action="pagina_destino.php" method=post name="formulario1">
<input type="hidden" name="campo1" value="valor">
<input type="hidden" name="campo2" value="otroValor">
</form>

<a href="javascript:enviar_formulario()">Enviar formulario</a>
</body>
</html>

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Andrés

04/3/2007
OFFTOPIC: curioso (gracioso) cómo este artículo y el anterior parecen contradecirse.

Diana

15/3/2007
El complemento perfecto para este articulo seria como otra pagina lee esos campos ocultos que se mandaron con el formulario.

PICCORO

19/2/2008
Tengo una forma y campos, como puedo enviar dinamicamente a dos direcciones distintas, me explico:

<form ... >

enlane 1 (envia a url 1)

enlace 2 (envia a url 2)

</form>

taskencito

02/12/2008
Muy buen ejemplo, se agradece :-)

guillox

29/1/2009
Exelente guia..

Lo unico malo es que si en la pagina haces ver codigo fuente te muestra los form y esos valores post que estas enviando.

Lola

28/9/2009
problema con un formulario en php para enviarlo por email
Hola, he conseguido hacer el formulario en php para luego enviarlo por correo electrónico pero el problema es que cuando estoy rellenando el formulario, en cualquier momento en que le pulso intro despues de introducir un campo se envía el formulario sin pulsar el boton "enviar". Gracias por la ayuda que me podáis prestar

Oxigeno

02/7/2011
Agradecimiento
Gracias por la ayuda, es muy útil :D

Alejandro

09/8/2011
Fuera del tema
¿submite?, el autor debería tomar unas clases de español.

Alex

13/2/2012
Util
Muy útil para principiantes, mil gracias

Fernando

04/4/2012
Gracias por sus aportes....
Que de alguna manera ayudan a otras personas, en algunos problemas con estas cosas que ya ud. tienen resuesltas

yamnal

10/4/2013
document.formulario1.submit()
Muchas Gracias Miguel!!! no sabes cuantas horas estuve buscando la solucion a este problemita... de nuevo lo confirmo, DW, que gran potencial y ayuda los que estamos aprendiendo PHP, Js ... Gracias

Fabián Diaz

20/1/2014
enviar form a mail
como lo hago para enviar un formulario a una cuenta de correo electronico?

Luis Quiroz Anton

28/8/2014
como recibo los datos
Como puedo recibir los datos, osea en la pagina del enlace como capturo los datos que me llegan del form, se puede utilizando javascript..

mil gracias

otniel

25/1/2015
varios form
Saludos amigo, mi duda es la siguiente tengo dos formularios en una misma pagina, cada uno envia a tablas distintas de una misma base de datos...
¿Como aplicar tu ejemplo para lograr enviar los dos form a la ves con un mismo boton?
Gracias por adelantado, espero tu respuesta...

jhoel

12/2/2017
ayuda
buenas, en () toca poner el gmail por q si no el post se ira volanda al mas alla