JavaScript - Varios ID en un mismo getElementById

Varios ID en un mismo getElementById

Publicado por Sam (106 intervenciones) el 31/05/2014 13:22:46

Hola buenas, verán tengo el siguiente código que he conseguido en javascript para hacer cuando seleccione una

"option" de un select aparezca un input que este previamente oculto.

Pero no me funciona, aunque lo he intentado de mil manera.

El problema esta en que no tengo grandes conocimientos de javascript, si alguien me pudiera echar una mano le estaría muy agradecido.

var combo = document.getElementsByTagName("select")[0];

combo.onchange = function(){

	var valores = new Array("nombre_1", "nombre_2", "nombre_3");

	for (var i in valores){

		var id = valores[i];

		if (id[id.length - 1] == combo.value)

			document.getElementById(id).style.display = "block";

		else

			document.getElementById(id).style.display = "none";

};

<select name="" id="" >

	<option value="elija una opcion">elija una opcion</option>

	<option value="1">campo1</option>

	<option value="2">campo2</option>

	<option value="3">campo3</option>

</select>

<div id="nombre_1" style="display:none">

	<input type="text" name="" id=""/>

</div>

<div id="nombre_2" style="display:none">

	<input type="text" name="" id=""/>

</div>

<div id="nombre_3" style="display:none">

	<input type="text" name="" id=""/>

</div>

Gracias de antemano.

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 2

Val: 3.162

Varios ID en un mismo getElementById

Publicado por xve (2100 intervenciones) el 31/05/2014 23:35:54

Hola Sam, tu problema es que cargar el código de JavaScript antes de cargar los elementos HTML, por lo tanto, el envento da error... mira este código:

<script>

window.onload = function(){

	var combo = document.getElementsByTagName("select")[0];

	combo.onchange = function(){

		var valores = new Array("nombre_1", "nombre_2", "nombre_3");

		for (var i in valores){

			var id = valores[i];

			if (id[id.length - 1] == combo.value)

				document.getElementById(id).style.display = "block";

			else

				document.getElementById(id).style.display = "none";

};

</script>

<select name="" id="" >

	<option value="elija una opcion">elija una opcion</option>

	<option value="1">campo1</option>

	<option value="2">campo2</option>

	<option value="3">campo3</option>

</select>

<div id="nombre_1" style="display:none">

	<input type="text" name="" id=""/>

</div>

<div id="nombre_2" style="display:none">

	<input type="text" name="" id=""/>

</div>

<div id="nombre_3" style="display:none">

	<input type="text" name="" id=""/>

</div>

Coméntanos, ok?

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

Varios ID en un mismo getElementById

Publicado por Sam (106 intervenciones) el 01/06/2014 09:15:08

Perfecto, era lo que decias. Algo nuevo que he aprendido :-)

Eres un fenomeno xve.

Por cierto una cosa importante. Intento ahora hacer que el codigo en cuestion funcione para varios select a la vez.

Intento esto pero como soy principiante se resiste a funcionar para variar.

Esto es lo que estoy poniendo pero no va :-(

<script>

	window.onload = function(){

		var combo = document.getElementsByTagName("select")[0];

		combo.onchange = function(){

			var valores = new Array("nombre_1", "nombre_2", "nombre_3", "nombre_4", "nombre_5", "nombre_6");

			for (var i in valores){

				var id = valores[i];

				if (id[id.length - 1] == combo.value)

					document.getElementById(id).style.display = "block";

					else

					document.getElementById(id).style.display = "none";

};

</script>

<select name="" id="" >

	<option value="elija una opcion">elija una opcion</option>

	<option value="1">campo1</option>

	<option value="2">campo2</option>

	<option value="3">campo3</option>

</select>

<div id="nombre_1" style="display:none"> <input type="text" name="" id="" placeholder="input 1"/> </div>

<div id="nombre_2" style="display:none"> <input type="text" name="" id="" placeholder="input 2"/> </div>

<div id="nombre_3" style="display:none"> <input type="text" name="" id="" placeholder="input 3"/> </div>

<br/>

<hr>

<br/>

<select name="" id="" >

	<option value="elija una opcion">elija una opcion</option>

	<option value="4">campo4</option>

	<option value="5">campo5</option>

	<option value="6">campo6</option>

</select>

<div id="nombre_4" style="display:none"> <input type="text" name="" id="" placeholder="input 4"/> </div>

<div id="nombre_5" style="display:none"> <input type="text" name="" id="" placeholder="input 5"/> </div>

<div id="nombre_6" style="display:none"> <input type="text" name="" id="" placeholder="input 6"/> </div>

Y gracias de antemano.

Valora esta respuesta

Comentar

Varios ID en un mismo getElementById

Publicado por Sam (106 intervenciones) el 02/06/2014 11:19:05

La intención es poder implementar esto a un formulario que contendría varios selects con sus options.

Valora esta respuesta

Comentar

Pos: 2

Val: 3.162

Varios ID en un mismo getElementById

Publicado por xve (2100 intervenciones) el 02/06/2014 15:17:19

Hola Sam, para poder trabajar con varios combo simultáneos, tienes que hacer un bucle por todos los combos para definir en cada uno de ellos la función onchange... algo así:

<script>

	window.onload = function(){

		function modificado() {

			var valores = new Array("nombre_1", "nombre_2", "nombre_3", "nombre_4", "nombre_5", "nombre_6");

			for (var i in valores){

				var id = valores[i];

				if (id[id.length - 1] == this.value)

					document.getElementById(id).style.display = "block";

				else

					document.getElementById(id).style.display = "none";

};

		var combo = document.getElementsByTagName("select");

		for(var i=0;i<combo.length;i++)

			idCombo=combo[i].getAttribute("id");

			console.log(idCombo);

			combo[i].onchange = modificado;

</script>

<select name="" id="comobo1" >

	<option value="elija una opcion">elija una opcion</option>

	<option value="1">campo1</option>

	<option value="2">campo2</option>

	<option value="3">campo3</option>

</select>

<div id="nombre_1" style="display:none"> <input type="text" name="" id="" placeholder="input 1"/> </div>

<div id="nombre_2" style="display:none"> <input type="text" name="" id="" placeholder="input 2"/> </div>

<div id="nombre_3" style="display:none"> <input type="text" name="" id="" placeholder="input 3"/> </div>

<br/>

<hr>

<br/>

<select name="" id="comobo2" >

	<option value="elija una opcion">elija una opcion</option>

	<option value="4">campo4</option>

	<option value="5">campo5</option>

	<option value="6">campo6</option>

</select>

<div id="nombre_4" style="display:none"> <input type="text" name="" id="" placeholder="input 4"/> </div>

<div id="nombre_5" style="display:none"> <input type="text" name="" id="" placeholder="input 5"/> </div>

<div id="nombre_6" style="display:none"> <input type="text" name="" id="" placeholder="input 6"/> </div>

Comentanos si te sirve o si tienes alguna duda, ok?

Valora esta respuesta

Comentar

Varios ID en un mismo getElementById

Publicado por sam (106 intervenciones) el 02/06/2014 19:37:35

Expectacular me sirve claro que si, y lo entiendo que es casi lo mejor a parte de servirve.

Solo hay un pequeño fleco que no esta y es que por muchos select que hayan , siempre el ultimo al select al que se le selecciona una option para que aparezca su imput , este imput, despues, no desaparece , queda visible y no se oculta.

Con este codigo los imputs se ocultan con la elección de cada option del select siguiente.

Y claro esta, una vez que se selecciona el correspondiente option de un select , dicho option debería ocultarse.

Para ello he implementado este codigo, pero para variar como soy nuevo en java script , solo me funciona para un imput

y no para todos los inputs.

Una manita plis:

gracias como siempre.

<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {
setTimeout(function() {
$("#nombre_1, #nombre_2, #nombre_3, #nombre_4, #nombre_5, #nombre_6").fadeOut(1500);
},3000);
});

</script>

Valora esta respuesta

Comentar

Varios ID en un mismo getElementById

Publicado por sam (106 intervenciones) el 02/06/2014 21:45:30

xve, xve!!!! No hagas caso al anterior post que he puesto antes que este ultimo ya que ya ese esta equivocado.

Lo que vale es lo que digo en este ultimo.

Menos mal que me he dado cuenta ufffffff

Veras.

Lo cierto es que si, que me sirve y funciona a la perfeccion.

Pero el problema que tiene todavía es que los inputs que salen deben quedarse visibles y no desaparecer cuando

seleccionas la siguiente option del siguiente select.

Ya que tal como esta el codigo que me has retocado solo se queda visible el ultimo input.

Deben quedarse visibles todos los inputs asociados a cada option de cada select que hayan sido seleccionados.

Disculpa las molestias y la equivocacion anterior.

Espero pues a que me digas algo , un saludo maestro.

Valora esta respuesta

Comentar

Pos: 2

Val: 3.162

Varios ID en un mismo getElementById

Publicado por xve (2100 intervenciones) el 02/06/2014 21:56:29

Hola Sam, simplemente tienes que quitar el else que elimina el input...

Quita estas dos lineas:

else

    document.getElementById(id).style.display = "none";

Valora esta respuesta

Comentar

Varios ID en un mismo getElementById

Publicado por Sam (106 intervenciones) el 03/06/2014 08:49:16

Gracias lo primero por que contigo siempre aprendo (peloteo a parte :-))

Pero tengo una sensación agridulce, veras:

Andaba yo cantando victoria, quitando estas dos lineas.

Y efectivamente funciona.

Pero lo que pasa ahora es que cuando selecciono una option de un select, aparece el input en cuestion, si, pero cuando selecciono otra option del mismo select, en vez de desaparecer el input anterior me aparece un segundo input , osea dos inputs correspondientes a cada option del select.

y otra cosa si quisiera deselecionar una option y dejar por defecto el select en "elija una option" (osea sin seleccionar ninguna option), al haber quitado las dos lineas que me has comentado, ya no desaparecería el input de la opcion que hubiera sido elegida en ese momento.

:-(

Valora esta respuesta

Comentar

Pos: 2

Val: 3.162

Varios ID en un mismo getElementById

Publicado por xve (2100 intervenciones) el 03/06/2014 11:23:26

Ah, ok, te entiendo... perdona, te había entendido mal...

haber que tal este código:

<script>

	window.onload = function(){

		function modificado() {

			var id=this.getAttribute("id");

			esconder(id);

			var valores = new Array("nombre_1", "nombre_2", "nombre_3", "nombre_4", "nombre_5", "nombre_6");

			for (var i in valores){

				var id = valores[i];

				if (id[id.length - 1] == this.value)

					document.getElementById(id).style.display = "block";

};

		function esconder(clase)

			var divs = document.getElementsByClassName(clase);

			for(var i=0;i<divs.length;i++)

				divs[i].style.display="none";

		var combo = document.getElementsByTagName("select");

		for(var i=0;i<combo.length;i++)

			idCombo=combo[i].getAttribute("id");

			combo[i].onchange = modificado;

</script>

<style>

.combo1,.combo2 {display:none}

</style>

<select name="" id="combo1" >

	<option value="elija una opcion">elija una opcion</option>

	<option value="1">campo1</option>

	<option value="2">campo2</option>

	<option value="3">campo3</option>

</select>

<div id="nombre_1" class="combo1"> <input type="text" name="" id="" placeholder="input 1"/> </div>

<div id="nombre_2" class="combo1"> <input type="text" name="" id="" placeholder="input 2"/> </div>

<div id="nombre_3" class="combo1"> <input type="text" name="" id="" placeholder="input 3"/> </div>

<br/>

<hr>

<br/>

<select name="" id="combo2" >

	<option value="elija una opcion">elija una opcion</option>

	<option value="4">campo4</option>

	<option value="5">campo5</option>

	<option value="6">campo6</option>

</select>

<div id="nombre_4" class="combo2"> <input type="text" name="" id="" placeholder="input 4"/> </div>

<div id="nombre_5" class="combo2"> <input type="text" name="" id="" placeholder="input 5"/> </div>

<div id="nombre_6" class="combo2"> <input type="text" name="" id="" placeholder="input 6"/> </div>

Si hay algo que no entiendes, coméntame, ok?

Valora esta respuesta

Comentar

Varios ID en un mismo getElementById

Publicado por sam (106 intervenciones) el 03/06/2014 21:09:37

Al pelo, funciona perfecto xve.

Pero casi se me pasa algo por alto veras:

Si este codigo forma parte de un formulario osea los select, como van a llegar a su destino los datos mediante php

si el value de las options son numeros y no el texto que sea pertinente poner?

Y si no es mucho abusar, pregunto, a este codigo se le podria poner un fade in fade out para que quedase elegante?

Valora esta respuesta

Comentar

Pos: 2

Val: 3.162

Varios ID en un mismo getElementById

Publicado por xve (2100 intervenciones) el 04/06/2014 07:39:17

Hola Sam, si claro, llegaran los números... es mucho mejor que las letras, ya que si hay espacios, acentos, eñes, etc... te puede dar problemas.

Sobre lo que me comentas de fade, te refieres a utilizar jquery?

Valora esta respuesta

Comentar

Varios ID en un mismo getElementById

Publicado por sam (106 intervenciones) el 04/06/2014 08:47:44

Buenos dias xve, si lo digo por lo siguiente:

si el value son números, no dudo de que funcionar funciona, es evidente que el código funciona ya mejor que un reloj suizo.

pero me refería al hecho de hacer un select por ejemplo donde tenga que seleccionar el usuario el tipo de pizza que quiere ejem:

<select name="" id="combo1" >

<option value="elija una opcion">elija una pizza</option>
<option value="1">margarita</option>
<option value="2">bolognesa</option>
<option value="3">serrana</option>

</select>

como puedes ver, si el usuario selecciona una pizza por ejemplo margarita, php enviara como dato a recibir del formulario el valor "1", pero no la palabra "margarita"

así el que recibe el mensaje el email le diría:

el cliente Antonio quiere una 1.

en vez de:

el cliente Antonio quiere una margarita (que es lo mas entendible)

Respecto a si lo del fade me referia a jquery? , si claro

supongo que compartirás la idea que con un fade in y out es como el perejil de Arguiñano en las comidas, le da pedigrí y elegancia.

:-))

Valora esta respuesta

Comentar

Pos: 2

Val: 3.162

Varios ID en un mismo getElementById

Publicado por xve (2100 intervenciones) el 04/06/2014 15:04:38

En estos casos, y si utilizas PHP, lo suyo es que este en un array de valores para devolver el nombre de la pizza, pero siempre es mejor pasar como parámetro el numero. Algo así:

<?php

$combo1=array(1=>"campo1", "campo2", "campo3");

$combo2=array(4=>"campo4", "campo5", "campo6");

if(isset($_POST["combo1"]) && $_POST["combo1"]>0)

	echo "Has seleccionado: ".$combo1[$_POST["combo1"]];

?>

<script>

	window.onload = function(){

		function modificado() {

			var id=this.getAttribute("id");

			esconder(id);

			var valores = new Array("nombre_1", "nombre_2", "nombre_3", "nombre_4", "nombre_5", "nombre_6");

			for (var i in valores){

				var id = valores[i];

				if (id[id.length - 1] == this.value)

					document.getElementById(id).style.display = "block";

};

		function esconder(clase)

			var divs = document.getElementsByClassName(clase);

			for(var i=0;i<divs.length;i++)

				divs[i].style.display="none";

		var combo = document.getElementsByTagName("select");

		for(var i=0;i<combo.length;i++)

			idCombo=combo[i].getAttribute("id");

			combo[i].onchange = modificado;

</script>

<style>

.combo1,.combo2 {display:none}

</style>

<form action="<?php echo $_SERVER["PHP_SELF"]?>" method="POST">

	<select name="combo1" id="combo1" >

		<option value="0">elija una opcion</option>

		<?php

		foreach($combo1 as $key=>$value)

			echo "<option value='".$key."'>".$value."</option>";

?>

	</select>

	<div id="nombre_1" class="combo1"> <input type="text" name="" id="" placeholder="input 1"/> </div>

	<div id="nombre_2" class="combo1"> <input type="text" name="" id="" placeholder="input 2"/> </div>

	<div id="nombre_3" class="combo1"> <input type="text" name="" id="" placeholder="input 3"/> </div>

	<br/>

	<hr>

	<br/>

	<select name="combo2" id="combo2" >

		<option value="0">elija una opcion</option>

		<?php

		foreach($combo2 as $key=>$value)

			echo "<option value='".$key."'>".$value."</option>";

?>

	</select>

	<div id="nombre_4" class="combo2"> <input type="text" name="" id="" placeholder="input 4"/> </div>

	<div id="nombre_5" class="combo2"> <input type="text" name="" id="" placeholder="input 5"/> </div>

	<div id="nombre_6" class="combo2"> <input type="text" name="" id="" placeholder="input 6"/> </div>

	<p><input type="submit"></p>

</form>

Si llego a saber que querías utilizar jquery, el código de javascript se simplifica muchísimo!!!!

Valora esta respuesta

Comentar

Varios ID en un mismo getElementById

Publicado por sam (106 intervenciones) el 10/06/2014 21:07:49

Hola xve, disculpa que haya tardado tanto en contestar, estuve de viaje unos dias.

Acabo de ver el código que has hecho, y solo tengo palabras de agradecimiento hacia ti.

De mayor me gustaría saber tanto como tu. jejeej pero creo que todavía tengo que tomar muchos colacaos.

Valora esta respuesta

Comentar

problema con pestañas

Duda para incluir un html externo en un div