Pass values (radio) from one HTML to another

Question

This is my first time around, I hope I’m doing everything right.

My question is the following, I have a page with a 4 questions questionnaire, and 3 of these the answer is given via 'radio' and the other way 'select'.

On another html page I have to pass the answers given on the previous page to this, displaying on the screen the choices made.

I would like to know how to accomplish this task without using PHP.

Answer 1

You can do the following by taking the answers to the questions and sending them to the other page as a parameter after the ?:

outra_pagina.html?abcd

Where abcd would be the alternatives chosen.

In the another page you capture this parameter and make a loop for concatenating the results and then playing 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>

Answer 2

Some alternatives are available:

1. Convert your form to a GET request, resulting in a long, ugly URL
2. Use cookies
3. Use HTML5 local Storage

With Storage location

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>