¿Cómo contar input type="text"?

[de-troit]

Hola foreros, quién sabe cómo contar con JS la cantidad de elementos input de tipo texto (input type="text") que tiene mi elemento body?

Cómo puedo acceder a ellos como un Array por un índice ya sea numérico (orden creación) o por algún indice de texto?

Ojalá me puedan ayudar, saludos!

[guallox]

lo de contar la cantidad de elementos input que hay en tu body no se como se haría, pero lo otro, si he entendido bien puede ser creando un array en el que identifiques los input type text
mediante document.getElementById('input1')
no sé si me entiendes...lo que pasa es que tambien necesito que me digas para qué necesitas acceder a ellos (asignarles algún valor....)

[zerokilled]

puedes usar la funcion getElementsByTagName para que te devuelva todos los inputs. el unico problema es que dicha funcion no discrimina por tipo. de todos modos puedes partir de ahi para contar los inputs. solo tienes que iterar la coleccion devuelta por la funcion e ir verificando el tipo de input.

[de-troit]

Iniciado por zerokilled

solo tienes que iterar la coleccion devuelta por la funcion e ir verificando el tipo de input.

Si obtengo todos los objetos "Input" con la función: getElementsByTagName('input'); Cómo puedo verificar el tipo de input dentro de una estructura bucle?

Iniciado por guallox

lo que pasa es que tambien necesito que me digas para qué necesitas acceder a ellos (asignarles algún valor....)

Para implementar un método en JS que llene los input type=text con los datos extraídos de una Base de datos (las variables las paso de PHP a JS). El caso específico es para editar un registro, quiero que los datos actuales se carguen en los input type=text para poder editar su contenido y enviarlo de vuelta a la BD (de igual forma en que se edita un registro en phpMyAdmin, justamente es algo como esto lo que quiero lograr).

Quiero implementar una función que sea válida para cualquier tipo de formulario (depende de la tabla que quiera modificar, por el distinto número de campos que tiene cada una, en consencuencia, distinta cantidad de input type=text en el form).

Tengo un array en JS al que le llamo "fetch_assoc", el cual es una copia del array devuelvo en PHP por la función "mysql_fetch_assoc()". Entonces como dije, hay que tener en cuenta que habrán tantos input type=text como índices del array fetch_assoc (largo - length del array, valores de los campos de consulta SQL), entonces lo que quiero es indicar en el código algo como esto: (para que entiendan la idea)

Código Javascript:

//mi función para poner los valores al input type=text:
 
var poner = function() {
     var fetch_assoc = ['dato1', 'dato2', 'dato3']; //array que paso de PHP a JS
 
     var inputElms = document.getElementsByTagName('input'); /obtengo todos los objs input
 
     for(var i in fetch_assoc) {
          //pongo los valores de fetch_array en input type=text, donde se corresponden los índices.
          (aqui inputElms tipo text)[i].value = fetch_assoc[i];
     }
}
 

Entonces de esta manera, pongo los datos extraídos de la BD en los input type=text. Ahora, quiero hacer la diferencia entre un input en general y un input type=text porque antes tengo creado unos input de otro tipo en el documento, por lo que es estrictamente necesario hacer esta diferencia.

Se entiende la idea? El código es sólo para que entiendan la idea, sé que es erróneo. Ojalá me puedan ayudar. Saludos! :D

[_cronos2]

Prueba con:

Código Javascript:

if(elInput.type=='text'){
 alert('input type="text"');
}
 

Saludos (:

[de-troit]

Gracias _cronos2, eso realmente funciona! Muchas gracias! :D

SOLUCIONADO!

[zerokilled]

bien, se entiende la idea que tienes pensado. como sugerencia, yo tu buscaría la forma de asignar esos valores en php. es decir, a la vez que vas creando los inputs text también asignas el valor. si lo quieres hacer por javascrit, me temo que te complicaras más aún. en fin, todo depende las posibles formas para identificar esos inputs text. en gran parte ese detalle se determina según la estructura del documento o que identificadores disponible tiene los inputs. un ejemplo de estructura, supongamos que todos los inputs text en que quieres agregar los valores estan contenido en un elemento ancestro común pero que es distinto al resto de los inputs text -o de cualquier otro tipo- que no deseas tocar. en ese caso, puedes tomar los inputs text con la funcion getElementsByTagName invocandolo desde ese elemento ancestro común. fijate en este ejemplo, dentro de div#grupo solo existen los inputs que deseas capturar. es decir, no contiene ningun otro tipo de input.

Código:

<div>
<input type="text" ... /> text...
<input type="text" ... /> text...
<input type="text" ... /> text...
<input type="radio" ... /> text...
<input type="hidden" ... /> text...
<input type="text" ... /> text...
<input type="password" ... /> text...
</div>

<div id="grupo">
<input type="text" ... /> text...
<input type="text" ... /> text...
<input type="text" ... /> text...
<input type="text" ... /> text...
</div>
 

// asumiendo que quieres capturar los inputs contenido en div#grupo
var inputs = document.getElementById("grupo").getElementsByTagName("input"); // inputs contiene la coleccion

si la estructura es variada o más compleja, es decir algo parecido como en el primer <div>, donde hay mezcla de diferentes tipos inputs o siendo del mismo tipo pero no deseas capturar algunos en específico, tendria que aplicarle a esos elementos algún tipo de identificacion. probablemente name no lo puedas utilizar porque ya lo tengas reservado para el envio de datos. pero si te sirve name, entonces utilizas la función getElementsByName. si no te sirve name, tendrias que agregarle una clase a los elementos que deseas capturar al momento de crearlos. luego con getElementsByClassName obtienes los inputs. sin embargo, el problema con esta función es que no existe en todos los navegadores -al menos en iexplorer8 y anteriores no existe-. de todos modos, es facil de crear una funcion similar para iexplorer. busca por la web, hay varios ejemplos de códigos.

[de-troit]

Gracias zerokilled, te explico algo del funcionamiento de lo que estoy implementanto para que entiendas. Bueno, el documento PHP (el form) tiene todos los elementos creados, ya que un par tablas de los registros que necesito editar comparten varias cosas en común (y así voy creando la base de los documentos para las tablas que comparten una estructura en común), entonces así tengo el documento listo y le asigno un ID a todos los elementos dinámicos, para así, poder añadirles el contenido dependiendo de los resultados de las condiciones implementadas, es por eso que tengo que hacerlo en JavaScript (cabe mencionar que el form se abre como popup con window.open(parámetros)), entonces así me ahorro de estar generando el formulario desde cero en el documento PHP y asignándoles el valor ahí, entonces lo que hago es pasar de la ventana principal (padre) algunas variables por medio del link a la ventana hija popup, la que hace la consulta a la base de datos y devuelve las variables en php desde el server, las cuáles paso al documento en el cliente dentro del código JavaScript y de esta manera, completa esos elementos dinámicos. Entonces no puedo asignarles los valores por PHP porque necesito para eso, estar en el lado del servidor, pero en esos momentos estaré con el documento base listo en el cliente, esperando las respuestas del server.

Y bueno, como siempre van a ver n cantidad de input type=text, y un array de largo n, entonces la función JS para añadir los atributos, sea la tabla que sea, va a funcionar igual.

Ahora con respecto a poner los input type=text dentro de un div#id, tienes toda la razón hahaha, no pensé en hacerlo de esa forma (pff, no sé como no se me ocurrió), pero es mejor así, me ahorro estar comprobando la condición y mi margen de 'catch' de los objetos deseados, se reduce a un grupo específico (que por lo demás se traduce en una mejor marca de tiempo en ejecución). Excelente, modificaré el documento para hacerlo de esta manera, te pasaste por el inmenso post hahaha, muchas gracias nuevamente. Saludos!

(Disculpa por el orden no lógico de las explicaciones, es que edité el post e hice algo raro :P)