# Best approach to add form elements dynamically

**URL:** <https://www.ruby-forum.com/t/best-approach-to-add-form-elements-dynamically/96764>\
**Category:** Rails\
**Created:** [July 1, 2006, 6:39pm UTC](https://www.ruby-forum.com/t/best-approach-to-add-form-elements-dynamically/96764 "2006-07-01T18:39:09Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Navjeet](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/n/4af34b/32.png) [@Navjeet](https://www.ruby-forum.com/u/Navjeet)\
**Post date:** [July 1, 2006, 6:39pm UTC](https://www.ruby-forum.com/t/best-approach-to-add-form-elements-dynamically/96764/1 "2006-07-01T18:39:09Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Navjeet](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/n/4af34b/32.png) [@Navjeet](https://www.ruby-forum.com/u/Navjeet)\
**Post date:** [July 1, 2006, 8:23pm UTC](https://www.ruby-forum.com/t/best-approach-to-add-form-elements-dynamically/96764/2 "2006-07-01T20:23:58Z")

</div>

I can’t say whether this is the “best” way, but it’s _my_ way. I use  
observe\_form on a radio button and have it call my own JavaScript  
instead of  
making an AJAX call. There are a few of my helpers, so don’t worry about  
those. Here’s an example of the code:

\<%= start\_form\_tag(nil, {:id =\> ‘lien\_holder’, :name =\> ‘lien\_holder’})  
%\>  
\<%= observe\_form(:lien\_holder, :frequency =\> 0.5, :function =\>  
“revealDetail();”) %\>

  
  
\<%= form\_rows\_from\_collection([  
[‘\*action’, radios\_from\_collection(:change\_lien\_holder, :user\_action,  
[‘add’, ‘change’, ‘delete’])],  
[‘\*effective date’, dynarch\_date\_select(‘change\_lien\_holder’,  
‘effective\_date’)],  
]) %\>  

| Change Lien Holder |
|
| |

  

  
  
\<%= form\_rows\_from\_collection([  
[‘\*bank name’, text\_field(:change\_lien\_holder, :bank\_name)],  
[‘\*address’, text\_field(:change\_lien\_holder, :address1)],  
[‘address’, text\_field(:change\_lien\_holder, :address2)],  
[‘\*city’, text\_field(:change\_lien\_holder, :city)],  
[‘\*state’, select\_from\_hash(:change\_lien\_holder, :state,  
@state\_hash, :sorted =\> true)],  
[‘\*zip’, text\_field(:change\_lien\_holder, :zip)],  
]) %\>  

  

  
\<%= submit\_link ‘send changes’ %\>  
\<%= end\_form\_tag %\>

–  
View this message in context:  
[http://www.nabble.com/best-approach-to-add-form-elements-dynamically-tf1877805.html#a5134450](http://www.nabble.com/best-approach-to-add-form-elements-dynamically-tf1877805.html#a5134450)  
Sent from the RubyOnRails Users forum at [Nabble.com](http://Nabble.com).

---

<div class="post-metadata">

**Author:** ![Navjeet](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/n/4af34b/32.png) [@Navjeet](https://www.ruby-forum.com/u/Navjeet)\
**Post date:** [July 3, 2006, 6:30pm UTC](https://www.ruby-forum.com/t/best-approach-to-add-form-elements-dynamically/96764/3 "2006-07-03T18:30:46Z")

</div>

Steve,

That seems to be the solution to hide or show some form elements  
(fixed) based on some selection. It does not see to add for elements  
dynamically. Correct me if I am wrong?

Steve R. wrote:

> I can’t say whether this is the “best” way, but it’s _my_ way. I use  
> observe\_form on a radio button and have it call my own JavaScript  
> instead of  
> making an AJAX call. There are a few of my helpers, so don’t worry about  
> those. Here’s an example of the code:

… rest of message deleted

> –  
> View this message in context:  
> [http://www.nabble.com/best-approach-to-add-form-elements-dynamically-tf1877805.html#a5134450](http://www.nabble.com/best-approach-to-add-form-elements-dynamically-tf1877805.html#a5134450)  
> Sent from the RubyOnRails Users forum at [Nabble.com](http://Nabble.com).

---

<div class="post-metadata">

**Author:** ![Navjeet](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/n/4af34b/32.png) [@Navjeet](https://www.ruby-forum.com/u/Navjeet)\
**Post date:** [July 3, 2006, 6:49pm UTC](https://www.ruby-forum.com/t/best-approach-to-add-form-elements-dynamically/96764/4 "2006-07-03T18:49:03Z")

</div>

Correct. It presumes you have knowledge of what the possible fields are  
at  
the point where you construct the original form. My presumption is that  
the  
superset of all form fields is bounded by the attributes of my AR model,  
and  
the widgets that may control visibility.

If you really want to add form elements dynamically, RJS is your best  
bet.  
You can simply stick new stuff in divs on your page. E.g.,

# controller\_name.rb

def add\_a\_field  
@my\_new\_field = “Enter gibberish: #{text\_field\_tag(‘whoa! a new edit  
box’)}”  
end

# controller\_name.rjs

page.insert\_html :bottom, ‘new\_content\_div’, @my\_new\_field

Whatever you know is going to be there.

Give it a try. This kind of thing takes some messing around to get  
right.

View this message in context:  
[http://www.nabble.com/best-approach-to-add-form-elements-dynamically-tf1877805.html#a5154909](http://www.nabble.com/best-approach-to-add-form-elements-dynamically-tf1877805.html#a5154909)  
Sent from the RubyOnRails Users forum at [Nabble.com](http://Nabble.com).