how to submit a form split over several tabs?

[raphinou]

Hi,

I have a form split over several tabs in a BasicDialog (with autoTabs set to true). and I can't submit it. Can someone point me in the right direction? This is the markup used:

<form action="/app/session/set_filter" name="filter-form" id="filter-form">
    <div class="ydlg-tab" title="User">
        User:<select name="filter_user" multiple="multiple"><option value="nil">All</option><option value="user1">User One</option><option value="user2">User Two</option></select>
    </div>
    <div class="ydlg-tab" title="Group">
        Group:<select name="filter_group" multiple="multiple"><option value="nil">All</option><option value="group1">Group 1</option><option value="group2">Group 2</option></select>
    </div>
    <div class="ydlg-tab" title="Type">
        Type:<select name="filter_type" multiple="multiple" ><option value="nil">All</option><option value="urgent">Urgent</option><option value="express">Express</option></select>
    </div>
    <div class="ydlg-tab" title="Dates">
        Between:<input size="10" type="text" name="filter_from"></input> and <input size="10" type="text" name="filter_to"></input>
    <input type="submit"></input>
    </div>
</form>

In the dom I see the form (with no child) under a div with class "ydlg-bd ytabs-top".

Thanks in advance.

Raph

[Animal]

The way to do this is to create your BasicDialog with a body element which IS a form.

var d = new Ext.BasicDialog("myDlgContainer", {
    autoCreate: {
        tag: "div", id:"myDlgContainer", children: [ {
            tag: "div" }, {
            tag: "form", name: "theForm", action: "/foo/bar.do", method:"POST"} , {
            tag: "div"
        } ]
    }
});

Or, the equivalent HTML markup if that's how you're creating the dialog.

That way, all your Tab containers will be inside a form.

[raphinou]

That's working indeed. Thanks very much for the fast answer!

Raph

[cdomigan]

Animal, the autoCreate config you suggest is not creating the correct markup for me. I get:

<div />
<form ...... />
<div />
... The rest of the dialog (tabs etc) ....

So the tabs are not being created in the form.

Any ideas?

EDIT: The Dialog doesn't seem to want to use <div /><form /><div /> as the header, body and footer respectively. Instead it's creating its own after that markup.

[tryanDLS]

I'm guessing based on the date of Animal's post that was a solution based on .33 code. The ctor of BasicDialog has changed some in 1.0. If you're going to autocreate a complex dialog, you have to add the css class names to the appropriate elements you create b/c the code looks for them to determine header,footer,body. If it doesn't find the class names it adds the divs. You'll have to look at the code to see what I mean if you want to pursue that approach.