# Nested forms

**URL:** <https://www.ruby-forum.com/t/nested-forms/171946>\
**Category:** Rails\
**Created:** [July 12, 2009, 2:56am UTC](https://www.ruby-forum.com/t/nested-forms/171946 "2009-07-12T02:56:07Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![mistressjanna](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/3ab097/32.png) [@mistressjanna](https://www.ruby-forum.com/u/mistressjanna)\
**Post date:** [July 12, 2009, 2:56am UTC](https://www.ruby-forum.com/t/nested-forms/171946/1 "2009-07-12T02:56:07Z")

</div>

Can someone please point me in the right direction on what to do here,  
in terms of basic architecture. I;ve seen this type of interface  
before.

Let’s say I have something that is “sold” and I have a form for the  
sold information. At the bottom of the form, say, us a little “plus  
sign” or something like that, with a notation after it that says  
“Customer”, which then opens up another form, embedded in the sold  
form (in terms of the UI) to enter possible customer information for a  
second form, and that customer form may have another form embedded in  
it with a plus sign, etc. When I submit on an embedded form, it  
closes, taking me to its enclosing form, with a plus sign where the  
one I just submitted was.

The basic idea therefore is to

1. conserve screen space
2. not require you to redirect to another page for a form which is  
linked to by it;s enclosing form

Is there a standard library for this type of thing? (Im open to any  
ideas that satisfy these two points mentioned) If not, can you tell me  
how to create it? Thanks, Janna B

---

<div class="post-metadata">

**Author:** ![mistressjanna](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/3ab097/32.png) [@mistressjanna](https://www.ruby-forum.com/u/mistressjanna)\
**Post date:** [July 12, 2009, 3:20am UTC](https://www.ruby-forum.com/t/nested-forms/171946/2 "2009-07-12T03:20:04Z")

</div>

On Sat, 2009-07-11 at 17:55 -0700, JannaB wrote:

> Can someone please point me in the right direction on what to do here,  
> in terms of basic architecture. I;ve seen this type of interface  
> before.

The short answer is that you cannot nest forms structurally. The  
standard prohibits. What you can do, and is easy to do if you learn a  
little CSS, is to nest them visually. Those are two completely separate  
issues.

Best reagards,  
Bill

---

<div class="post-metadata">

**Author:** ![mistressjanna](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/3ab097/32.png) [@mistressjanna](https://www.ruby-forum.com/u/mistressjanna)\
**Post date:** [July 12, 2009, 3:21am UTC](https://www.ruby-forum.com/t/nested-forms/171946/3 "2009-07-12T03:21:50Z")

</div>

Hello–

On Jul 11, 2009, at 5:55 PM, JannaB wrote:

> second form, and that customer form may have another form embedded in  
> ideas that satisfy these two points mentioned) If not, can you tell me  
> how to create it? Thanks, Janna B

> **[\#73 Complex Forms Part 1 - RailsCasts](http://railscasts.com/episodes/73-complex-forms-part-1)**
>
> Short Ruby on Rails screencasts containing tips, tricks and tutorials. Great for both novice and experienced web developers.

---

<div class="post-metadata">

**Author:** ![mistressjanna](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/3ab097/32.png) [@mistressjanna](https://www.ruby-forum.com/u/mistressjanna)\
**Post date:** [July 12, 2009, 4:15am UTC](https://www.ruby-forum.com/t/nested-forms/171946/4 "2009-07-12T04:15:33Z")

</div>

Im ok with the controller / model architecture…it;s the UI itself  
that I am trying to accomplish. Simply, a means to collapse forms on  
the screen is reallyt what I want. Thanks! Janna

---

<div class="post-metadata">

**Author:** ![mistressjanna](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/m/3ab097/32.png) [@mistressjanna](https://www.ruby-forum.com/u/mistressjanna)\
**Post date:** [July 12, 2009, 7:56am UTC](https://www.ruby-forum.com/t/nested-forms/171946/5 "2009-07-12T07:56:56Z")

</div>

[http://www.prototypejs.org/api/element/toggle](http://www.prototypejs.org/api/element/toggle)

$(‘your-sub-form’).toggle()

will hide or show a given element. Just wrap your subform in a div  
with a unique id and put a disclose link outside that div. You can  
then use an onclick handler for that disclose link if you like the  
inline JS route or by defining the behavior of the element in the  
document.observe(''dom:loaded", …) function.

hth