1

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:

  1. Tengo la página principal con un div (class="content")
  2. 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?

3
  • Una pregunta, ¿Se saben los pasos de ante mano? osea, son pasos fijos o el paso siguiente depende del paso en curso? Commented el 8 sept. 2016 a las 11:06
  • Cuando pulsas el botón siguiente que haces?, porque el objeto de la pregunra está ahi. Commented el 8 sept. 2016 a las 11:16
  • Son fijos, cuando se pulsa siguiente, uso la función de jQuery "load", y cargo un segundo formulario.
    – Pablo
    Commented el 8 sept. 2016 a las 11:25

3 respuestas 3

1

Tal y como lo estas planteando, las variables, las tienes que recoger en cada una de las páginas, ya que recargas una página, sino lo he entendido mal.

Puedes evitar el tener que recargar esto, al menos de dos formas, que yo haya usado alguna vez, aunque seguramente se puedan hacer de bastantes mas y seguramente mejores que la solución que te doy.

  1. Usar algún plugin adicional, yo alguna vez he usado el jquery SmartWizard
  2. Crearte la estructura de páginas dentro del propio FORMcon etiquetas fieldset y a traves del jquery, ir mostrando las secciones. de este último caso, yo lo aprendí de la página de anieto2K
0

Si lo he entendido bien, lo que quieres hacer es un formulario por partes y ir guardando todas las respuestas.Si es así ,en cada parte del formulario que necesites guardar variables guardarlas en un array global y cuando acabes todas estarán en el array y haces con ellas lo que quieras ya.

1
  • Podrías clarificar eso con algún ejemplo?
    – devconcept
    Commented el 8 sept. 2016 a las 18:34
0

A ver si esta opción te vale, la veo algo más sencilla.

Si por ejemplo vas a partir el formulario en 3 páginas, prueba a hacer en cada una de ellas un formulario, pero la diferencia será en que cada vez que vas pasando de página y avanzando en el formulario, estos datos serán almacenados en variables de sesión, y una vez se llegue a la última parte del formulario puedes mandarte todos los datos que tengas en la sesión para trabajar con ellos como quieras.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.