I want to break up an HTML form onto several JQuery UI tabs and have one "ALL" tab that has all the bits of form in one.

Question

I want to have a large HTML form broken up into several smaller sub-forms in a JQuery UI tabs layout. But I want to have one special "All" tab that has all of the sub-forms on that tab. So when a user clicks on the All tab, they can see and edit all of the form fields that are normally divided up on several tabs.

How could I easily do this with JQuery? I wanted to avoid having two copies of the actual fields because it seems a pain to copy/paste the data between the sub-form version and the special "All" form version.

Please note: I'm using the ui.jquery.com tab layout.

Answer 1

Assuming you have the different tabs working / showing already, you can just loop through all elements (the blocks with the form fields you show and hide as requested) when the user clicks all and show them all.

Answer 2

It doesnt sound that difficult. Wrap each sub-form in it's own container div. Position all the div elements relative to each other on the 'all' page in the ready() method and set each div as visible. Then set the visibility of the divs, bar the selected, on click of your tab buttons / fields to hide them. Clicking 'all' simply calls the same function you use in your ready() method to lay the divs out in the first instance.

You definitely don't need two copies of the fields (or have to do any copying between them).

However, there are loads of javascript / jquery tab components out there, I'd probably start with one of those and see, firstly, how someone else does it and, secondly, if you can adapt it.

Some tab plugins:

http://stilbuero.de/jquery/tabs/

http://docs.jquery.com/UI/Tabs

Setting div visibility:

http://drupal.org/node/287259

http://waxtadpole.wordpress.com/2008/11/26/jquery-toggle-visibility-of-a-div/

Answer 3

Seems like you just need to group your fields in DIVs, and then have only one DIV visible at a time, unless the viewer has selected "All". This is a very quick mock-up, but should illustrate my point clearly.

<!-- Clicking a groupButton hides all groups, save for the href'd group -->
<a href="#group1" class="groupButton">Group 1</a>
<a href="#group2" class="groupButton">Group 2</a>

<!-- If the href'd group is '0', show all groups -->
<a href="#group0" class="groupButton">View All</a>

<div id="group1" class="group">
  <!-- Group 1 Form Elements -->
</div>
<div id="group2" class="group">
  <!-- Group 2 Form Elements -->
</div>