Codificación aprenderaprogramar.com: CU01179E
MÁS JAVASCRIPT EN FORMULARIOS
Cuando trabajamos con formularios es habitual que queramos introducir efectos dinámicos a medida que el usuario realiza selección de opciones. Por ejemplo, si se trata de una compra y el usuario selecciona para con tarjeta Visa, en un lateral podemos mostrar la comisión aplicable. Si cambia la elección a tarjeta Mastercard, podemos hacer que automáticamente cambie la comisión aplicable utilizando JavaScript.
RECUPERAR VALUE PARA TEXT Y TEXTAREA
Para recuperar el contenido de un cuadro de texto correspondiente a un input de tipo text ó textarea usamos el atributo value del elemento HTML. La sintaxis será similar a:
| document.getElementById('apellidos').value |
El evento para detectar cambios en los cuadros de texto y textarea normalmente será “onchange”.
Veremos el ejemplo de código después de explicar otros elementos.
RECUPERAR CHECKED PARA UN CONJUNTO DE RADIO BUTTONS
Cuando tenemos un conjunto de radio buttons, cada uno de ellos tiene un value, pero lo que nos interesa saber es cuál de los radio buttons de los posibles ha sido elegido. En un conjunto de radio buttons, sólo uno puede estar marcado (o no estar marcado ninguno), y ese elemento es el que nos interesará. Para determinar el elemento marcado usamos la propiedad checked. La sintaxis será similar a:
|
var radioButTrat = document.getElementsByName("nameUtilizado"); for (var i=0; i<radioButTrat.length; i++) { if (radioButTrat[i].checked == true) { … código a ejecutar } } |
El evento para detectar cambios en los conjuntos radio button normalmente será “onclick”.
Veremos el ejemplo de código después de explicar otros elementos.
RECUPERAR CHECKED PARA UN CONJUNTO DE CHECKBOX
Cuando tenemos un conjunto de checkbox, cada uno de ellos tiene un value, pero lo que nos interesa saber es qué casillas han sido marcadas (a diferencia de los radio buttons, en el caso de los checkbox podemos tener marcada ninguna, una o varias casillas). Para ello usamos la propiedad checked. La sintaxis será similar a:
|
var radioButTrat = document.getElementsByName("tratamiento"); for (var i=0; i<radioButTrat.length; i++) { if (radioButTrat[i].checked == true) { … código a ejecutar } } |
El evento para detectar cambios en los conjuntos checkbox normalmente será “onchange”.
Veremos el ejemplo de código después de explicar otros elementos.
RECUPERAR LA OPCIÓN SELECCIONADA EN UN SELECT
Cuando tenemos una lista desplegable select con diferentes option, en general nos interesará saber cuál de los elementos option es el que se encuentra seleccionado y el contenido de su atributo value. Para ello hemos de tener en cuenta que:
a) Cada elemento HTML de tipo select tiene una propiedad denominada options, de tipo array, que contiene los elementos options con índice 0, 1, 2, … n. Por ejemplo aquí vemos cómo extraer los elementos select, sus atributos value y el texto que contienen (mediante la propiedad text).
|
var elementosSelect = document.getElementsByTagName('select'); alert('Contenido de value es: '+ elementosSelect[0].value; alert('Contenido texto es: '+ elementosSelect[0].text; |
La propiedad selectedIndex del elemento select nos devuelve el índice numérico de la opción seleccionada (la primera opción tiene índice 0, la segunda 1, y así sucesivamente).
Aquí vemos un ejemplo de cómo se puede utilizar selectedIndex:
|
var elementoCiudad = document.getElementById('ciudad'); var indiceSeleccionado = elementoCiudad.selectedIndex; alert (elementoCiudad.options[indiceSeleccionado].text); |
También podemos escribir elementoCiudad.options[elementoCiudad.selectedIndex].text prescindiendo del uso de la variable intermedia indiceSeleccionado.
El evento para detectar cambios en los select normalmente será “onchange”.
EJERCICIO Y EJEMPLO
El código que vamos a ver a continuación nos va a servir al mismo tiempo como ejemplo de las cuestiones que hemos explicado anteriormente y como ejercicio.
Para probar el funcionamiento de este código debes poner dos imágenes de 100 por 100 píxeles con el nombre caraHombre.jpg y caraMujer.jpg, en el mismo directorio donde tengas el código HTML. Nosotros vamos a usar estas dos imágenes (usa estas u otras según prefieras):
Escribe el siguiente código, guárdalo como archivo con extensión HTML, visualízalo en tu navegador y comprueba su funcionamiento. No prestes atención al código CSS, ya que lo que nos interesa es centrarnos en JavaScript. Estudia el código y responde a las preguntas que se plantean más abajo. Este código usa conocimientos variados que hemos ido adquiriendo a lo largo del curso, por lo que nos viene bien como repaso. Si has venido siguiendo el curso, deberías ser capaz de entender todo el código.
|
<!DOCTYPE html> <html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8"> <style type="text/css"> body {margin-left:30px; font-family: sans-serif;} h4 {margin:0;} div {float:left;} .estiloForm, #encuadraImagen, #datos {background-color: #f3f3f3; border: solid 2px black; margin-left:10px; width:300px; } .estiloForm { width: 330px; padding:10px;} #datos {margin-top: 20px; height:226px; padding:10px;} #encuadraImagen {width:100px; height:100px; text-align:center;} .estiloForm label {display: block; width: 120px; float: left; text-align:right; margin-bottom: 35px; padding-right: 20px;} br {clear: left;} input[type="submit"], input[type="reset"] {margin:25px 5px 10px 5px;} </style> <script type="text/javascript"> window.onload = function () { /* Variables globales (por estar declaradas sin var) */ casillaDatos = document.getElementById('datos'); //Nodo donde vamos a mostrar los datos radioButTrat = document.getElementsByName("tratamiento"); //Nodos radio buttons checkboxElements = new Array();
var elementosDelForm = document.getElementsByTagName('input'); //Elementos input var elementosSelect = document.getElementsByTagName('select'); for(var i=0; i<elementosDelForm.length;i++) { if (elementosDelForm[i].type == 'radio') {elementosDelForm[i].addEventListener("click", actualizarDatos);} else {elementosDelForm[i].addEventListener("change", actualizarDatos);} if (elementosDelForm[i].type == 'checkbox') {checkboxElements.push(elementosDelForm[i]);} } for (var i=0; i<elementosSelect.length;i++) {elementosSelect[i].addEventListener("change", actualizarDatos);} }
function actualizarDatos() { var rutaImagen = ''; var radioButSelValue = ''; for (var i=0; i<radioButTrat.length; i++) {if (radioButTrat[i].checked == true) { radioButSelValue= radioButTrat[i].value;} } if (radioButSelValue != ''){ if (radioButSelValue =='Sr.') {rutaImagen='caraHombre.jpg';} else {rutaImagen='caraMujer.jpg';} document.getElementById('encuadraImagen').innerHTML = ''; document.getElementById('encuadraImagen').style.background='url("'+rutaImagen+'") no-repeat'; } var checkBoxSel = new Array(); for (var i=0; i<checkboxElements.length;i++) { if (checkboxElements[i].checked ==true) {checkBoxSel.push(checkboxElements[i].name);} }
var elementoCiudad = document.getElementById('ciudad'); casillaDatos.innerHTML='<h4> Datos introducidos: </h4><p>Tratamiento: '+(radioButSelValue||' --- ')+'</p>'+ '<p>Nombre: '+document.getElementById('nombre').value+'</p>'+ '<p>Apellidos: ' + (document.getElementById('apellidos').value||' --- ')+'</p>'+ '<p>Dirección: ' + (document.getElementById('direccion1').value||' --- ')+'</p>'+ '<p>Ciudad: ' + (elementoCiudad.options[elementoCiudad.selectedIndex].text||' --- ')+'</p>'+ '<p>Preferencias: ' + (checkBoxSel||' --- ')+'</p>'; } </script></head> <body><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3> <div class="estiloForm"> <form name ="formularioContacto" method="get" action="#"> <label>Tratamiento</label> <input type="radio" name="tratamiento" id="tratarSr" value="Sr."/>Sr. <input type="radio" name="tratamiento" id ="tratarSra" value="Sra."/>Sra.<br/> <label>Nombre</label><input id="nombre" name="nombre" type="text"/><br/> <label>Apellidos</label><input id="apellidos" name="apellidos" type="text"/><br/> <label>Dirección</label><input id="direccion1" name="direccion1" type="text"/><br/> <label>Ciudad</label><select id="ciudad" name="ciudad"> <option value="">Elija opción</option> <option value="Mexico">México D.F. (MX)</option> <option value="Madrid">Madrid (ES)</option> <option value="Santiago">Santiago (CL)</option> </select><br/> <label>Preferencias</label><input name="Libros" type="checkbox" />Libros <input name="Peliculas" type="checkbox" />Películas <input type="submit" value="Enviar"/> <input type="reset" value="Cancelar"/> </div> <div style="float:left;"> <div id="encuadraImagen"><h1> ? </h1></div><br/> <div id="datos" style="float:left;"><h4> Datos introducidos: </h4></div> </form> </div> </body></html> |
El resultado esperado es que cuando se escriba o seleccionen opciones en el formulario, se muestren las imágenes y texto correspondientes en el lado derecho (en la imagen vemos un ejemplo).
Responde estas preguntas (mantén la consola activada para ver posibles mensajes de error):
a) ¿Qué código es el que hace posible que cuando se selecciona el radio button Sr aparezca la imagen caraHombre.jpg y que cuando se selecciona el radio button Sra aparezca la imagen caraMujer.jpg?
b) ¿ radioButTrat es una variable global o local a una función? ¿Por qué?
c) ¿radioButTrat es una array o un objeto NodeList de tipo array-like? ¿El método length es aplicable a objetos de tipo array? ¿El método length es aplicable a objetos de tipo array-like?
d) ¿Qué ocurre si tratas de aplicar el método push a radioButTrat? Escribe el código para ello. ¿Qué mensaje visualizas en la consola? Busca información y trata de explicar por qué ocurre esto.
e) ¿Las imágenes son el fondo de un elemento HTML distinto de img o es el atributo source de un elemento img?
f) ¿checkBoxSel es un array o un NodeList de tipo array-like?
g) ¿Qué significa y para qué sirve este código: checkBoxSel||' --- ' ?
h) ¿Y este otro: elementoCiudad.options[elementoCiudad.selectedIndex].text ?
Para comprobar si tus respuestas y código son correctos puedes consultar en los foros aprenderaprogramar.com.
Para acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link: Ver curso completo.
Para hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.
