estoy intentando hacer un formulario con pasos, me explico, para que el formulario no ocupe mucho espacio, en lugar de hacerlo todo entero del tirón me gustaría hacer por ejemplo 3 o 4 inputs, que el usuario le de a un botón de siguiente y que aparezcan luego más inputs. El progreso que llevo es el siguiente:
- Tengo la página principal con un div (class="content")
- Cuando el usuario hace click en un botón, aparece el formulario (esto lo hice con jQuery)
El código que tengo es el siguiente:
PÁGINA PRINCIPAL:
$(document).ready(function() {
$("#abrirform").click(
function(event) {
$("#boton").hide();
contenido = $(".content").load("form1.php");
})
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<h2>Título</h2>
<div id="boton">
<button type="button" id="abrirform" class="btn btn-primary">Abrir formulario</button>
</div>
</div>
El archivo que se carga (form1.php) en el div clase content cuando el usuario hace click en "Abrir formulario" es el siguiente:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<h2>Título</h2>
<div>
<form role="form" action="enviar.php" method="post">
<table id="tabla_form" class="table">
<tr>
<td colspan="2"><label>Esto es un formulario</label></td>
</tr>
<tr>
<td><label>Nombre:</label></td>
<td class="input"><input class="form-control" type="text"></td>
</tr>
<tr>
<td><label>Apellidos:</label></td>
<td class="input"><input class="form-control" type="text"></td>
</tr>
<tr>
<td></td>
<td><button type="button" class="btn btn-primary" id="next">Siguiente</button> 0/5</td>
</tr>
No tengo muchas dudas en la elaboración del formulario con pasos en sí, pero no sé si cuando se hace click en el botón de siguiente, esas variables se almacenan o no. Si es posible, el almacenamiento de los datos del formulario lo quiero hacer con PHP, que es un lenguaje que llevo mejor. Si no es posible, no pasa nada. Otra duda es que cuando el usuario hace click en el botón de siguiente imaginaos que se carga el mismo contenido (un form con un par de inputs diferentes), me doy cuenta de que quizás ese form sea independiente al primero, ¿no?