CU01130E getElementsByName javascript evento onsubmit envio
Anuncio
Acceder a nodos JavaScript. getElementsByName.
APRENDERAPROGRAMAR.COM
GETELEMENTSBYNAME
JAVASCRIPT. EVENTO
ONSUBMIT AL ENVIAR UN
FORMULARIO FORM.
CHECKED. EJEMPLO
(CU01130E)
Sección: Cursos
Categoría: Tutorial básico del programador web: JavaScript desde cero
Fecha revisión: 2029
Resumen: Entrega nº30 del Tutorial básico “JavaScript desde cero”.
© aprenderaprogramar.com, 2006-2029
Autor: César Krall
Acceder a nodos
n
JavaScrip
pt. getElementssByName.
GETELEMENTSBYNAM
ME JAVASCRIPT
El acceso
o a un nodo
o concreto del
d DOM usaando getElementById es muy frecu
uente, pero hay otras
maneras
de
accceder
a
los
nod
dos
del
U
Una
de
DOM.
ellas
es
usando
getElementsByName('valorNameB
Buscado'). Esta función nos devuelvve un array cconteniendo
o todos los
nodos DO
OM cuyo atrib
buto name coincide
c
con valorNameB
Buscado.
e que apareecerán los elementos en
n el array (co
omenzando con
c índice ceero) es el mismo en el
El orden en
que apareezcan en el código
c
de la página
p
web. Ejemplo:
var elementossAnimal = document.getEElementsByN
Name('animaal');
olverá un arrray con todo
os los nodos de tipo ele
ement que tengan
t
como atributo html
h
name
Nos devo
“animal”, empezando
o con índice cero: elemeentosAnimal[[0], elementosAnimal[1], elementosAnimal[2],
elemento
osAnimal [3] … hasta el ín
ndice que seea necesario para abarcaar tantos elementos com
mo haya en
el código con el atribu
uto name=”aanimal”. Podemos obtener los nodoss de cualquieer tipo de etiqueta que
lleve el attributo namee (input, texttarea, select, button, imgg, etc.).
No todoss los elementos HTML admiten qu
ue se les in
ncluya un atributo
a
nam
me. Por ejem
mplo <div
name=”an
nimal”> … <//div> no es correcto porq
que el atributo name no es aplicable a los elemen
ntos div.
Los elemeentos HTML que admiten el atributo
o name son: button, form, fieldset, iframe, inpu
ut, keygen,
object, ou
utput, select,, textarea, map,
m meta, paaram.
A diferenccia del atribu
uto id que haa de ser únicco para un elemento den
ntro de una p
página web, el atributo
name pueede apareceer repetido en
e diversos elementos del código HTML
H
de la página web
b. Un caso
típico seríía disponer varios
v
radiob
buttons cuyo atributo nam
me es el mismo.
Siempre que
q sea posible elegir en
ntre usar gettElementsById ó getElem
mentsByName recomendamos usar
getElementsById puess aporta mayyor seguridad
d.
d
etElementsByyName('anim
mal') porque queremos empezar
e
la
Tener en cuenta que escribimos document.ge
búsquedaa desde el no
odo raíz del DOM, es deecir, el nodo
o document (así exploram
mos todos lo
os nodos).
Podríamo
os empezar laa búsqueda por
p otro nod
do si resultarra de interés..
EVENTO ONSUBMMIT
O
T
Ya hemoss trabajado con
c algunos eventos com
mo onclick, onload…
o
añaadimos ahoraa a nuestro repertorio
un evento
o denominad
do onsubmm
mit, que es el evento que
e se producee cuando el u
usuario pulsa el botón
de envío de
d un formulario. Ejemplo:
© aprenderraprogramar.co
om, 2006-2029
Acceder a nodos JavaScript. getElementsByName.
<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 PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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>
© aprenderaprogramar.com, 2006-2029
Acceder a nodos JavaScript. getElementsByName.
<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
aprenderaprogramar.com.
respuestas
son
correctas
puedes
consultar
en
los
Próxima entrega: CU01131E
Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la dirección siguiente:
http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206
© aprenderaprogramar.com, 2006-2029
foros
