1

Preciso criar uma pagina que tem duas perguntas com duas respostas (radio) de SIM ou NÃO, e, embaixo, um botão de enviar. Preciso que as perguntas e respostas, quando respondidas e o usuário clicar no botão enviar, apareçam em uma TEXTAREA logo abaixo para o usuário copiar e colar em um bloco de notas por exemplo.

Segue o código já criado em HTML com a estrutura:

<html>
<head></head>
<body>

    <p>Pergunta1? 

        <input type="radio"name="escolhaL"value="sim"/>SIM 
        <input type="radio"name="escolhaL"value="não"/>N&Atilde;O
    </p>

    <p>Pergunta2?
        <input type="radio"name="escolhaR"value="sim"/>SIM 
        <input type="radio"name="escolhaR"value="não"/>N&Atilde;O
    </p>

<br>    

        <p> 
            <input type="submit"value="Enviar"/> 
        </p> 

<br>

        <p> 
            <textarea name"mensagem" rows="10" cols="27"></textarea> 
        </p>

</body>
</html>

O que não sei fazer é quando clicar no botão jogar as perguntas e respostas selecionadas dentro da TEXTAREA. Alguém poderia me ajudar?

7
  • sabe usar JQuery? Commented 6/04/2016 às 20:56
  • Não sei cara. Comecei a desenvolver para web a pouco tempo.
    – Gabriel
    Commented 6/04/2016 às 21:00
  • Teria como ajudar?
    – Gabriel
    Commented 6/04/2016 às 21:00
  • Cara, e coisa super simples, mas requer um conhecimento médio, se não posto todo código aqui e mesmo assim não vai funcionar, da uma olhada nisso aqui: api.jquery.com Commented 6/04/2016 às 21:01
  • Saberia me dizer qual dessas tags eu uso para fazer o que preciso? Sabendo qual tag é a certa eu me viro para ver como ele é implementada no código.
    – Gabriel
    Commented 6/04/2016 às 21:54

2 Respostas 2

2

Existem algumas formas de fazer isso. Como você é iniciante, irei colocar a forma mais "simples" (que eu encontrei) de se fazer isso, mas não a melhor.

Primeiro, vejamos um exemplo funcional:

<script>
function PreencherCampo(){
    var pergunta1 =  document.getElementById("pergunta1").innerHTML;
    var pergunta2 =  document.getElementById("pergunta2").innerHTML;
    
    var elementos1 = document.getElementsByName('pergunta1'); 
    var resposta1 = '';
    	for (i = 0; i < elementos1.length; i++) {
      	if (elementos1[i].checked) {
        resposta1 = elementos1[i].value;
    	}
    }
    
    var elementos2 = document.getElementsByName('pergunta2'); 
    var resposta2 = '';
    	for (i = 0; i < elementos2.length; i++) {
      	if (elementos2[i].checked) {
        resposta2 = elementos2[i].value;
    	}
    }
    
		document.getElementById("resposta").innerHTML = pergunta1 + ': ' + resposta1 + '\n'+ 
						pergunta2 + ': ' + resposta2;
}
</script>  
  
  
  <p id="pergunta1">Pergunta1?</p>
        <input type="radio"name="pergunta1"value="Sim" checked/>SIM 
        <input type="radio"name="pergunta1"value="Não"/>Não
    <p id="pergunta2">Pergunta2?</p>
        <input type="radio"name="pergunta2"value="Sim" checked/>SIM 
        <input type="radio"name="pergunta2"value="Não"/>Não
<br>    

        <p> 
            <input type="submit"value="Enviar"  onclick="PreencherCampo()"/> 
        </p> 

<br>

        <p> 
            <textarea name"mensagem" rows="10" cols="27" id="resposta"></textarea> 
        </p>

Nesse exemplo, primeiro pegaremos o valor de cada pergunta pelo id dos elementos, dessa forma:

var pergunta1 =  document.getElementById("pergunta1").innerHTML;
var pergunta2 =  document.getElementById("pergunta2").innerHTML;

Após isso, vamos pegar todos os radios pelo name, e após isso verificar qual está com o atributo checked (que indica qual está marcado ou não).

var elementos1 = document.getElementsByName('pergunta1'); 
    var resposta1 = '';
        for (i = 0; i < elementos1.length; i++) {
        if (elementos1[i].checked) {
        resposta1 = elementos1[i].value;
        }
    }

E fazemos a mesma coisa com o segundo grupo, como o código do exemplo mostra. Se tivéssemos mais, iriamos criar o terceiro e assim por diante.

Após isso, precisamos colocar o valor no textarea, e para isso basta obter o elemento (textarea) por id e setar o innerHTML como o valor que queremos, dessa forma:

document.getElementById("resposta").innerHTML = pergunta1 + ': ' + resposta1 + '\n'+ 
                        pergunta2 + ': ' + resposta2;

O por fim, chamaremos a nossa função ao clicar no botão enviar, pelo evento .onclick() em nosso botão, desta forma:

<input type="submit"value="Enviar"  onclick="PreencherCampo()"/>

Com tudo isso, temos o resultado esperado, utilizando apenas .

1

Eu começaria alterando HTML, use <div> e classes para agrupar elementos.

Da forma que está fazendo, terá um trabalho enorme somente para obter o título da pergunta (que é um parágrafo cheio de outros elementos dentro). Use uma tag para manter o título isolado do restante do elemento, já que você vai precisar desse conteúdo textual posteriormente.

Existem várias formas de melhorar isso, a priori deixaria assim:

<div class='pergunta'>
   <p>Você vem sempre aqui?</p>
   <input type='radio' name='pergunta1' value='Não'>Não <br>
   <input type='radio' name='pergunta1' value='Sim'>Sim
</div>

Isso já vai facilitar você obter todos os elementos que possuem classe .pergunta usando document.querySelectorAll, se precisar incluir/remover perguntas futuramente, o modo de obtê-las continuará o mesmo.

(function() {

  document.querySelector('button').addEventListener('click', copiarPerguntas);


  function copiarPerguntas() {
    
    var $perguntas = document.querySelectorAll('.pergunta'),
        $textarea  = document.querySelector('textarea'),
        length     = $perguntas.length;

    $textarea.innerHTML = '';
    for (var i = 0; i < length; i++){      
      var pergunta = $perguntas[i];
      var titulo   = pergunta.querySelector('p').innerHTML;
      var resposta = pergunta.querySelector('input[type="radio"]:checked').value;
      
      $textarea.innerHTML += titulo + '\n' + resposta + '\n';
    }
  }
})();
textarea { width: 400px; height: 100px }
<div class='pergunta'>
  <p>Você vem sempre aqui?</p>
  <input type='radio' name='pergunta1' value='Não'>Não <br>
  <input type='radio' name='pergunta1' value='Sim'>Sim
</div>

<div class='pergunta'>
  <p>Essa cantada está "manjada"?</p>
  <input type='radio' name='pergunta2' value='Não'>Não <br>
  <input type='radio' name='pergunta2' value='Sim'>Sim
</div>

<button type='submit'>Enviar</button>

<br>
<textarea></textarea>

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 .