0

Nessa página HTML eu defini alguns itens

/**
 * Botão Submit
 */
document.getElementById("btnSubmit").onclick = function() {
  var radios = document.getElementsByName("band-rock");
  for (var i = 0; i < radios.length; i++) {
    if (radios[i].checked) {
      alert("Escolheu: " + radios[i].value);
      //var nome = +radios[i].value.InnerHTML; 
      //console.log("Escolheu: " + radios[i].value);

    }
  }
};


/**
 * Botão Load
 */
document.getElementById("btnLoad").onclick = function() {
  var radios = document.getElementsByName("band-rock");

  for (var i = 0; i < radios.length; i++) {
    if (radios[i].value === "The Beatles") {
      radios[i].checked = true;
    }
  }
};
<form action="form-action.php" method="post">
  <p>
    <input type="radio" name="band-rock" value="Beatles" />The Beatles
    <input type="radio" name="band-rock" value="Led Zeppelin" /> Led Zeppelin
    <input type="radio" name="band-rock" value="Pink Floyd" />Pink Floyd
    <input type="radio" name="band-rock" value="Black Sabbath" />Black Sabbath
  </p>
  <p>
    <input type="button" id="btnSubmit" value="Submit me!" />
    <input type="button" id="btnLoad" value="Load!" />
  </p>
  <p>
    <input type="text" id="texto" name="band-rock" value="" disabled/>
  </p>
</form>

Como faço para que ao invés de retornar no alert eu retorne no campo input???

2 Respostas 2

1

Exatamente assim:

/**
 * Botão Submit
 */
document.getElementById("btnSubmit").onclick = function() {
  var radios = document.getElementsByName("band-rock");
  for (var i = 0; i < radios.length; i++) {
    if (radios[i].checked) {
      //alert("Escolheu: " + radios[i].value);
      //var nome = +radios[i].value.InnerHTML; 
      //console.log("Escolheu: " + radios[i].value);
      // ##### AQUI O QUE VOCÊ PERGUNTOU #####
      document.getElementById('texto').value = radios[i].value;
     // ##### RESPOSTA ACIMA #####
    }
  }
};


/**
 * Botão Load
 */
document.getElementById("btnLoad").onclick = function() {
  var radios = document.getElementsByName("band-rock");

  for (var i = 0; i < radios.length; i++) {
    if (radios[i].value === "The Beatles") {
      radios[i].checked = true;
    }
  }
};
<form action="form-action.php" method="post">
  <p>
    <input type="radio" name="band-rock" value="Beatles" />The Beatles
    <input type="radio" name="band-rock" value="Led Zeppelin" /> Led Zeppelin
    <input type="radio" name="band-rock" value="Pink Floyd" />Pink Floyd
    <input type="radio" name="band-rock" value="Black Sabbath" />Black Sabbath
  </p>
  <p>
    <input type="button" id="btnSubmit" value="Submit me!" />
    <input type="button" id="btnLoad" value="Load!" />
  </p>
  <p>
    <input type="text" id="texto" name="band-rock" value="" disabled/>
  </p>
</form>

1
  • 1
    Opa, fiz teste e funcionou. Commented 31/05/2019 às 14:02
1

Thiago, fiz algumas alterações no seu código HTML, adicionando tags label relacionadas aos radios para melhorar a usabilidade (atributo For da label com valor igual ao atributo Id do radio). Alterei o valor do radio dos Beattles para The Beattles. Retirei o disabled do input para permitir digitar o nome da banda e no click do botão load seja marcado o radio correspondente. Para alterar o valor de um input basta apenas usar o .value, igualmente como estava fazendo com os radios. Segue o código abaixo:

/**
 * Botão Submit
 */
document.getElementById("btnSubmit").onclick = function() {
  var radios = document.getElementsByName("band-rock");
  for (var i = 0; i < radios.length; i++) {
    if (radios[i].checked) {
      //alert("Escolheu: " + radios[i].value);
      //var nome = +radios[i].value.InnerHTML; 
      //console.log("Escolheu: " + radios[i].value);
      document.getElementById("texto").value = radios[i].value; // adicione essa linha de código
    }
  }
};


/**
 * Botão Load
 */
document.getElementById("btnLoad").onclick = function() {
  var radios = document.getElementsByName("band-rock");

  for (var i = 0; i < radios.length; i++) {
    if (radios[i].value === document.getElementById("texto").value) {
      radios[i].checked = true;
    }
  }
};
<form action="form-action.php" method="post">
  <p>
    <input id="The Beatles" type="radio" name="band-rock" value="The Beatles" />
    <label for="The Beatles">The Beatles</label>
    <input id="Led Zeppelin" type="radio" name="band-rock" value="Led Zeppelin" />
    <label for="Led Zeppelin">Led Zeppelin</label>
    <input id="Pink Floyd" type="radio" name="band-rock" value="Pink Floyd" />
    <label for="Pink Floyd">Pink Floyd</label>
    <input id="Black Sabbath" type="radio" name="band-rock" value="Black Sabbath" />
    <label for="Black Sabbath">Black Sabbath</label>
  </p>
  <p>
    <input type="button" id="btnSubmit" value="Submit me!" />
    <input type="button" id="btnLoad" value="Load!" />
  </p>
  <p>
    <input type="text" id="texto" name="band-rock" value=""/>
  </p>
</form>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .