Dynamic Form - Select (Jump) Menus - State -> City -> Store

By newdru on 9 Dec 2006 at 07:53 UTC

You've seen this kind of thing before. You're entering data on a form, you have to select a store but it's a lot easier to:

1) first select a state from a jump/select menu
2) which then populates a city jump/select menu (based on state)
3) then select city in city jump/select menu
4) which then populates a store jump/select menu (based on city)
5) then select the store you want

tada!

First, has anyone created or USED, REMOTELY SEEN anything SIMILAR to this in the drupal community (possibly a module)? I personally haven't but would like such functionality. But I don't want to have to recreate the wheel if it already exists. btw SIMILAR means any module that chains the active selection in one jump menu to what get's populated in another jump menu in real-time. Doesn't have to be city, state, store.. Could be any similar paradigm...

If SIMILAR DOESN'T EXIST, anybody have any idea how to approach this in the Forms API if i were to create a custom module?

NOTES: the preliminary intent would be that:

1) all of this location infomation will live in it's own table (i can use the location module for that possibly)
2) the store will live in its own separate table that will have Foreign Keys to the location table.
3) and another content type (the one where the form described above "lives" . eg. is presented when you node/add this type) will live in it's own table and have a Foreign Key to the "store" table.

Any and all thoughts are welcome
thanks

Comments

Try PHP PEAR HTML_QuickForm hierselect

plumbley commented 9 December 2006 at 10:47

I'm not sure about Drupal, but in PHP PEAR you could look at the HTML_QuickForm "hierselect" element for ideas. See e.g.

http://pear.php.net/package/HTML_QuickForm/docs/latest/HTML_QuickForm/_H...

Hope this helps,

Mark.
---
www.PostgraduateStudentships.co.uk - where ideas and funding meet

Thanks..

newdru commented 9 December 2006 at 20:50

I'm at the information gathering stage so that helps.

After quickly looking at that code, it appears that it hard codes the select values for each menu in one script itself. Which is one way to do it.

However, because there might potentially be many cities in each state, and stores in each city, i'm not sure how practical that approach would be (at least from a performance perspective). I'd prefer to have the state, city, store info stored in db tables. Then do either:

1) a series of recursive drupal form calls so that each successive select performs a sql SELECT on the db and rebuilds the form page with the next select menu, etc.. The thing is i'm not sure how "chained" or "recursive" forms is handled in the drupal FORMS API

2) similar approach but possibly asking for more trouble... to perform #1 but via AJAX calls so only the next select menu widget on the page needs to be updated with the SQL SELECT return items. This prevents the entire page from having to reload. However, it also requires that JS must be browser enabled. Again, this is really equivalent to making AJAX work with the drupal Forms API.

More thoughts on this are definitely welcome.

Thanks for your post.

or Activeselect?

plumbley commented 10 December 2006 at 22:24

Or maybe Activeselect is related? See http://drupal.org/project/activeselect

Mark
--
www.PostgraduateStudentships.co.uk - where ideas and funding meet

Thanks..

newdru commented 10 December 2006 at 23:40

I just came across that late last night and didn't have a chance to post yet..

fwiw, i just downloaded this and was really impressed with the API doc that was included with the download. I only glanced over it but it gave a pretty good idea of how to use this if you need to. kudos to the developer.

mark.. check your email.. i sent you an email

Did you have luck?

svogel commented 20 January 2007 at 21:04

I just tried to use activeselect in a similar way. But there is on major drawback. The dependant selects has to have all "options" set. The activeselect doesn't seem to work like the hierselect from PEAR, where one can dynamically fill the options in the second select depending on the value choosen in the first select.

It took me quite a time to find this in the API.txt from hierselect

It is very important that the values defined in the '#options' array for each target element include EVERY POSSIBLE OPTION that could be outputted by your activeselect callback function.

It wouldn't make sense to fill the second select with ALL the cities available.

Any progress???

Best regards
Stefan

I haven't...

newdru commented 21 January 2007 at 20:58

had time to explore this the way i want to yet.

However, your investigative work has probably saved me some time when i get around to this.

I imagine that there is a way to modify this if what you say is true. I'm not exactly sure how to do that as i haven't looked at this since i last posted but anything can be done, you just have to do it :-).

I would doublecheck your findings though. hiermenus would be pretty useless if they didn't restrict the next pulldown based on teh item selected in the first pulldown. otherwise, you would have no need for the heirmenus as far as i can tell right?

please post back if you figure this and implement anything before i get around to it.

thanks

Attribute #DANGEROUS_SKIP_CHECK

svogel commented 31 January 2007 at 20:34

This should be set:
'#DANGEROUS_SKIP_CHECK' => true

So you can avoid letting the options been checked. Currently I'm looking after the "password_confirm"-widget ... (which has two textboxes). I think the multi-hier-select can be handled much the same way.

Best regards
Stefan