Formularios y scripts

     
Cabecera del Formulario

En la cabecera del formulario aparece el atributo action, este es quien dice que se hará al pulsar el botón submit. Aquí podemos llamar a otra página, a un programa CGI o a un programa Javascript.

<form name="form1" action="javascript:procesar(document.forms.form1)">
<input type="text" name="dato">
...
</form>

La funcion procesar() lleva de argumento el objeto formulario. Desde dentro de la función se podrá acceder a todos los elementos del formulario. Por ejemplo:

function procesar(obj)
{
alert(obj.dato.value)
}

Esta sencillísima función mostrará un mensaje con el valor del campo dato

Los formularios son la manera en que las páginas web permiten interactividad con los usuarios que las visitan.
Habitualmente los datos introducidos por el visitante son procesados por un programa CGI.
Sin embargo Javascript también es capaz de procesar los formularios. No se necesita mucha destreza para ello. Basta con conocer dos o tres detalles.
Esta página te servirá para iniciarte en el procesamiento de los formularios. En los ejemplos, scripts y aplicaciones tienes usos más completos, que te pueden servir para aprender más sobre estos elementos en relación con Javascript.
 
 
  Elementos del Formulario  

También podemos llamar a funcionea Javascript desde otros elementos del formulario. Por ejemplo desde un botón, o desde cualquier otro elemento del formulario. Ejemplo:

<input type="button" name="Click" value="Pulsar" onmousedown="procesar(this)">

En esta ocasión se llama a la función procesar() con el atributo this, que contiene el objeto button (botón). Si dentro de la función queremos acceder al formulario le pasaremos como argumento document.forms.form1

function procesar(obj)
{
alert(obj.name)
}

Con esta forma de llamada la función sabe que botón se ha pulsado, muy útil si el formulario contiene varios botones.
Igual que se ha usado el evento onmousedwon (botón pulsado) se podrían haber usado otros como onmouseover u onmouseout, para así actuar cuando el ratón pasa por encima del botón.
Además de botones podemos usar cualquier otro campo del formulario: campos de texto, checks, ratios, textarea...
 

  Listas de opciones  

Las útiles listas de los formularios son también procesables en Javascript. Este objeto lista contiene un array (de nombre options) con las opciones que presenta. Cuando el usuario selecciona uno de esos elementos su posición se anota en la propiedad selectedIndex del objeto lista.

function check(formulario)
{
var lista= formulario.opciones
var elegida = lista.options[lista.selectedIndex]
alert(elegida.text+" : "+elegida.value)
}

Esta función puede ser llamada desde un botón, con el evento onmousedown, o desde el propio campo select mediante el evento onchange, que se dispara cuando se cambia la opción seleccionada. Te ilustramos este segundo método:

<form name="form1" method="post" action="">
<select name="opciones" onchange="check(document.forms.form1)">
<option value="1" selected>opción 1</option>
<option value="2">opción 2</option>
<option value="3">opción 3</option>
</select>

Sólo una advertencia: los índices comienzan en 0, en el ejemplo si se elecciona la opción 2 el valor de selectedIndex será 0. Estos elementos son muy útiles para construir menús de enlaces.



     
Envía esta página a un amigo. Te lo agradecerá.   Poner esta página como página de inicio