Javascript: lenguaje interactivo para dinamizar la web.
Y ahora tambien aprende a programar en C++ con Aprende Web C++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 181
Visitas el mes pasado: 631
Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:
Por elegir aprende-web
Aprende-web está diseñado a partir de los lenguajes que aquí mismo se enseñan.
By Anyelguti
En los botones de radio el usuario sólo puede elegir una opción de entre un grupo de botones, por lo que lo habitual es comprobar que el usuario ha pulsado realmente alguno de los botones, y no se los ha dejado todos en blanco.
Vamos a tomar el siguiente formulario de ejemplo, éste es su código HTML:
<form name="formulario" action="#" onsubmit="return comprobar()"> <input type="radio" name="estacion" value="primavera" />Primavera <br/> <input type="radio" name="estacion" value="verano" />Verano <br/> <input type="radio" name="estacion" value="otoño" />Otoño <br/> <input type="radio" name="estacion" value="invierno" />Invierno <br/> <input type="submit" /> </form>
Para comprobar los botones radio accedemos al array de los elementos,
y creamos un bucle para comprobar si éstos están o no seleccionados. Después mandaremos
un mensaje mediante una ventana alert()
que diga si se ha elegido algún botón o no.
El código javascript es el siguiente:
function comprobar() { var pulsado = false;//variable de comprobación var opciones = document.formulario.estacion; //array de elementos var elegido = -1; //número del elemento elegido en el array for (i=0;i<opciones.length;i++) { //bucle de comprobación if (opciones[i].checked == true) { pulsado = true elegido = i //número del elemento elegido en el array } } if (pulsado == true) { //mensaje de formulario válido miOpcion = opciones[elegido].value alert("Has elegido la opción: " + miOpcion + "\n El formulario ha sido enviado.") } else { //mensaje de formulario no válido. alert("no has elegido ninguna opción. \n Elige una opción para que el formulario pueda ser enviado") return false //el formulario no se envía. } }
Los comentarios del código no son necesarios (texto en morado), pero ayudan a aclarar qué es cada trozo de código. Puedes ver cómo funciona el formulario en las siguientes líneas:
Los botones tipo checkbox son independientes unos de otros por lo que unos podrán estár pulsados y otros no. aquí las comprobaciones más habituales son en los botones que son obligatorios, es decir, que se obliga al usuario a tener seleccionado el botón para poder mandar el formulario. Un ejemplo típico es el botón para aceptar las condiciones de un contrato. El código html del botón será:
<form name="formulario2" action="#" onsubmit="return aceptar()"> <input type="checkbox" name="condiciones" value="aceptado" /> He leido y acepto las condiciones del contrato <br/><br/> <input type="submit" /> </form>
El script de comprobación es parecido al del ejemplo anterior, pero más
simple ya que aquí sólo hay un botón para comprobar. Por tanto con una instrucción
if
veremos si el botón está o no seleccionado, y si no lo está se
devuelve el valor false para que el formulario no se envíe.
El codigo javascript será el siguente:
function aceptar() { var opcion = document.formulario2.condiciones; //acceso al botón if (opcion.checked == true) { //botón seleccionado alert("El Formulario ha sido enviado") } else { //botón no seleccionado alert("El formulario no ha podido enviarse. \n Debe aceptar las condiciones para poder enviar el formulario"); return false; //el formulario no se envia } }
Puedes ver como funciona el formulario en las siguientes líneas:
Normalmente en las listas desplegables se suele comprobar que el usuario ha elegido una opción diferente de la que se pone por defecto. Es decir que este campo sea obligatorio. En este caso la opción por defecto se pone siempre en primer lugar y suele ser parecida a :
<option value="elegir">Elige una opción</option>
Veamos por ejemplo la siguiente lista desplegable:
<form action="#" name="formulario3" onsubmit="return elige()"> <select name="colores" id="colores" > <option>Elige un color</option> <option>Rojo</option> <option>Verde</option> <option>Amarilllo</option> <option>Azul</option> </select><br/><br/> <input type="submit" /> </form>
Para comprobar si hay algún elemento seleccionado nos valdremos de la propiedad
selectedIndex
, la cual indica cual es el numero del array del primer elemento
seleccionado. Si no hay ningún elemento seleccionado devuelve como valor
null
y si el elemento seleccionado es el primero devolverá 0.
Por tanto si devuelve cualquiera de estos valores sabremos que no hay ningún elemento
seleccionado.
El siguiente código javascript comprueba si se ha seleccionado algún elemento de la lista anterior, y devuelve mensajes diciendo si se ha seleccionado o no, caso de no seleccionarse impide que se envie el formulario.
function elige() { var lista = document.getElementById("colores") if (lista.selectedIndex == null || lista.selectedIndex == 0) { alert("El formulario no ha sido enviado; \n Debes elegir un color de la lista.") return false } else { alert("El formulario ha sido enviado") } }
Puedes comprobar como funciona el formulario en las siguientes lineas:
En estas páginas hemos comprobado los elementos de formulario uno a uno, pero lo normal
es que en un formulario haya diferentes elementos de diferentes clases que deban ser
comprobados. En ese caso comprobaremos todos en la misma función de la misma manera
que lo hemos hecho aqui. Conviene que el valor que se devuelva dentro de los elementos
if
sea return=false
, para que al final, si todo está correcto
se pueda enviar el formulario.
Un problema bastante habitual en el envio de formularios es que el usuario haga click dos veces en el botón de enviar y éste sea enviado por duplicado. Aunque en la mayoría de los casos no es un problema grave, si puede serlo en el caso de páginas de compras o de transacciones económicas. Podemos controlar esto de varias maneras:
Podemos, por ejemplo mandar al usuario a otra página en cuanto envie el formulario, esto no deshabilita el botón de envio, pero al cambiar de página el usuario ya no puede utilizar el formulario, a menos que cambie a la página anterior.
En esta nueva página lo habitual es avisar de que el formulario se ha enviado, y darle las gracias
por rellenarlo. Para cambiar a una nueva página utilizaremos el método de window open()
,
el cual ya lo vimos en el tema 5.6 Ventanas; esta sentencia
debemos ponerla en la función que controla las comprobaciones o validaciones vistas anteriormente,
(evento onsubmit
), en el caso de que el valor devuelto no sea false
.
Sin embargo otra forma de evitar el envio duplicado es deshabilitar efectivamente el botón
de envio, para ello, en primer lugar utilizaremos un botón tipo button
al que
mediante el evento onclick
le añadiremos algunas sentencias:
<input type="button" value="Enviar" onclick="this.disabled=true; this.value='Enviando...'; this.form.submit()/>
En el código anterior hemos puesto algunas instrucciones que se ejecutarán al pulsar el botón; estas son:
this.disabled=true
: esta es la instrucción que deshabilita el botón. la
propiedad disabled=true
indica que el botón debe ser deshabilitado. this.value='Enviando...'
: Cambiamos el texto del botón, por este
otro que resulta más apropiado. this.form.submit()
: Esta es la instrucción que envia el formulario.
el método submit()
es el que envia el formulario.Si hubieramos utilizado el botón submit, éste se deshabilita antes de ser enviado el
formulario, por lo que no hubieramos podido enviarlo. Esta es la razón de utilizar un
botón tipo button
.
Este código sirve cuando no hay que validar o comprobar elementos, sin embargo en el caso
de que tengamos que comprobar elementos mediante una función, como en los ejemplos anteriores,
seguiremos usando un botón tipo button
pero el envio y deshabilitación del botón
lo haremos desde la propia función, y sólo en los casos que haya que enviar el formulario.
Así en el último ejemplo visto, el de listas desplegables, modificaremos el script de la siguiente manera:
Borramos el botón submit
y el evento onsubmit
; y en su lugar ponemos
el siguiente botón:
<input type="button" value="Enviar" onclick="return elige(this);" />
Luego el código javascript lo modificaremos de la siguiente manera:
function elige(envio) { var lista = document.formulario3.colores if (lista.selectedIndex == null || lista.selectedIndex == 0) { alert("El formulario no ha sido enviado; \n Debes elegir un color de la lista.") } else { envio.disabled=true; envio.value='Enviando...'; envio.form.submit() } }
En el código hemos eliminado el elemento return
ya que el envio o no del formulario
se realiza desde la propia función.
El código para envio, deshabilitación y cambio del texto del botón, sólo se ejecutan cuando el elemento está seleccionado, caso contrario, el formulario sigue como estaba.
En las siguientes líneas puedes comprobar como funciona el formulario :
Por supuesto también podemos utilizar los dos métodos vistos aquí a la vez, es decir deshabilitar el botón, y a la vez mandar al usuario hacia otra página.
En el siguiente tema veremos otras estructuras de control en javascript
Sugerencias:
aprendeweb@aprende-web.net. Envia un
Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog
Más sobre anyelguti en http://anyelguti.16mb.com