getElementById o getElementByName, como recoger varios elementos?

IMAC/ · #1 (**permalink**) 21/06/2009, 13:45

Buenas

Digamos que tengo 10 elementos tipo botón radio.
Todos con el mismo atributo name y el mismo id (ya se que el id debe de ser único, pero como no me funcionaba con el getElementByName...)

Bueno, la cuestión es que no se como recogerlos todos y acceder luego al array de elementos.
Yo intento esto:

Código HTML:

	var radios = document.getElementById('destino');
	for (var a=0; a<radios.length; a++){
		radios[a].disabled= true;
	}

Pero no me tira.
He comprobado que me funciona con el primer elemento si hago:

Código HTML:

	var radios = document.getElementById('destino');
	radios.disabled= true;

Gracias de antemano.

zerokilled · #2 (**permalink**) 21/06/2009, 15:35

simplemente lee la referencia a traves del formulario y luego el nombre de los radios. es decir, objeto form.nombre_radio. si existe mas de un elemento con el mismo nombre, javascript devuelve una coleccion de elementos.

Código:

<form name='miForm'>
<input type="radio" name="vote" /> ...<br />
<input type="radio" name="vote" /> ...<br />
<input type="radio" name="vote" /> ...<br />
<input type="radio" name="vote" /> ...<br />
</form>

// javascript:
alert(document.miForm.vote.length); // muestra 4;

Legoltaz · #3 (**permalink**) 22/06/2009, 01:33

Es getElementsByName().

Kwarwer · #4 (**permalink**) 22/06/2009, 02:59

No sería getElementsByClassName() ??

El ID teóricamente es sólo para 1 elemento, la clase para varios.

crujikoki · #5 (**permalink**) 22/06/2009, 03:15

Como dice Legoltaz es getElementsByName().

Aquí tienes un ejemplo extraido de W3Schools:

Código PHP:

  <html>

<head>

<script type="text/javascript">

function getElements()

  {

  var x=document.getElementsByName("myInput");

  alert(x.length);

  }

</script>

</head>

<body>

 
<input name="myInput" type="text" size="20" /><br />

<input name="myInput" type="text" size="20" /><br />

<input name="myInput" type="text" size="20" /><br />

<br />

<input type="button" onclick="getElements()"

value="How many elements named 'myInput'?" />

 
</body>

</html>

Como puedes ver, en la variable x tienes todos los elementos que tienen por nombre myInput. Así de esta manera puedes poner un ID diferente a cada uno de ellos.

Hemos resuelto tu duda?

IMAC/ · #6 (**permalink**) 22/06/2009, 05:26

Cita:

Iniciado por crujikoki

Hemos resuelto tu duda?

Nop :)

Tengo algo así:

Código HTML:

function unable(nombre){
	var radios = document.prueba.destino.length;
	
	for (var a=0; a<document.prueba.destino.length; a++){
		radios[a].disabled= true;
	}
}

Y la cuestión es que por lo visto no funciona lo de "radios[a].disabled
Es decir, que se el número de variables con el mismo nombre pero no se acceder a ellas para trabajar con ellas.

¿como se haría?

Gracias.

zerokilled · #7 (**permalink**) 22/06/2009, 10:12

en tu funcion tienes que quitar la propiedad length para poder guardar la coleccion en la variable radios:

Código:

<script type="text/javascript">
function unable(){
var radios = document.prueba.age; //.length; 
var disabled = !radios[0].disabled;	
	for (var a=0; a<document.prueba.age.length; a++){
		radios[a].disabled = disabled;
	}
}
</script>
<form name="prueba">
<p>nombre: <input type="text" name="_name" /></p>
<p>edad:<br />
12-15 <input type="radio" name="age" value="1215" />
16-18 <input type="radio" name="age" value="1618" />
19-23 <input type="radio" name="age" value="1923" />
24-30 <input type="radio" name="age" value="2430" /></p>
<p><input type="button" value="Unable" onclick="unable();" /></p>
</form>

pato12 · #8 (**permalink**) 22/06/2009, 11:59

Cita:

Iniciado por Kwarwer

No sería getElementsByClassName() ??

El ID teóricamente es sólo para 1 elemento, la clase para varios.

La funcion getElementsByClassName no existe (pero creo que en Firefox anda

). Hay que crearla, no es dificil.

crujikoki · #9 (**permalink**) 23/06/2009, 01:49

Hola,

IMAC/, con lo que te ha dicho zerokilled ahora si que creo tendrías que tener la duda resuelta. Todo y que con lo que te comenté yo tambíen tendrías que haberla tenido resuelta. Solo investigando un pelin más hubieras dado con la solución...

No obstante, si algo no ha quedado claro pues vuelve a postear que te contestaremos encantados.

Saludos!

IMAC/ · #10 (**permalink**) 23/06/2009, 02:14

Cita:

Iniciado por crujikoki

Hola,

IMAC/, con lo que te ha dicho zerokilled ahora si que creo tendrías que tener la duda resuelta. Todo y que con lo que te comenté yo tambíen tendrías que haberla tenido resuelta. Solo investigando un pelin más hubieras dado con la solución...

No obstante, si algo no ha quedado claro pues vuelve a postear que te contestaremos encantados.

Saludos!

Efecctivamente ya solventé mi duda, pero me surge otra relacionada.

Finalmente me quedó así:

Código HTML:

function unable(){
	var radios = document.prueba.destino;
	var disabled = !radios[0].disabled;
	for (var a=0; a<document.prueba.destino.length; a++){
		radios[a].disabled= true;
	}
}

El nombre "destino" es el name de los objetos tipo radio que voy a deshabilitar.
¿cómo puedo pasar ese nombre por parámetro?
Lo he intentado de varios modos en las llamadas y en la definición de la función
unable(destino), unable('destino') para las llamadas
Y con la función tal que así:

Código HTML:

function unable(nombre){
	var radios = document.prueba.nombre;
	var disabled = !radios[0].disabled;
	for (var a=0; a<document.prueba.nombre.length; a++){
		radios[a].disabled= true;
	}
}

Pero no se que puede estar fallando, que no me funciona si lo hago de ese modo.

¿alguna sugerencia?

Saludos y gracias.

Kwarwer · #11 (**permalink**) 23/06/2009, 02:50

Cita:

Iniciado por pato12

La funcion getElementsByClassName no existe (pero creo que en Firefox anda

). Hay que crearla, no es dificil.

Y aquí es donde se nota qué navegador es el que uso

.

Gracias por aclararlo

crujikoki · #12 (**permalink**) 23/06/2009, 06:40

Hola,

A ver, esto es una opción, pero creo que se puede mejorar.

Código PHP:

  <html> 

<head> 

<script type="text/javascript">

function unable(nombre){

    var radios = document.getElementsByName(nombre);

    var desabilitado = !radios[0].disabled;

    for (var a=0; a<radios.length; a++){

        radios[a].disabled= desabilitado;

    }

}

</script>

</head> 

<body> 

<form name="prueba">

<p>nombre: <input type="text" name="_name" /></p>

<p>edad:<br />

12-15 <input type="radio" name="destino" value="1215" />

16-18 <input type="radio" name="destino" value="1618" />

19-23 <input type="radio" name="destino" value="1923" />

24-30 <input type="radio" name="destino" value="2430" /></p>

<p><input type="button" value="Unable" onclick="unable('destino');" /></p>

</form>

</body> 

</html>

Lo que obtienes con eso esque cada vez que le des al botón cambia el estado.

Si solo quieres que deshabilite y nada más debes cambiar el script:

Código PHP:

  <script type="text/javascript">

function unable(nombre){

    var radios = document.getElementsByName(nombre);

    for (var a=0; a<radios.length; a++){

        radios[a].disabled= true;

    }

}

</script>

Y creo que nada más. Como siempre, si algo no queda claro postea!

aika · #13 (**permalink**) 01/11/2010, 12:34

Purueba esta función que ataca a todos los elementos tipo input del formulario y ponle un if si quieres excluir algunos:

Código HTML:

function desactiva_camps(valor) {
  if (valor != '1') {
    var i, e = document.getElementsByTagName('input');
    for (i = 0; i < e.length; ++i) {
      if (e[i].name!='enviar' && e[i].name!='tancar') 
        e[i].disabled=true;
    }
  }
}

Código HTML:

<form .....>
  <input name= ... >
  <input name= ... >

  <input type="reset" name="tancar" value=" tancar " onClick="window.close();">
  <script>desactiva_camps('5');</script>
</form>

---
Hay otros mundos, pero están en este
http://relatividad.atspace.com