Form with steps

Question

Form with steps

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)

1

I'm trying to make a form with steps, I mean, so the form does not take up a lot of space, instead of doing it all the way I would like to do 3 or 4 inputs, for example, that the user gives a button next and then more inputs appear. The progress that I have is the following:

I have the main page with a div (class="content")

When the user clicks on a button, the form appears (this was done with jQuery)

The code I have is the following:

MAIN PAGE:

$(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>

The file that is loaded (form1.php) in the div class content when the user clicks on "Open form" is as follows:

<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>

I do not have many doubts in the preparation of the form with steps in itself, but I do not know if when you click on the next button, those variables are stored or not. If possible, I want to store the data of the form with PHP, which is a language I use better. If it is not possible, nothing happens. Another question is that when the user clicks on the next button, imagine that the same content is loaded (a form with a couple of different inputs), I realize that maybe that form is independent of the first, right? p>

javascript jquery html php

asked by Pablo 08.09.2016 в 12:34

source

3 answers

Assign value in ng-include, without using the ng-click event? "Can not find symbol" when calling a class from a JSP file

score 1 · Answer 1

As you are saying, the variables, you have to collect them in each of the pages, since you reload a page, but I have misunderstood it.

You can avoid having to recharge this, at least in two ways, that I have used at some time, although surely they can be done a lot more and surely better than the solution I give you.

Use some additional plugin, I've used the jquery SmartWizard

Create the page structure within the FORM with tags fieldset and through the jquery, go showing the sections. In the latter case, I learned it from the page of anieto2K

score 0 · Answer 2

If I have understood correctly, what you want to do is a form by parts and keep all the answers. If so, in each part of the form you need to save variables in a global array and when you finish all of them will be in the array and you do with them what you want already.

score 0 · Answer 3

To see if this option is worth you, I see something simpler.

If for example you are going to split the form in 3 pages, try to do in each one of them a form, but the difference will be in that each time you go of page and advancing in the form, these data will be stored in session variables, and once you reach the last part of the form you can send all the data you have in the session to work with them as you want.