2

¿Como puedo traer el valor ingresado de varios inputs que tienen un mismo id con javascript?

const valores = documento.getElementById(id);' 

console.log(valores);
<input type="text" id="valor"/>
    
<input type="text" id="valor"/> 
    
<input type="text" id="valor"/>
       
2
  • Por favor, aclara tu problema específico o proporciona detalles adicionales para resaltar exactamente lo que necesitas. Tal como está escrito, es difícil saber exactamente qué estás preguntando.
    – Comunidad Bot
    Commented el 9 may. 2023 a las 23:24
  • 1
    El id representa que es un identificador único, que mas de un elemento tenga el mismo id es un error de por si. Usa classes. Commented el 10 may. 2023 a las 0:04

2 respuestas 2

0

Tal vez esto te pueda ayudar con este ejemplo.

Nada más le añadí un button para enviar los valores a una función y obtener los valores de los input.

function getValues() {
  var inputs = document.querySelectorAll('#valor');
  for (var i = 0; i < inputs.length; i++) {
    var value = inputs[i].value;
    console.log(value);
  }
}
<input type="text" id="valor"/>
<br><br>
<input type="text" id="valor"/> 
<br><br>
<input type="text" id="valor"/>
<br><br>
<button onclick="getValues()">Obtener valores</button>

2
  • Gracias por la respuesta. Igual me sirve, pero la mezcla de código que tengo que hacer es una mezclar entre DOM, node y tiene que guardarse cada input en la colección del elemento padre. Commented el 10 may. 2023 a las 0:36
  • Hola Alexis, pues tampoco es que nos diste mucha información en tu pregunta, te recomiendo que la edites y la detalles lo más claro posible.
    – Luis
    Commented el 10 may. 2023 a las 0:40
0

Aunque existen formas de accederlos, mi respuesta no es cómo lograrlo sino:

No le pongas el mismo ID a distintos elementos dentro del HTML.

El id debe ser único

Según la documentación del atributo id de las etiquetas HTML:

The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).

The id attribute is most used to point to a style in a style sheet, and by JavaScript (via the HTML DOM) to manipulate the element with the specific id.

El resaltado es mío y mi traducción libre sería:

El atributo id especifica un identificador único para un elemento HTML (el valor debe ser único dentro del documento HTML).

El atributo id es utilizado principalmente para apuntar un estilo en una hoja de estilos y en JavaScript (a través del DOM HTML) para manipular el elemento con un id específico.

Tener elementos con ID's duplicados, triplicados, etc. invalida tu HTML y cualquier herramienta de validación te va a decir que un documento es inválido si repites elementos con un mismo id, por ejemplo el servicio de validación HTML de la w3c

Esta es la razón por la cual el método getElementById() devuelve un único elemento (generalmente el primero que encuentra en el DOM) y no un arreglo de elementos, como explica su documentación:

The getElementById() method of the Document interface returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.

El resaltado es mío y mi traducción libre sería:

El método getElementById() de la interface Document retorna un objeto Element que representa el elemento cuya propiedad id coincide con la cadena especificada. Dado que los IDs de los elementos tienen que ser únicos, si se especifican, resultan una vía útil para obtener acceso rápido a un elemento específico.

La solución real a tu problema es poner ID's únicos a los distintos elementos, por ejemplo:

function getValues() {
  console.log(document.getElementById("valor1").value);
  console.log(document.getElementById("valor2").value);
  console.log(document.getElementById("valor3").value);
}
<label for="valor1">Valor1</label>&nbsp;<input type="text" id="valor1" value="a"/><br>
<label for="valor2">Valor2</label>&nbsp;<input type="text" id="valor2"  value="b"/><br>
<label for="valor3">Valor3</label>&nbsp;<input type="text" id="valor3" value="c"/><br><br>
<button onclick="getValues()">Obtener valores</button>

El ejemplo está en un snippet para que puedas probarlo aquí mismo en el navegador haciendo clic en Ejecutar.

5
  • Gracias por la respuesta, pero como podría guardar todos los id diferentes en una variable o en un node? Commented el 10 may. 2023 a las 0:33
  • No hay nada en la pregunta sobre esto que agregas ahora, por lo que considero que está respondida. Por otro lado, puedes guardar todos los id's diferentes en una variable tipo arreglo, pero ¿por qué querrías guardar todos los id's diferentes en una única variable? ¿qué es un node?
    – jachguate
    Commented el 10 may. 2023 a las 1:37
  • Claro va orientado a un node, que recupera el valor ingresado de esos id. solo que no encuentro mucha informacion respecto a ese tema. sobre como traer multiples inputs ingresados y almacenarlo en el node con su id, class o name correspondiente . Commented el 10 may. 2023 a las 1:54
  • Esta pregunta, según sus etiquetas era sobre HTML y javascript, que se ejecutan del lado del cliente. Lo que yo respondí es correcto y cierto para esto y, en mi opinión, el tema queda cerrado allí. Sugiero que publiques una nueva pregunta. Asumiendo que hablas de node.js, podría ser cómo llevar información del cliente al servidor. Ahora si hablas de un nodo de alguna estructura, explicar que tipo de estructura y qué pretendes lograr con ella.
    – jachguate
    Commented el 10 may. 2023 a las 2:05
  • Realmente es bien difícil responder estas preguntas en comentarios sin un contexto adecuado. Por eso recomendaría que prepares un ejemplo mínimo verificable y expliques que quieres lograr y el error/problema que haya con tu código en esa nueva pregunta que publiques.
    – jachguate
    Commented el 10 may. 2023 a las 2:06

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.