Cómo podemos enviar datos por POST al pulsar un enlace, utilizando Javascript y un formulario HTML.
El objetivo de este artículo es enviar unos datos por post a una página web utilizando Javascript como respuesta a la pulsación de un link. En realidad lo que vamos a hacer es enviar un formulario al pulsar un enlace de una página web, ya que es la manera nativa y más sencilla de enviar datos por post desde una página web.
El formulario no aparecerá 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.
Hemos actualizado recientemente este artículo para proponer prácticas alternativas con Javascript más modernas y recomendables. Durante el artículo hemos añadido diversas notas para explicarlas y al final se puede ver el ejemplo completo de la manera antigua y de la manera más moderna.
Qué necesitamos para esta práctica con Javascript
El ejemplo es sencillo pero es interesante de cara a su funcionalidad, porque puede resultar útil en muchas situaciones. Esta práctica requiere de tres partes:
- El formulario HTML con los campos que se desean enviar
- La función Javascript para enviar el formulario
- 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.
Otra solución podría ser ocultar el formulario con CSS:
<form style="display: none">
...
</form>
Para que esta práctica funcione no es necesario que el formulario esté oculto. Realmente podríamos enviar el formulario al pulsar un enlace si el formulario se ve en la página. Eso es indiferente.
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.
Solo a modo de alternativa y para mejorar tu conocimiento del desarrollo para la web, queremos mencionar que en un
Javascript un poco más moderno es habitual usar el atributo id del formulario para acceder a él.
Para ello ponemos un identificador en la etiqueta del formulario.
<form id="mi_formulario">
... campos del formulario
</form>
En este caso podríamos acceder al formulario para enviarlo mediante Javascript usando el identificador, de la siguiente manera:
function enviar_formulario() {
let formulario = document.getElementById('mi_formulario');
formulario.submit();
}
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().
En la actualidad no se considera muy buena práctica esto de colocar en la ruta del enlace javascript: y sentencias Javascript. Funcionar funciona, pero tiene el problema que estamos mezclando en el HTML código que tiene que ver con la funcionalidad Javascript. Es mucho más recomendable, aunque un poco más laborioso, que el código HTML y el código Javascript se encuentren de manera separada.
Entonces, tendríamos un enlace normal al que le ponemos un identificador.
<a href="#" id="enlace">Enviar formulario</a>
Ahora hacemos un script Javascript que accede a este enlace y lo trata, aplicando un comportamiento cuando se hace clic, mediante un manejador de evento "click".
document.getElementById('enlace').addEventListener('click', function(e) {
e.preventDefault();
enviar_formulario();
})
Código del envío de un formulario pulsando un enlace
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>
Alternativa de envío del formulario con Javascript más moderna
Como actualización de este artículo voy a poner un código de Javascript, HTML y CSS más moderno, que sigue el trabajo con unas prácticas un poco mejores.
Te sugiero consultar los manuales de Javascript si no entiendes alguna cosa.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enviar un formulario al pulsar un enlace</title>
<style>
#mi_formulario {
display: none;
}
</style>
</head>
<body>
<h1>Enviar un formulario al pulsar un enlace</h1>
<p>
<a href="#" id="enlace">Enviar datos por POST</a>
</p>
<form action="pagina_destino.php" method=post name="formulario1" id="mi_formulario">
<input type="hidden" name="campo1" value="valor">
<input type="hidden" name="campo2" value="otroValor">
</form>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('enlace').addEventListener('click', function(e) {
e.preventDefault();
document.getElementById('mi_formulario').submit();
})
})
</script>
</body>
</html>
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...