Portada | Monotemáticos | Secciones | Desarrolladores | Comunidad | Servicios | Servicios profesionales | RSS
Desde 0 | HTML | CSS | ASP | PHP | AJAX | Javascript | Diseño web | Promoción web | Ganar dinero
Directorio | Manuales | Scripts | FAQs | Programas | Artículos Copyleft | Actualidad | La Cosecha | Colabora
Registrarse | Vuestras páginas | Foros del web | Lista de correo | Boletín de novedades
Generador METAs | Compras | Busca cursos
Alojamiento | Dominios.es | Micropagos SMS | Buscadores | Patentes, marcas | Creación web | Multimedia | Videos
Desarrollo Freelance | Buscar proyectos | Buscar profesionales | Solicitar desarrollo

Enviar un formulario al pulsar un enlace, con Javascript


Un ejemplo sobre como se puede enviar un formulario por POST al pulsar un enlace, utilizando Javascript


02/3/07 - 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>

 Seguir navegando a partir aquí:
+ 1 manual relacionado
+ 1 categoria relacionada
+ 3 comentarios no revisados

 Autoría, licencia y acciones sobre este artículo

Informe de Miguel Angel Alvarez*
Director de DesarrolloWeb.com
URL: http://www.desarrolloweb.com

Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.

* Para consultas técnicas utilizar la lista de correo.

Versión imprimible Versión imprimible del artículo
Enviar artículo por e-mail Enviar artículo por e-mail
Añadir un comentario al artículo Publicar un comentario del artículo

Manuales relacionados con este artículo
Dentro de Formularios y Javascript

Categorias relacionadas
A través de las categorías de nuestro directorio se pueden encontrar otro tipo de recursos relacionados con este artículo:
+ Entrar en Scripts en Javascript


 Comentarios sin revisar
Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente.
 Se han encontrado 3 comentarios sin revisar

Ver el comentario no revisadoVer los comentarios no revisados
Añadir un comentario al artículo Añadir un comentario del artículo



Enlaces:
Maestrosdelweb
  Ir arriba

Manuales relacionados
+Formularios y Javascript
Categorías
+Scripts en Javascript

Lectura recomendada

Compra este libro en Agapea, la librería urgente a domicilio.

Tienda DesarrolloWeb

DesarrolloWeb.com | Copyright | Anunciese | Acerca de | Datos legales | Contacta | Por GuiarteMultimedia