Autor Tema: Comprobar checkbox marcados por usuario en formulario con JavaScript CU01130E (Leído 6008 veces)

Cabanota · « **en:** 15 de Abril 2015, 23:17 »

Buenas tardes colegas. Quería compartirles otra manera diferente de hacer el ejercicio de la clase:

Citar

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

...Siento yo que lo hice de una manera un poco mas avanzadita, Lo que hice fue que el ejemplo de la clase lo copie y pegue para ejecutarlo en el navegador y fijarme en el resultado, despues quise hacerlo a mi manera y cuando termine de hacerlo, compare y siempre es bastante diferente. Me gustaría leer opiniones de como puedo mejorar y acortar mucho mas mi código, que es mi objetivo. De ante mano muchas gracias. Aquí les dejo mi manera de realizar este ejemplo de esta clase:

Código: [Seleccionar]


<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		label{
			display: inline-block;
			padding: 5px;
		}
	</style>
</head>
<body>
	<div id="cabecera">
		<h1>Portal web aprenderaprogramar.com</h1>
		<h2>Didactica y divulgacion de la programacion</h2>
	</div>
	<div>
		<form name="formularioContacto" class="formularioTipo1" method="get" action="http://aprenderaprogramar.com" onsubmit="informarElegido('animal')">
			<p>Si quieres contactar con nosotros enianos 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">Leon</label>
			<input type="checkbox" name="animal" id="tigre" value="Tigre" /><label for="tigre">Tigre</label>
			<input type="checkbox" name="animal" id="gepardo" value="Gepardo"/><label for="gepardo">Gepardo</label>
			<input type="checkbox" name="animal" id="jaguar" value="Jaguar" /><label for="jaguar">Jaguar</label>

			<label>
				<input type="submit" value="ENVIAR" />
				<input type="reset" value="CANCELAR" />
			</label>
		</form>
	</div>
	<script type="text/javascript">
		function informarElegido (elemento) {
			var elegido = 0;
			var elementosObtenidos = document.getElementsByName(elemento);
			var cont = "Animales que ha elegido que le gustan incluye: ";

			for (var i = 0; i < elementosObtenidos.length; i++) {
				if (elementosObtenidos[i].checked == true){
					cont += elementosObtenidos[i].value + ", ";
					elegido++;
				}
			};
			cont = cont.substring(0, cont.length - 2); //Esto simplemente lo quise colocar porque no me gustaba que al final del cont quedara una ","
			if (elegido) {
				alert(cont);
			}else{
				alert("¡No ha elegido ningún animal!");
			}
		}	
	</script>	
</body>
</html>

Ogramar · « **Respuesta #1 en:** 16 de Abril 2015, 09:32 »

Hola Cabanota el código se ve bien programado y bien pensado, la idea cont = cont.substring(0, cont.length - 2); también me ha gustado.

No has respondido a lo que pedía el ejercicio (te recomiendo hacerlo porque así se puede comprobar si eres capaz de responder a todo y también comparar respuestas de otras personas).

Salu2

Cabanota · « **Respuesta #2 en:** 16 de Abril 2015, 14:58 »

Buenos días. Gracias por responder

eso me motiva mas a seguir adelante y a darme cuenta que voy por buen camino. Así que muchas gracias y con referente a lo del ejercicio, aquí esta mi propuesta:

Citar

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”.

Código: [Seleccionar]


<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		label{
			display: inline-block;
			padding: 5px;
		}
	</style>
</head>
<body>
	<div id="cabecera">
		<h1>Portal web aprenderaprogramar.com</h1>
		<h2>Didactica y divulgacion de la programacion</h2>
	</div>
	<div style="width: 400px">
		<form name="formularioContacto" class="formularioTipo1" method="get" action="http://aprenderaprogramar.com" onsubmit="informarElegido('animal')">
			<p>Si quieres contactar con nosotros enianos 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">Leon</label>
			<input type="checkbox" name="animal" id="tigre" value="Tigre" /><label for="tigre">Tigre</label>
			<input type="checkbox" name="animal" id="gepardo" value="Gepardo"/><label for="gepardo">Gepardo</label>
			<input type="checkbox" name="animal" id="jaguar" value="Jaguar" /><label for="jaguar">Jaguar</label>

			<label>
				<input type="submit" value="ENVIAR" />
				<input type="reset" value="CANCELAR" />
			</label>
		</form>
	</div>
	<script type="text/javascript">
		function informarElegido (elemento) {
			var elegido = 0;
			var elementosObtenidos = document.getElementsByName(elemento);
			var cont = "Animales que ha elegido que le gustan incluye: ";

			for (var i = 0; i < elementosObtenidos.length; i++) {
				if (elementosObtenidos[i].checked == true){
					cont += elementosObtenidos[i].value + ", ";
					elegido++;
				}
			};
			cont = cont.substring(0, cont.length - 2) + "."; //Esto simplemente lo quise colocar porque no me gustaba que al final del cont quedara una ","
			if (elegido) {
				alert("El numero total de animales es: " + elementosObtenidos.length + ", y usted a elegido: " + elegido + ".\n" + cont);
			}else{
				alert("¡No ha elegido ningún animal!");
			}
		}	
	</script>	
</body>
</html>

Ogramar · « **Respuesta #3 en:** 16 de Abril 2015, 20:53 »

Está perfecto

Te animo a responder también los apartados a) y b) para ir dejando completo las respuestas. Así también podrán ser consultadas por otras personas y recibir opiniones si alguien no está de acuerdo.

Salu2

Cabanota · « **Respuesta #4 en:** 16 de Abril 2015, 23:16 »

Amigo gracias. Pero una duda, con referente al punto b) que dice así:

Citar

b) Modifica el código para obtener el mismo resultado pero sin utilizar if anidados.

Con ese cogido que emplee ya no estaría aplicando if anidados o si? $:-\$ . solo utilice una sentencia if y con el ciclo for repite las veces necesarias. Me gustaría que me aclararas esa inquietud.

Y con respecto al punto a) que dice lo siguiente:

Citar

a) ¿Escribir if (elementosObtenidos[1].checked == true) genera el mismo resultado que escribir if (elementosObtenidos[1].checked)? ¿Por qué?

Pues, no se darle bien la respuesta a esta pregunta,, o mas bien no me se explicar, pero lo intento y usted que tiene la experiencia me corrige.

Considero que el resultado es el mismo porque true tiene un equivalente. como decia en una tutoria anterior, cito lo siguiente:

Citar

Las variables booleanas toman valor true o false. Puede considerarse que existe un equivalente numérico (1 para true y 0 para false), pero debemos decidir si queremos operar con números, usar una variable numérica, y si queremos operar con los valores true y false, operar con variables booleanas.

Citar

En general toda variable tiene un equivalente numérico y un equivalente en forma de texto. Por ejemplo el equivalente en forma de texto del valor true sería ‘true’ y se puede obtener escribiendo el nombre de la variable seguido de toString(). Por ejemplo casado.toString() devuelve la cadena de texto ‘true’, que es diferente del valor booleano true.

En ese orden de ideas en el array elementosObtenidos[1] que estaría en la posición 1, ya de por si el interprete sabe que es un valor true, entonces en ese caso se puede omitir hacer la referencia. O tambien porque el array elementosObtenidos tiene un algun valor, y cuando una variable, en este caso un objeto(array) es diferente de cero, quiere decir que tiene algun contenido que es igual a true. si no tuviera ningún contenido entonces seria igual a false. JAJAJAAJ.. La verdad colega. me gustaría que usted me explicara mejor ese punto. Estaría muy agradecido.
De ante mano, muchas gracias.

Ogramar · « **Respuesta #5 en:** 17 de Abril 2015, 08:43 »

Hola, la respuesta a la pregunta a) es que ambas expresiones generan el mismo resultado.

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)

Para el apartado b) los if anidados los tenemos en el código de la entrega del curso por ejemplo aquí:

if (elementosObtenidos[1].checked == true) { if (elegidos>=1) {msg = msg + ', ';}
msg = msg + elementosObtenidos[1].value; elegidos=elegidos+1;}

En la respuesta que has dado tú al ejercicio no utilizas if anidados, por tanto la respuesta es correcta para los apartados a), b) y c).

Nota: me he dado cuenta de que el bucle for todavía no se ha explicado dentro del curso. Aquí se explica cómo se puede hacer sin usar un bucle: https://www.aprenderaprogramar.com/foros/index.php?topic=2590.0

Salu2!

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

Noticias:

Autor Tema: Comprobar checkbox marcados por usuario en formulario con JavaScript CU01130E (Leído 6008 veces)

Cabanota

Comprobar checkbox marcados por usuario en formulario con JavaScript CU01130E

Ogramar

Re:Comprobar checkbox marcados por usuario en formulario con JavaScript CU01130E

Cabanota

Re:Comprobar checkbox marcados por usuario en formulario con JavaScript CU01130E

Ogramar

Re:Comprobar checkbox marcados por usuario en formulario con JavaScript CU01130E

Cabanota

Re:Comprobar checkbox marcados por usuario en formulario con JavaScript CU01130E

Ogramar

Re:Comprobar checkbox marcados por usuario en formulario con JavaScript CU01130E

Preguntas y respuestas