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 javascript.