0

Me gustaría saber que puedo hacer para que los input radio funcione con su respectivo input text, ya que los 4 botones interactuan con un mismo input text y me causa conflicto a la hora de realizar un formulario mas grande. Espero y puedan ayudarme y gracias de antemano.

//esperamos a que cargue el DOM
document.addEventListener('DOMContentLoaded', function() {


  //seleccionamos los inputs tipo radio, recuerda que 
  //esto te trae un HTMLCollections, así que lo tienes que recorrer con un for
  let inputs = document.querySelectorAll('input[type="radio"]');

  //console.log(inputs[0]);

  //cremos el for
  for (let i = 0; i < inputs.length; i++)
    //le agregamos a cada iteración un addEventListener de tipo change
    //como su nombre lo indica al momento de cambiar de input tomará su valor
    inputs[i].addEventListener('change', function() {
      //Validamos que ese input tenga el atributo checked
      if (this.checked) {
        //si es así obtenemos su valor y lo agregamos al input.
        document.getElementById("rInput").value = this.value;
      }
    })
})
<head>
  <meta charset="utf-8">
  <title>javascript - Obtain the value of a radio button</title>


</head>

<body>
  <h1>Obtain the value of a radio button</h1>
  <form id="form1">
    <p>Deacuerdo: Si<input type="radio" name="deacuerdo" value="si"> No<input type="radio" name="deacuerdo" value="no"></p>

    <div id="resultado"><input id="rInput" type="text"></div>
    <p>Enterado: Si se<input type="radio" name="enterado" value="si se"> No se<input type="radio" name="enterado" value="no se"></p>

    <div id="resultados"><input id="eInput" type="text"></div>
  </form>
</body>

</html>

2 respuestas 2

1

Te dejo comentado la parte del código que agregué y también hice modificaciones a tu HTML, lo que hice fue guardar los primeros dos radios y el input text correspondiente en un div y en el otro caso igual, para saber en que div se encuentra el input text al que le quiero agregar el valor de su radio, espero te sirva, cualquier duda hazla saber.

//esperamos a que cargue el DOM
document.addEventListener('DOMContentLoaded', function() {


  //seleccionamos los inputs tipo radio, recuerda que 
  //esto te trae un HTMLCollections, así que lo tienes que recorrer con un for
  let inputs = document.querySelectorAll('input[type="radio"]');

  //console.log(inputs[0]);

  //cremos el for
  for (let i = 0; i < inputs.length; i++)
    //le agregamos a cada iteración un addEventListener de tipo change
    //como su nombre lo indica al momento de cambiar de input tomará su valor
    inputs[i].addEventListener('change', function() {
      //Validamos que ese input tenga el atributo checked
      if (this.checked) {
      
      console.log(this.value);
      //Con parentNode recorremos el arbol de un nodo hijo a el padre, 
      //en este caso hay que recorrerlo dos veces 
      //ya que si lo hacemos una vez seleccionamos el <p></p> 
      //y nosotros necesitamos saber qué div se encuentra tanto 
      //el radio seleccionado como el input text
      let divPadre = this.parentNode.parentNode.id;
      
      //utilizando strings literals concatenamos la variable divPadre 
      //la cuál contiene "div1" o "div2" y mediante querySelectorAll 
      //buscamos el input que está dentro del div especificado y le agregamos su valor.
      document.querySelectorAll(`#${divPadre} input[type="text"]`)[0].value = this.value;
      
        //si es así obtenemos su valor y lo agregamos al input.
        //document.getElementById("rInput").value = this.value;
      }
    })
})
<html>
<head>
  <meta charset="utf-8">
  <title>javascript - Obtain the value of a radio button</title>


</head>

<body>
  <h1>Obtain the value of a radio button</h1>
  <form id="form1">
  <div id="div1">
    <p>Deacuerdo: Si<input type="radio" name="deacuerdo" value="si"> No<input type="radio" name="deacuerdo" value="no"></p>

   <input id="rInput" type="text"></div>
    <div id="div2">
    <p>Enterado: Si se<input type="radio" name="enterado" value="si se"> No se<input type="radio" name="enterado" value="no se"></p>

    <input id="eInput" type="text"></div>
  </form>
</body>

</html>

1

Amigo, corrigiendo tu código solo falta agregar en la condición if el name, para diferenciarlos uno de otro y así, escribir su value en el textbox correspondiente.

Añado ejemplo

//esperamos a que cargue el DOM
document.addEventListener('DOMContentLoaded', function() {


  //seleccionamos los inputs tipo radio, recuerda que 
  //esto te trae un HTMLCollections, así que lo tienes que recorrer con un for
  let inputs = document.querySelectorAll('input[type="radio"]');

  //console.log(inputs[0]);

  //cremos el for
  for (let i = 0; i < inputs.length; i++)
    //le agregamos a cada iteración un addEventListener de tipo change
    //como su nombre lo indica al momento de cambiar de input tomará su valor
    inputs[i].addEventListener('change', function() {
      //Validamos que ese input tenga el atributo checked
      if (this.checked && this.name =="deacuerdo") {
        //si es así obtenemos su valor y lo agregamos al input.
        document.getElementById("rInput").value = this.value;
      }else{
        document.getElementById("eInput").value = this.value;
      }
    })
})
<head>
  <meta charset="utf-8">
  <title>javascript - Obtain the value of a radio button</title>


</head>

<body>
  <h1>Obtain the value of a radio button</h1>
  <form id="form1">
    <p>Deacuerdo: Si<input type="radio" name="deacuerdo" value="si"> No<input type="radio" name="deacuerdo" value="no"></p>

    <div id="resultado"><input id="rInput" type="text"></div>
    <p>Enterado: Si se<input type="radio" name="enterado" value="si se"> No se<input type="radio" name="enterado" value="no se"></p>

    <div id="resultados"><input id="eInput" type="text"></div>
  </form>
</body>

3
  • En caso de querer hacer una tercera opción, se tiene que agregar otro else o como sería?
    – msiul
    el 26 nov. 2019 a las 17:29
  • Una tercera opción modificaría un poco el código y como dices, se podría agregar otro else que defina otro nombre, existen varios métodos para detectar cambios, lo mas eficiente es si es que tienes muchas opciones, realizar la detección de forma independiente por cada grupo checkbox. Este ejemplo fue para tu caso particular de solo 2 opciones. PD: Si te sirve la respuesta, no olvides marcarla como correcta con el tick verde bajo los votos de la respuesta.
    – harifo
    el 26 nov. 2019 a las 17:34
  • Amigo, recuerda marcar la solución si resolvió tu problema, ya que tu duda puede ser la duda de alguien más.
    – harifo
    el 27 nov. 2019 a las 11:28

Tu Respuesta

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

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