Autor Tema: CU01130E# getElementsByName. onsubmit al enviar formulario form con input submit (Leído 3130 veces)

Dimitar Stefanov · « **en:** 02 de Febrero 2016, 19:39 »

Posible solución del ejercicio CU01130E del curso JavaScript desde cero (programación web).

a) Las dos maneras son correctas, tanto: if (elementosObtenidos[1].checked == true) como: if (elementosObtenidos[1].checked). Se produce este efecto, porque el navegador, con la condicional: if (elementosObtenidos[1].checked) intenta averiguar si ha sido seleccionado o no. Y con la condicional: if (elementosObtenidos[1].checked == true) intenta hacer lo mismo. En el segundo caso le damos explícitamente que valore si es verdadera o falsa esta condicional, pero en el primer caso hace dicha comparación automáticamente.

b) El código quedaría así:

Código: [Seleccionar]

<!DOCTYPE html>
<html>
<head>
	<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='Los animales que ha elegido: ';
	elegidos=0;
	if(elementosObtenidos[0].checked){msg=msg+elementosObtenidos[0].value; elegidos=elegidos+1;}
	if(elementosObtenidos[1].checked&&elegidos>=1){msg=msg+', ';}
	if(elementosObtenidos[1].checked){msg=msg+elementosObtenidos[1].value; elegidos=elegidos+1;}
	if(elementosObtenidos[2].checked&&elegidos>=1){msg=msg+', ';}
	if(elementosObtenidos[2].checked){msg=msg+elementosObtenidos[2].value; elegidos=elegidos+1;}
	if(elementosObtenidos[3].checked&&elegidos>=1){msg=msg+', ';}
	if(elementosObtenidos[3].checked){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>
	<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="apeliidos"/></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>
	</div>
	</form>
</body>
</html>

3) El código quedaría de la siguiente manera.

Código: [Seleccionar]

<!DOCTYPE html>
<html>
<head>
	<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='El número total de animales disponibles era: ';
	elegidos=0;
	if(elementosObtenidos[0].checked){elegidos=elegidos+1;}
	if(elementosObtenidos[1].checked){elegidos=elegidos+1;}
	if(elementosObtenidos[2].checked){elegidos=elegidos+1;}
	if(elementosObtenidos[3].checked){elegidos=elegidos+1;}
	alert(msg+elementosObtenidos.length+' y usted ha elegido: '+elegidos);
	}
	</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>
	<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="apeliidos"/></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>
	</div>
	</form>
</body>
</html>

Gracias.

pedro,, · « **Respuesta #1 en:** 05 de Febrero 2016, 19:19 »

Hola dimiste.

La respuesta a, quedaría mejor explicada de la siguiente forma(es una explicación que dio Ogramar en otro post):
El motivo es que cualquier expresión dentro de un if se intenta traducir por parte del intérprete en un valor booleano (true o false) o en un valor numérico (0 que equivaldría a false, u otro valor equivaldría a true). En este caso cuando el intérprete recibe if (elementosObtenidos[1].checked) lo que hace es evaluar elementosObtenidos[1].checked y determina si su valor es equivalente a true ó false. Por tanto, genera el mismo resultado que if (elementosObtenidos[1].checked == true)

La respuesta b y c están bien.

Saludos.

Dimitar Stefanov · « **Respuesta #2 en:** 09 de Febrero 2016, 11:19 »

Buenas, Pedro.

Sí, es cierto, quedaría mucho mejor de la manera que la explicó Ogramar. De hecho, antes de publicar mi respuesta había mirado la de Ogramar, pensaba que decía lo mismo que él, pero con palabras mias. Veo que no he conseguido mucho el reto, jejeje.

Gracicas por corregirme el ejercicio.

Un saludo.

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: