CODEWITHSUNDEEP
javascriptphpjqueryhtmlforms
akumarks
akumarks

Reputation: 71

Multiple Pages in a Form

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.

Upvotes: 0

Views: 1402

Answers (3)

matt
matt

Reputation: 121

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.

Upvotes: 0

user2226755
user2226755

Reputation: 13157

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();
});

Upvotes: 0

İlker Korkut
İlker Korkut

Reputation: 3250

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.

Upvotes: 1

Related Questions