I am struggling with how to add dynamically add form elements to a form
based on user action. Now here is my situation:
I have model Project that has_many line_items
On the form to create a project I initially display form elements (some
drop downs and text boxes) for adding just one line_item. There is also
a button or a link on the page (not sure if this should be in the main
form or outside). One the user selects that button/link I need to add
another set form elements to add another line_item and this can continue
to add more line items. It would be nice to provide another button/link
to delete line_items. After the user all the form elements for the
project and line_items, they can submit the form that will save the
project and line_items.
So far I have tried to use RJS to add a new line item. But seems like I
have to keep a tab of line_items added so far so that name for elements
for line_items like line_item1, line_item2 etc. So I have to pass each
time to the RJS call that can generate approriate form elememts and also
increment the line_item count. I was hoping to set a hidden element
containing the line_item count and use rjs replace that hidden element
every time the user adds a line_item.
This seems a little kludgy to me and I was wondering if somebody can
suggest a better approach or I am better off sending the whole form to
the server and based name of button pressed either the save the project
or redisplay the new project page by adding a new line_item.