 |
Evento submit en javascript
Uno de los usos más extendidos es la de validar los datos ingresados al formulario y abortar el envío de los mismos al servidor (con esto liberamos sobrecargas del servidor)
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.
<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.
<input type="hidden" name="campo1" value="valor">
<input type="hidden" name="campo2" value="otroValor"><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.
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>