Procesar formularios con Javascript

Problema:

Usar el botón del formulario para llamar a una función Javascript que procese los datos

Los formularios poseen un atributo action con el valor de la url donde está el programa que los procesa.

Pero existe un envio alternativo de los datos usando Javascript.

¿Como usar javascript para procesar el formulario?

Solución

Cambiar la URL por una llamada a la función Javascript que queramos usar

En el formulario la damos al atributo action un valor tipo javascript: seguido del nombre de la función que lo vaya a procesar

Además podemos cambiar el botón submit con un evento click que llame a la misma función. De esta manera el comportamiento de la tecla enter también queda controlada:

<form action="javascript:enviar()">

La función enviar deberá contener el código necesario para hacer aquello para lo que esté diseñado el formulario: enviar por correo, ir a una dirección, buscar en la página, etc.

Lógicamente no puede ejecutar código de backend, en el servidor. Para eso tenemos PHP u otro lenguaje de servidor.

Ejemplo

Como ejemplo supongamos que queremos colocar un formulario para que el usuario introduzca un nombre para ir a una página determinada

<form name="form1" method="post" action="javascript:enviar(this.form1)">

Texto a enviar

<input type="text" name="textfield">

<input type="submit" name="Submit" value="Submit">

</form>

function enviar(formul)

{

var nomb = formul.textfield.value

if (nomb.toLowerCase() != nomb.toUpperCase())

      location = "destino.htm?"+nomb

else

       alert("No has entrado ningún nombre")

}

Este formulario de ejemplo que sólo tiene un campo y el botón enviar. El usuario puede o bien pulsar el botón o pulsar la tecla enter.

El script que procesa los datos es muy simple, tan solo comprueba que hay datos y llama a ontra página. Podría ser algo más complejo.

scripts