Como recorrer array donde todos los text se llaman id="caja[]"

[Ryan7777]

Buen Dia!

Genero dinamicamente text y al final todos tienen el mismo id por ejemplo nombrecaja[] asi con los corchetes para que la pagina luego en php me los recoja como array hasta aqui no hay problemas, el rollo es que antes de guardar deseo hacer un chequeo de cada text para enviar un mensaje en caso de que este vacio, he intentado lo siguiente suponiendo que son 10 text:

Código:

for (i=0; i<=10; i++){
	if(document.getElementById('caja['+i+']').value == ''){
		alert("Debe indicar el un valor");
		document.getElementById('caja['+i+']').focus();
		return false;
	}
}

Simplemente no funciona, no me capta el indice que le mando entre los corchetes lo he intentado de varios formas y nada.

De antemano gracias a la comunidad!

[El_Metallick]

pero si todos tienen el mismo id correspondiente a caja[] sin indice claramente no te los va a detectar como caja[1], caja[2], etc en javascript, de hecho creo que si lo haces así javascript no tomará los valores de todos porque se supone que el id es un identificador Único, luego el getElementById retorna un objeto no así el getElementsByName por ejemplo que retorna un arreglo, dado que distintos elementos de la página pueden tener el mismo nombre.

Ahora una aclaración, cuando analices el formulario en php si tienes varios campos con el mismo valor de NAME los agrupa en arrays no los que tengan el mismo valor de ID. Luego puedes al momento de generar los campos de texto ponerles

Código PHP:

<?php
for($i=0;i<10;i++) {
?>
    <input type="text" id="caja<?= $i ?>" name="caja" />
<?php
}
?>
 

de este modo el código javascript que pusiste debería funcionar y php debería agrupartelos en un array.

Saludos

[Ryan7777]

Según lo que sugieres por el name javascript si agarraría el array de objetos text, entonces en vez de getElementById en la función puse getElementByName pero igual no funciona, parece que el javascript no es capaz de interpretar un array de objetos text con el mismo nombre, en este caso name="caja[]"

[caricatos]

Iniciado por Ryan7777

Según lo que sugieres por el name javascript si agarraría el array de objetos text, entonces en vez de getElementById en la función puse getElementByName pero igual no funciona, parece que el javascript no es capaz de interpretar un array de objetos text con el mismo nombre, en este caso name="caja[]"

Eso no es cierto... para controles con name="caja[]", debes usar la sintaxis de corchetes:

document.forms.elform["caja[]"].length...

Fíjate que el atributo name no es más que una cadena...

Saludos

[El_Metallick]

Iniciado por Ryan7777

Según lo que sugieres por el name javascript si agarraría el array de objetos text, entonces en vez de getElementById en la función puse getElementByName pero igual no funciona, parece que el javascript no es capaz de interpretar un array de objetos text con el mismo nombre, en este caso name="caja[]"

claro porque no es getElementByName, porque precisamente como da un arreglo es prural no singular, es decir, getElementsByName. Ahora reitero, devuelve un arreglo luego debes poner algo de la forma

var a = document.getElementsByName('campo')[0].value;

y no

var a = document.getElementsByName('campo').value;

Saludos

[Ryan7777]

Amigos no funciona, vamos a olvidarnos de el primer código, intenten con este simple y verán que no da, al pulsar el botón debería mandar un mensaje con el valor que se introduzca en la primera caja.

Código:

<input type="text" name="campo[]" id="campo1" />
<input type="text" name="campo[]" id="campo2" />
<input type="button" name="aceptar" id="aceptar" value="Aceptar" onclick="alert(document.getElementsByName('campo')[0].value);"/>
----

Fijate Metallick que lo coloque como tu indicas.

[El_Metallick]

Iniciado por Ryan7777

Amigos no funciona, vamos a olvidarnos de el primer código, intenten con este simple y verán que no da, al pulsar el botón debería mandar un mensaje con el valor que se introduzca en la primera caja.

Código:

<input type="text" name="campo[]" id="campo1" />
<input type="text" name="campo[]" id="campo2" />
<input type="button" name="aceptar" id="aceptar" value="Aceptar" onclick="alert(document.getElementsByName('campo')[0].value);"/>
----

Fijate Metallick que lo coloque como tu indicas.

Si porque le pones name="campo[]" y cuando quieres rescatarlo en javascript le pones "campo"

prueba cambiando

alert(document.getElementsByName('campo')[0].value);

por

alert(document.getElementsByName('campo[]')[0].value);

Saludos

[Ryan7777]

Tengo que decir que el amigo Metallick ha tenido razón desde siempre acabo de probar y resulta, esta tontería me tenia parado el proyecto que lo llevo bastante bien, jamas había preguntado en el foro desde hace como 7 años que lo leo ya que soy de los que busco y busco hasta el final pero estaba cansado y procedí a preguntar, seguramente esto debe ser una pregunta tonta al que sabe bastante javascript, en fin muchísimas gracias!!!!

[El_Metallick]

de nada para eso estamos ;) yo he preguntado mucho en este foro ahora me toca devolverle la mano a la comunidad :P

Saludos

[chavetero]

¿Y cómo sería para llevar el foco al primer elemento de ese checkbox?