This is my first time here, I hope to be doing everything right.
My question is the following, I have a page with a questionnaire of 4 questions, 3 of which the answer is given via 'radio' and the other via 'select' .
In another page html I have to pass the answers given on the previous page to this one, displaying on the screen the choices made.
I would like to know how to accomplish this task without the use of PHP.
You can do the following by picking up the answers to the questions and sending them to the other page as a parameter after ? :
outra_pagina.html?abcd
Where abcd would be the alternatives chosen.
On the other page you capture this parameter and loop for by concatenating the results and then throwing it into a div .
First page code with questions:
Pergunta 1:
<br />
a) <input type="radio" name="perg1" value="a">
<br />
b) <input type="radio" name="perg1" value="b">
<br />
c) <input type="radio" name="perg1" value="c">
<br /><br />
Pergunta 2:
<br />
a) <input type="radio" name="perg2" value="a">
<br />
b) <input type="radio" name="perg2" value="b">
<br />
c) <input type="radio" name="perg2" value="c">
<br /><br />
Pergunta 3:
<br />
a) <input type="radio" name="perg3" value="a">
<br />
b) <input type="radio" name="perg3" value="b">
<br />
c) <input type="radio" name="perg3" value="c">
<br /><br />
Pergunta 4:
<br />
<select name="perg4">
<option value="">Selecione...</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
<br /><br />
<button onclick="enviar()">Enviar</button>
<script>
function enviar(){
var perg1_val = document.querySelector("input[name='perg1']:checked"),
perg2_val = document.querySelector("input[name='perg2']:checked"),
perg3_val = document.querySelector("input[name='perg3']:checked"),
perg4_val = document.querySelector("select[name='perg4']").value;
if(perg1_val && perg2_val && perg3_val && perg4_val != ''){
location.href = "outra_pagina.html?"
+ perg1_val.value
+ perg2_val.value
+ perg3_val.value
+ perg4_val;
}else{
alert("Responda todas as perguntas");
}
}
</script>
Code of another page :
<div id="respostas">
</div>
<script>
document.addEventListener("DOMContentLoaded", function(){
var url_ = location.href,
param = url_.substring(url_.lastIndexOf("?")+1, url_.length),
resps = '';
for(var x=0; x<param.length; x++){
resps += "Pergunta "+(x+1)+": resposta <b>"+param[x]+"</b><br />";
}
document.querySelector("#respostas").innerHTML = resps;
});
</script>
Some alternatives are available:
With local storage
Pergunta 1:
<br />
a) <input type="radio" name="perg1" value="a">
<br />
b) <input type="radio" name="perg1" value="b">
<br />
c) <input type="radio" name="perg1" value="c">
<br /><br />
Pergunta 2:
<br />
a) <input type="radio" name="perg2" value="a">
<br />
b) <input type="radio" name="perg2" value="b">
<br />
c) <input type="radio" name="perg2" value="c">
<br /><br />
Pergunta 3:
<br />
a) <input type="radio" name="perg3" value="a">
<br />
b) <input type="radio" name="perg3" value="b">
<br />
c) <input type="radio" name="perg3" value="c">
<br /><br />
Pergunta 4:
<br />
<select name="perg4">
<option value="">Selecione...</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
<br /><br />
<button onclick="enviar()">Enviar</button>
<script>
function enviar(){
var perg1_val = document.querySelector("input[name='perg1']:checked"),
perg2_val = document.querySelector("input[name='perg2']:checked"),
perg3_val = document.querySelector("input[name='perg3']:checked"),
perg4_val = document.querySelector("select[name='perg4']").value;
if(perg1_val && perg2_val && perg3_val && perg4_val != ''){
var respostas = perg1_val.value+","+perg2_val.value+","+perg3_val.value+","+perg4_val;
localStorage.setItem("respostas", respostas);
location.href = "outra_pagina.html";
}else{
alert("Responda todas as perguntas");
}
}
</script>
other_page.html
<script language="javascript">
var respostas = localStorage.getItem("respostas");
document.write (respostas);
</script>