getElementsByName JavaScript. onsubmit al enviar formulario form con input type submit. Ejemplo (CU01130E)

Resumen: Entrega nº30 del curso "Tutorial básico del programador web: JavaScript desde cero".
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. 

 

logo javascript

 

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.

Donar o colaborar

Este sitio se mantiene abierto gracias al apoyo de muchas personas. Si crees que merece la pena apoyar económicamente este sitio web puedes realizar una donación o colaborar. Contacta con nosotros.

¿Puedo yo aprender?

Seas o no del área informática, si quieres aprender a programar te ofrecemos una solución guiada y personalizada: realizar un curso tutorizado on-line. Con este tipo de curso, podrás aprender a programar de forma ágil y amena.

Acceder a detalles y precios de los cursos tutorizados on-line

Política sobre cookies

Utilizamos cookies propias y de terceros para ofrecerte una mejor experiencia y servicio, de acuerdo a tus hábitos de navegación.

Si continúas navegando, consideramos que aceptas su uso. Puedes obtener más información en nuestra Política de Cookies.

En Facebook!

Ahora puedes seguirnos en Facebook. Noticias, novedades y mucho más ¡Te esperamos!

RANKING APR2+

Ranking de lenguajes y entornos de programación aprenderaprogramar.com
 

SEPTIEMBRE - OCTUBRE 2017

1. Java / J2EE
2. Entornos Oracle
3. Entornos SQL Server
4. .NET, C#
5. JavaScript, jQuery
6. HTML, CSS
7. Php, MySql
8. Android, iOS


Acceder a detalles sobre el ranking de programación aprenderaprogramar.com

FOROS APR2+

Pregunta, responde, consulta, lee, intercambia...

Participa!!! Entra en los foros aprenderaprogramar.com.

             Copyright 2006-2017 aprenderaprogramar.com                La web abierta a cualquier persona interesada en la programación