Can a form span multible tabs or accordion panels?

[andyj]

I have a large form and want it to span across multiple tabs.
It's easy enough to position the Save and Cancel buttons above the tab set.
Problem is the form is only populated with data on the first tab.

I have tried creating a set of nested tabs and whether I place my <form></form> inside or outside the tabs, the best that can be achieved is to have the form on one tab panel only.

It is possible to spread a large form across several accordion panels provided the opening and closing form tags <form></form> remain outside the opening and closing accordion divs.

Is there any way of spanning a form across multiple tabs?

[reems]

Hello Andyj,

Can you show your script for form plus tabs to check what goes wrong?

I am using forms with tabs and have no problems with them. Loading and saving data works fine.

Reems

[andyj]

Hi Reems

Do you have one form per tab?
Or one form spread across several tabs?
No problem with one form per tab but when spreading parts of a single form over multiple tabs I could only load data into the first tab?
What was your experience?

[reems]

Hi Andyi,

Sorry for the late reply. I have been too busy with my work.

I have indeed one form with several tabs. See the attachment for a screenshot.
These works perfect, no problems.

A form with two tabs could look like this:

Code:

<script>
$("#w").html("<form id=\"rpf\" method=\"post\">  
<input type=\"hidden\" name=\"formid\" value=\"plan\"></input>   
<div id=\"formtabs\" class=\"easyui-tabs\" style=\"width:560px;height:400px; border-style: outset;\">  
	<div title=\"Tabtitle1\" style=\"padding:10px;\">
		your fields in tab1
	</div>
	<div title=\"Tabtitle2\" style=\"padding:10px;\">
	your fields in tab2
	</div>
</div>
	<div id=\"submit1\" 
		style=\"text-align: right; float:right; padding: 5px 10px 0px 0px;\">
		<a href=\"javascript:void(0)\" 
		class=\"easyui-linkbutton\" 
		onclick=\"submitForm()\">Opslaan</a></div>
</form>");

$('#w').window('setTitle','Yourformtitle');
$.parser.parse('#w');
$.parser.parse('#formtabs');
</script>

To be able to load above form in a modal window as I did, in your basic html page, you should have by example:

Code:

<div id="w" class="easyui-window" title="Modal Window" data-options="maximizable:false,resizable:false,modal:true,closed:true,minimizable:false,collapsible:false" style="width:600px;height:500px;padding:10px;">   
    </div>

The following script I use for loading the data after a gridrow is selected (the gridid and formid variables are there because I use standard functions that can handle all the forms in my application):

Code:

<script>
function edit(gridid)
          {
           var row = $('#grid1').datagrid('getSelected');
           var formid = gridid;  
            if (row){
              console.log(row.id);
              $('#w').window('open');
              $('#rpf').form('load','rp/getformdata.php?formid=' + formid + '&id=' + row.id);
              }
            else{noRowSelect();}
          }
</script>

Posting the form is normal. no extra things because of the tabs.

Hope this helps.

Reems

[andyj]

Hi Reems

Thanks very much for your detailed response.
Just got back off holiday so will have a look at this with interest over the next few days.
Thanks for taking the time. Appreciated.

Bedankt

Andy

[acreonte82]

I found a solution to have a form in each tab.
But you have to implement a js function to serialize your form data and then post to your php file.

If you want I post my code