Mathijs’ Weblog

As mentioned in my previous post i’m rebuilding an admin environment for AO-online.nl application using all the new cf8 features.

1 of the forms used on this site is rely complex, it is 1 form spread over multiple tabs and 4 other forms in other tabs and using mutliple ajax, binding and JS functions and interdependancies.

This is how it looks:

And:

To achieve this I used this setup:

<cfform action=”" name=”form” method=”post”>
<cflayoutarea title=”MainForm_part1″ name=”tab1″ inithide=”false”>
formfields…
</cflayoutarea>
<cflayoutarea title=”MainForm_part2″ name=”tab2″ inithide=”false”>
formfields…
</cflayoutarea>
<cflayoutarea source=”subform1.cfm” name=”tab3″ inithide=”true” refreshOnActivate=”true” />
<cflayoutarea source=”subform2.cfm” name=”tab4″ inithide=”true” refreshOnActivate=”true” />
<cflayoutarea source=”subform3.cfm” name=”tab5″ inithide=”true” refreshOnActivate=”true” />
<cflayoutarea source=”subform4.cfm” name=”tab6″ inithide=”true” refreshOnActivate=”true” />
</cfform>

On the subform1.cfm pages is also use <cfform></cfform> to show the forms.
I’m also using the ColdFusion.Ajax.submitForm feature.

Now for the issue and the solution:

The issue: This is all working neatly in Firefox, the individual forms post to the backend handler, but in Internet Explorer no data at all is posted, resulting in this form not to work. Also form fields inside the loaded tabs forms are not recognized in IE.

The Solution: Apparently Internet Explorer cannot handle the nested forms that are created using the includes by the cflayout. Form showing it in the browser is it find, but when submitting the forms IE doesn’t understand it anymore. I thing it sees a </form> somewhere and then cannot handle what comes after.

So, this setup is working in both IE and Firefox:

<cfform action=”" name=”form” method=”post”>
<cflayoutarea title=”MainForm_part1″ name=”tab1″ inithide=”false”>
formfields…
</cflayoutarea>
<cflayoutarea title=”MainForm_part2″ name=”tab2″ inithide=”false”>
formfields…
</cflayoutarea>
<cflayoutarea name=”tab3″ inithide=”true” >
formfields…
</cflayoutarea>
<cflayoutarea name=”tab4″ inithide=”true” >
formfields…
</cflayoutarea>
<cflayoutarea name=”tab5″ inithide=”true” >
formfields…
</cflayoutarea>
<cflayoutarea name=”tab6″ inithide=”true” >
formfields…
</cflayoutarea>
</cfform>

I also tried this, but with no results:

<cflayoutarea title=”MainForm_part2″ name=”tab2″ inithide=”false”>
formfields…
</cflayoutarea>
<cflayoutarea name=”tab3″ inithide=”true” >
<cfinclude template=”subform1.cfm”">
</cflayoutarea>
etc…

So, i hope this is valuable information for anyone out there…