Codificación aprenderaprogramar.com: CU01130E
GETELEMENTSBYNAME JAVASCRIPT
El acceso a un nodo concreto del DOM usando getElementById es muy frecuente, pero hay otras maneras de acceder a los nodos del DOM. Una de ellas es usando getElementsByName('valorNameBuscado'). Esta función nos devuelve un array conteniendo todos los nodos DOM cuyo atributo name coincide con valorNameBuscado.
El orden en que aparecerán los elementos en el array (comenzando con índice cero) es el mismo en el que aparezcan en el código de la página web. Ejemplo:
|
var elementosAnimal = document.getElementsByName('animal'); |
Nos devolverá un array con todos los nodos de tipo element que tengan como atributo html name “animal”, empezando con índice cero: elementosAnimal[0], elementosAnimal[1], elementosAnimal[2], elementosAnimal [3] … hasta el índice que sea necesario para abarcar tantos elementos como haya en el código con el atributo name=”animal”. Podemos obtener los nodos de cualquier tipo de etiqueta que lleve el atributo name (input, textarea, select, button, img, etc.).
No todos los elementos HTML admiten que se les incluya un atributo name. Por ejemplo <div name=”animal”> … </div> no es correcto porque el atributo name no es aplicable a los elementos div.
Los elementos HTML que admiten el atributo name son: button, form, fieldset, iframe, input, keygen, object, output, select, textarea, map, meta, param.
A diferencia del atributo id que ha de ser único para un elemento dentro de una página web, el atributo name puede aparecer repetido en diversos elementos del código HTML de la página web. Un caso típico sería disponer varios radiobuttons cuyo atributo name es el mismo.
Siempre que sea posible elegir entre usar getElementsById ó getElementsByName recomendamos usar getElementsById pues aporta mayor seguridad.
Tener en cuenta que escribimos document.getElementsByName('animal') porque queremos empezar la búsqueda desde el nodo raíz del DOM, es decir, el nodo document (así exploramos todos los nodos). Podríamos empezar la búsqueda por otro nodo si resultara de interés.
EVENTO ONSUBMMIT
Ya hemos trabajado con algunos eventos como onclick, onload… añadimos ahora a nuestro repertorio un evento denominado onsubmmit, que es el evento que se produce cuando el usuario pulsa el botón de envío de un formulario. Ejemplo:
|
<form name ="formularioContacto" method="get" action="http://aprenderaprogramar.com" onsubmit="validar()"> |
Según este ejemplo, cuando el usuario pulse el botón enviar del formulario, se ejecutará la función JavaScript validar().
Para ver la aplicación del acceso con getElementsByName y el evento onsubmit con JavaScript escribe el siguiente código y comprueba sus efectos al visualizar la página y pulsar el botón enviar:
|
<!DOCTYPE html> <html> <head> <title>Ejemplo JavaScript - aprenderaprogramar.com</title> <meta charset="utf-8"> <style type="text/css"> body {background-color:white; font-family: sans-serif;} label {color: maroon; display:inline-block; padding:5px;} </style> <script type="text/javascript"> function informarItemsElegidos(elemento) { var elementosObtenidos = document.getElementsByName(elemento); var msg = 'Animales que ha elegido que le gustan incluye: '; var elegidos = 0; if (elementosObtenidos[0].checked == true) {msg = msg + elementosObtenidos[0].value; elegidos=elegidos+1;} if (elementosObtenidos[1].checked == true) { if (elegidos>=1) {msg = msg + ', ';} msg = msg + elementosObtenidos[1].value; elegidos=elegidos+1;} if (elementosObtenidos[2].checked) { if (elegidos>=1) {msg = msg + ', ';} msg = msg + elementosObtenidos[2].value; elegidos=elegidos+1;} if (elementosObtenidos[3].checked) { if (elegidos>=1) {msg = msg + ', ';} msg = msg + elementosObtenidos[3].value; elegidos=elegidos+1;} if (elegidos == 0 ) {msg = '¡No ha elegido ningún animal!';} alert (msg); } </script> </head> <body> <div id="cabecera"> <h1>Portal web aprenderaprogramar.com</h1> <h2>Didáctica y divulgación de la programación</h2> </div> <!-- Formulario de contacto --> <div style="width:450px;"> <form name ="formularioContacto" class="formularioTipo1" method="get" action="http://aprenderaprogramar.com" onsubmit="informarItemsElegidos('animal')"> <p>Si quieres contactar con nosotros envíanos este formulario relleno:</p> <label for="nombre"><span>Nombre:</span> <input id="nombre" type="text" name="nombre" /></label> <label for="apellidos"><span>Apellidos:</span> <input id="apellidos" type="text" name="apellidos" /></label> <p>Elige los animales que te gusten:</p> <input type="checkbox" name="animal" id="leon" value="leon" /> <label for="leon">León & nbsp;& nbsp;& nbsp; </label> <input type="checkbox" name="animal" id="tigre" value="tigre" /> <label for="tigre">Tigre & nbsp;& nbsp;& nbsp; </label> <input type="checkbox" name="animal" id="guepardo" value="guepardo" /> <label for="guepardo">Guepardo & nbsp;& nbsp;& nbsp; </label> <input type="checkbox" name="animal" id="jaguar" value="jaguar" /> <label for="jaguar">Jaguar </label> <label for="email"><span>Correo electrónico:</span> <input id="email" type="text" name="email" /></label> <label> <input type="submit" value="Enviar" /> <input type="reset" value="Cancelar" /> </label> </form> </div> </body> </html> |
El resultado esperado es que al pulsar el botón enviar del formulario se nos muestre un mensaje en función de los animales que hayamos elegido. Si no hemos elegido ningún animal se nos mostrará: ¡No ha elegido ningún animal!. Si hemos elegido por ejemplo el tigre y el jaguar se nos mostrará: Animales que ha elegido que le gustan incluye: tigre, jaguar.
EJERCICIO
Responde a las siguientes preguntas:
a) ¿Escribir if (elementosObtenidos[1].checked == true) genera el mismo resultado que escribir if (elementosObtenidos[1].checked)? ¿Por qué?
b) Modifica el código para obtener el mismo resultado pero sin utilizar if anidados.
c) Utilizando la propiedad length aplicada a la colección de nodos obtenida mediante getElementsByName, modifica el código para que el resultado sea que al enviar el formulario el mensaje que aparezca sea “El número total de animales disponibles era … y usted ha elegido …”. Por ejemplo, si tenemos 4 animales (León, Tigre, Guepardo, Jaguar) y hemos elegido Tigre nos debe aparecer el mensaje “El número total de animales disponibles era 4 y usted ha elegido 1”.
Para comprobar si tus respuestas son correctas 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.
