Multiple Pages in a Form

Question

I recently built a simple website for a client having very little content, images and pages. Now, they want a form (a very complicated) one on their website. I built their website using just Bootstrap, so, basics of HTML, CSS and PHP was enough. But, I can't figure out a way of building this form.

Here's what the form is supposed to do:

First Page

Shows form fields to have user enter their Name, Phone Number and Email address. Then, a submit button takes them to next page.

Second Page

Has a dropdown list with names of manufacturers. Depending on the manufacturer chosen, another list lets you choose a product. A final dropdown list lets you select the model number.

Third Page

This page, is supposed to show content unique to the model number chosen. For example, if "Model X" was selected in the previous page, this page displays a unique set of fields. Choose "Model Y" and you get a different set of fields.

I will figure out later how to get all this stored into the database. But for now, I would really appreciate it if you can help build this form.

There are different ways to approach this. If you want the page to physically reload, you would use something like localStorage (or cookies, or sessionStorage, or whatever) to store data in between pages, then check values to determine what to display (or store it serverside -- e.g. in $_SESSION). Alternatively there are also pre-fad solutions like http://thecodemine.org/ (first google hit, search "multistep form" for a ton more) that work by having everything on one page (and just showing one step at a time). Hope this helps get you started! — tehsockz, Jul 06 '14 at 17:58

score 1 · Answer 1 · answered Jul 06 '14 at 17:55

You can handle the variables with GET and POST methods also you can save variables in SESSION.

So, when you can handle this variables in the chaining pages. In your forms you might use hidden inputs to send again another page to handle this variables again. At the end of the process you can updat or save your entity or entities in your database.

score 0 · Answer 2 · edited May 23 '17 at 10:26

Ajax.

You can use ajax and save data in session to wait last step.

jQuery Ajax POST example with PHP

Display cssRules.

http://jsbin.com/vofoz/1/edit

You make div for each step like and show next step with JS. Like this :

<form>
    <div id="step1">
        step 1
        <input type="button" value="next >" />
    </div>
    <div id="step2" style="display:none;">
        step 2
        <input type="button" value="next >" />
    </div>
    <div id="step3" style="display:none;">
        step 3
        <input type="submit" />
    </div>
</form>

Sample example (javascript) :

$("form div > input[type=button]").click(function () {
    $(this).parent().hide();
    $(this).parent().next().show();
});

score 0 · Answer 3 · answered Jul 06 '14 at 18:04

I would include everything needed in one big form, then show/hide content to paginate the form. This would reduce the request to the server by grouping everything in one POST. As long as there's a single <form> tag wrapping everything, it will be relatively simple.

Multiple Pages in a Form

3 Answers3

Ajax.

Display cssRules.

Linked