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?
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 :-)