3

Mi pregunta es algo sencilla:

¿Es posible obtener un input por su id y su name?

Es decir, tengo dos inputs:

<input id="uno" name="a"/>

<input id="dos" name="a"/>

<input id="uno" name="b"/>

<input id="dos" name="b"/>

Pero quiero enviar un value al segundo input, solo a ese.

Yo se que un input debe tener un id, pero resulta que tengo un generador de formularios y puede suceder que el cliente en algún momento se le olvide cambiar el id del input y este se genera automáticamente, ocasionando que pueda repetirse.

6
  • Buen día, qué haz intentado hacer? Commented el 13 ene. 2023 a las 13:51
  • Tienes que añadir a tu pregunta lo que ha realizado hasta ahora a partir de allí te ayudaran, comparte tu html y js.
    – JoseMgz_Ux
    Commented el 13 ene. 2023 a las 13:52
  • al momento lo que he intentado es digamos, que obviamente es de formularios diferentes, pero digamos que en el formulario 5 se me repite el id, se envia el value a id del input anterior borrandome el dato anterior Commented el 13 ene. 2023 a las 13:55
  • 5
    El id debe ser único si o si, siempre, El id es un identificador del cliente, es decir se usa en el navegador y principalmente en javascript, aunque puedes obtener un elemento de otras maneras sin ocupar el id. El name se usa del lado del servidor, cuando se envían los datos en un formulario, puede repetirse si se usan en forma de array, ej: nombre[] con el sufijo [] para algunos servidores, en otros es necesario colocar el índice nombre[1]
    – Yussef
    Commented el 13 ene. 2023 a las 13:58
  • como dice @Yussef tienes un error de sintaxy en tu html ... no pueden existir elementos con id duplicados . Commented el 13 ene. 2023 a las 19:01

4 respuestas 4

1

Pues si estas usando JQuery como dice tu etiqueta es sencillo utilizando los selectores con los que cuenta $(""), solo debes usar lo siguiente:

Para obtener el input por el id:

const input = $('#id');

Para obtenerlo por la clase:

const input = $('.class');

Para obtenerlo mediante un atributo:

const input = $('input[attribute="value"]');

En tu caso para obtenerlo por dos atributos (id, nombre):

const input = $('input[id="idInput"][name="nombreInput"]');

Puedes ver más información sobre selectores para Jquery en https://api.jquery.com/category/selectors

Te dejo un ejemplo funcional:

function mostrarValor() {
  const inputUno = $('#uno');
  console.log('Input uno:', inputUno.val());

  const inputDos = $('input[id="dos"][name="a"]');
  console.log('Input dos:', inputDos.val());
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id="uno" name="a" /><br>
<input id="dos" name="a" /><br>

<button onclick='mostrarValor()'>Mostrar valores</button>

Pero como bien te dicen en los comentarios el id debe ser único, es muy mala práctica que pase lo que mencionas (que el mismo id pueda existir en varios componentes incluso cuando es generado automáticamente).

1
  • 1
    muchas gracias, muy amable Commented el 16 ene. 2023 a las 15:56
1

Con el método querySelector() puedes obtener múltiples atributos, en este caso obtendremos al id y al name del segundo input. De ésta forma tendremos únicamente al segundo input ya que es el único quien lleva ese id junto con ese name, sería de esta forma:

document.querySelector('input[id="dos"][name="a"]').value = "valor";
<input id="uno" name="a"/><br>
<input id="dos" name="a"/><br>
<input id="uno" name="b"/><br>
<input id="dos" name="b"/><br>

También, recuerda que Los id son los identificadores de cada uno de los elementos, éstos siempre van a ser únicos y no se deben repetir en más de un elemento, para ello podrías trabajar con clases, véase más aquí.

3
  • este metodo tambien me funciono, muchas gracias Commented el 16 ene. 2023 a las 15:57
  • Claro, es una solución que motiva la mala práctica (id duplicado). Commented el 17 ene. 2023 a las 6:43
  • @mauriCioContreras pero se lo estoy diciendo justo debajo en mi respuesta... Commented el 17 ene. 2023 a las 11:42
0

puede hacerlo asi:

//seleccionamos el input con name b y id dos
let input1 = document.querySelector("input[name='b']#dos");
console.log(input1);
// a lo inverso
let input2 = document.querySelector("input#dos[name='a']");
console.log(input2);
div #dos {
 border-color:blue;
 color:blue;
}

div#dos {
 border-color:red;
 color:red;
}
<input id="uno" name="a"/> <br>
<input id="dos" name="a"/> <br>
<input id="uno" name="b"/> <br>
<input id="dos" name="b"/> <br>

<div id="dos">padre <span id="dos"> hijo</span></div>
<div id="dos">padre <span id="dos"> hijo</span></div>

NOTA

para jquery solo es remplazar document.querySelector por $

si se coloca el selector todo junto sin espacio hace referencia al elemento actual ejemplo: rojo

si se agrega un espacio hace referencia los hijos ejemplo: azul

se ilustro con un css para mayor compresion

-2

puedes probar con

var valor = document.getElementById("id del input").value

asío recogeras el valor del input que tenga el mismo id que el que tu le escribes

si únicamente quieres el input para más adelante conseguir el valor o hacer otra cosa haces simplemente esta línea

document.getElementById("id del input")
1
  • esto no responde lo que el OP está solicitando. verifica nuevamente la duda que presenta el usuario. Commented el 13 ene. 2023 a las 18:15

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.