Page 1 of 1

A complex input form

Posted: Wed May 11, 2011 7:15 am
by chopWood
I'm trying to figure out how one would construct an HTML form that is complex. This is best illustrated by example:

Suppose I want to ask you what brand of skis you own. The choices might be:
Brand1
Brand2
Brand3
etc.

Based on the Brand you select, I want to know what model you have:
Model1
Model2
Model3
etc.

There may be many brands and many models. So if you choose Brand1, I don't want you to have to look at the Models for the other brands. So, I guess, I must be looking for some kind of tree architecture.

Any suggestions on where to go from here?

thanks,
chop

Re: A complex input form

Posted: Wed May 11, 2011 11:53 am
by Kurby
Is all this info and relationships in a database? If so you just need simple AJAX.

Re: A complex input form

Posted: Wed May 11, 2011 12:48 pm
by flying_circus
Typically you would use javascript to populate (we'll assume a select element) the 2nd dropdown when the first dropdown fires an "onChange" event. This is pretty standard procedure for automotive websites. Select a make, then a model, then a trim.

Re: A complex input form

Posted: Wed May 11, 2011 1:37 pm
by chopWood
The item categories and sub, sub categories are coming from a database. These would be used to populate the choices on the form.

Re: A complex input form

Posted: Wed May 11, 2011 3:14 pm
by Kurby
Are you familiar with AJAX? As flying_circus mentioned, each of your dropdowns should have an onChange event that will make an AJAX request to populate the next one.

Re: A complex input form

Posted: Wed May 11, 2011 3:36 pm
by chopWood
Unfortunately I am AJAX illiterate.

Re: A complex input form

Posted: Mon May 16, 2011 7:43 am
by Gopesh
Hi,check this link http://roshanbh.com.np/2008/01/populate ... d-php.html..Hope that it will help u...

Re: A complex input form

Posted: Mon May 16, 2011 1:57 pm
by flying_circus
chopWood wrote:Unfortunately I am AJAX illiterate.
You don't have to use AJAX. While AJAX will make the UI feel a bit more streamlined, it is also subject to failure by the user disabling javascript on the client side.

When the user changes the first dropdown, an onchange event submits the form. Your site will create a new page request (reloads the page) and then the 2nd dropdown options are presented to the user.