Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Form Questions /

ajax dropdown in the form


Reply


2 Posts   1305 Views

Avatar
Ben_W

Community Member, 80 Posts

23 February 2011 at 8:31pm

Does anyone know how to implement ajax dropdown in a form? ie, two dropdowns in a form, one for top category, the other for subcategory. select one in the Top category dropdown, then the subcategory dropdown gets populated after user made the selection in the first dropdown. Is this possible?

Avatar
martimiz

Forum Moderator, 1132 Posts

26 February 2011 at 10:19am

There's probably lots of ways to do this, and I don't know if you want to do this in the frontend or the backend, with prototype or jQuery or...

This is how I did it, in the frontend, using jQuery, by making the 'category' selectbox trigger a 'change' event that ajax-reloads the entire form, providing it with the 'posted' data.

The form itself has its own separate template, that's <% included %> within a container div on the main page template. So on first load the form loads normally. On 'category' change jQuery reloads the form into the container div.

I usually tackle this by reloading the original page URL, with an extra action parameter added to it. Then I only need to create an equivalent action-method in the page-controller that returns only the rendered form, not the entire page :-) You could probably go another way by using a different controller...

Only thing to remember is that the change event binding on the category selectbox will get lost when you reload the form, I use delegate to prevent this.

Hope this makes some sense, finding it hard to explain in just a few lines :-)

Martine