Splitting a form into tabbed pages using dojo

Question

I have a form that as more than a 100 fields across 5 categories of which only 3 fields are necessary and the rest are autofilled or set to default values. Earlier I was using a dijit.TitlePane to split the sections and hide the other remaining sections.

I have now decided to switch to a tabbed model as I would like to distribute my UI more horizontally than vertically. Now when I try to do the same using dijit tabcontainer, the form breaks the tab functionality and all the elements showup in the first tab itself.

Here is my code:

<div id="mainTabContainer" dojoType="dijit.layout.TabContainer" region="center" >
    <form id="${cid}form" dojoType="dijit.form.Form" onSubmit="return false">
    <div class="tabContentSection" dojoType="dijit.layout.ContentPane" title="Section1" selected="true">
        <table>
        <tr>
            [...]
        </tr>

        <tr id="...">
            [...]
        </tr>

        <tr id="...">
            [...]
        </tr>

        <tr>
            [...]
        </tr>

        <tr>
            [...]
        </tr>

        </table>
    </div>

    <div class="tabContentSection" dojoType="dijit.layout.ContentPane" title="Section2">
        <table>
        <tr>
            [...]
        </tr>

        <tr>
            [...]
        </tr>

        </table>
    </div>

    <div class="tabContentSection" dojoType="dijit.layout.ContentPane" title="Section3">
        [More tab content]
    </div>

    <div class="tabContentSection" dojoType="dijit.layout.ContentPane" title="Calendaring">
        [More tab content]
    </div>

    <div class="tabContentSection" dojoType="dijit.layout.ContentPane" title="Section3">
        [More tab content]
    </div>

    <div class="tabContentSection" dojoType="dijit.layout.ContentPane" title="Section4">
        [More tab content]
    </div>
    </form>
</div>

Now, if I remove the form tags, the tabs show up fine. Can someone help me out of this?

Answer 1

Have you tried the following approach?

<form id="${cid}form" dojoType="dijit.form.Form" onSubmit="return false">
   <div id="mainTabContainer" dojoType="dijit.layout.TabContainer" region="center" >
      <div class="tabContentSection" dojoType="dijit.layout.ContentPane" title="Section1" selected="true">
         ...
      </div>
      ...
   </div>
</form>

I am guessing that the parser is failing to build the TabContainer because it expect to see a bunch of ContentPanes but is finding a Form. The form should function the same once moved outside the TabContainer.

Answer 2

Putting the form above did work but since it was in turn inside a bordercontainer, the UI was still not proper. The fix then was to put the form inside a contentpane and that inside the bordercontainer.