Formulario multipagina Javascript Tengo que hacer para clase un formulario de varias paginas que guarden las selecciones en cookies y que en la ultima pagina te muestre los resultados.
Por ahora llevo esto y no se muy bien como hacer para guardar las variables por pagina y que al final me las muestre todas.
html pagina 1:
<!doctype html>
<html>
<head>
<title>Formulario de Videojuegos</title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body> <div id="entero">Cuestionario de Final Fantasy
<div id="formulario">
<form>
<input type="radio" name="pregunta" value="male" id='draftrequirement'> Male<br>
<input type="radio" name="pregunta" value="female" id='draftrequirement2'> Female<br>
</form>
<form name="nombreDelFormulario" action="" method="post">
<input type="button" value="ir a pagina 1" onClick="enviar('formulariopagina2.html');mostrarC ookies()">
</form>
</div>
</div>
<script type="text/javascript" src="javascript.js"></script>
</body>
</html>
html pagina 2:
<!doctype html>
<html>
<head>
<title>Formulario de Videojuegos</title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body> <div id="entero">Cuestionario de Final Fantasy
<div id="formulario">
<form>
<input type="radio" name="pregunta2" value="male" id="hombre"> Male<br>
<input type="radio" name="pregunta2" value="female" id="mujer"> Female<br>
<input type="button" onclick="funciones()" value="Siguiente" />
</form>
</div>
</div>
<script type="text/javascript" src="javascript.js"></script>
</body>
</html>
javascript:
function enviar(pagina){
document.nombreDelFormulario.action = pagina;
document.nombreDelFormulario.submit();
}
function Cookie(){
document.cookie(pregunta1+""+pregunta2);
document.write(document.cookie);
}
function mostrarCookies2(){
var z=document.getElementById('hombre');
var zz=document.getElementById('mujer');
if(z.checked){
pregunta2=z.value;
}
else if(zz.checked)
{
pregunta2=zz.value;
}else {
}
document.cookie(pregunta2);
document.write(document.cookie);
}
function mostrarCookies(){
var y=document.getElementById('draftrequirement');
var x=document.getElementById('draftrequirement2');
if(y.checked){
pregunta1=y.value;
} else{
}
if(x.checked){
pregunta1=x.value;
}else {
}
}
function funciones(){
mostrarCookies2();
Cookie();
}
css(aunque no sea necesario para resolver mi duda pero yo lo pongo) :
#entero{
position: absolute;
text-align: center;
width: 98%;
height: 98%;
border: 1px solid black;
align-items: center;
background: #97e3ff;
background-image: url(elvoret.png);
background-size: 50%;
background-position: right;
background-repeat: no-repeat;
}
#formulario {
margin: 0 auto;
position: relative;
text-align: center;
margin-top: 10%;
width: 50%;
height: 50%;
border: 0.5px solid black;
align-content: center;
justify-content: center;
display: flex;
justify-content: center;
align-content: center;
flex-direction: column;
background-image:url(finalfantasy.png);
background-repeat: no-repeat;
background-position:bottom;
background-size: 25%;
}
por cierto las preguntas de los formularios he puesto hombre mujer como ejemplo de lo que quiero; que al final me mostrara pregunta 1: hombre; pregunta 2: mujer
