Getting form data from cflayout based tabs

This post is more than 2 years old.

This was a question sent in almost a week ago that I didn't chance to look at till tonight. The reader, Joe, had set up a cflayoutarea based tab display of forms. However, he noticed that when the forms were inline, there was a quick 'flash' on display where the items in the second and latter tabs were shown briefly on screen. When he switched to source= for the tabs, things worked fine, but he wasn't sure how to set the form up.

Remember that when source= is used in the tabs, the actual content isn't loaded into you select the tab. This means it's possible for some of the fields to actually not even exist.

I wasn't really sure how it would work, but I tried the following code. First, the code to render the tabs:

<cflayout type="tab"> <cflayoutarea title="Tab 1" source="form1.cfm"> </cflayoutarea> <cflayoutarea title="Tab 2" source="form2.cfm"> </cflayoutarea> </cflayout>

form1.cfm contains:

<form> 1a <input type="text" id="field1a" name="field1a" /><br/> 1b <input type="text" id="field1b" name="field1b" /><br/>

<input type="button" value="Send Data" onClick="handleForm()"> </form>

As you can see, just a simple form with 2 text fields. I made sure to use IDs for each. form2.cfm was much the same:

<form> 2a <input type="text" id="field2a" name="field2a" /><br/> 2b <input type="text" id="field2b" name="field2b" /><br/> </form>

Going back to form1, note that my button ran handleForm. This is the JavaScript I used:

<script> function handleForm() { console.log('ran'); var v1 = ''; var v2 = ''; var v3 = ''; var v4 = '';
if(document.getElementById('field1a') != null) v1 = document.getElementById('field1a').value;
if(document.getElementById('field1b') != null) v2 = document.getElementById('field1b').value;
if(document.getElementById('field2a') != null) v3 = document.getElementById('field2a').value;
if(document.getElementById('field2b') != null) v4 = document.getElementById('field2b').value;
console.log('v1='+v1);
console.log('v2='+v2);
console.log('v3='+v3);
console.log('v4='+v4);

} </script>

So all I did was use document.getElementById(). Code I'd use normally (although with shorter syntax in jQuery) to get DOM values. I guess it is kind of a no-brainer that this works, but I think I thought it would be a bit different with content loaded in via Ajax (the 2 forms). All those IF statements simply look for null fields. The items in the second tab will be null if you don't load the tab. In theory, tab 1 will never be null, but I figured it wouldn't hurt to double check for all the fields.

At this point you can just submit the data with ColdFusion.Ajax.submitForm, or whatever else you want to do with the data.

Again - this is probably obvious, but I had not done it before.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Neil Bailey posted on 11/29/2008 at 9:54 AM

Ray,

just a quick note to save you a bit of typing (if you have dozens/hundreds of fields, it can add up), you don't need the !=null - its implied.

I usually do something like the following:

var $get=document.getElementById;

if ($get('SomeFieldName')) do something;

you can also do the opposite:

if (!$get('SomeFieldName')) do something....

Comment 2 by Raymond Camden posted on 11/29/2008 at 10:08 AM

Good point. And not that it was intended, but thanks for the shortcut with $get. When I'm not using jQuery and just doing CF8 Ajax stuff, I think Ill start using that.

Comment 3 by Neil Bailey posted on 11/29/2008 at 10:52 AM

I always use little shortcuts like that - I usually have literally hundreds of fields, and it can be a REAL pain in the behind.

I also use var $form=document.SomeFormName; to shortcut the form... but $get has saved me literally THOUSANDS of typed chars...

Comment 4 by Regina posted on 4/11/2009 at 2:26 AM

Hi Ray, I have 2 sets of CFLAYOUT tabs. The first had inline code. The other had had a source attributes. I do know why it takes forever for the screen to load. Help!

Comment 5 by Raymond Camden posted on 4/11/2009 at 5:07 PM

Could be anything. Hard to say with the information you've given so far.

Comment 6 by Regina posted on 4/12/2009 at 4:09 AM

Hi Ray,

Here's my code: It take about 5-10 seconds for the whole thing to load. I have just upgraded my JRE but I have not seen any significant change in loading time.

<cfajaximport tags = "cfform,cfgrid">
<cfform method="post" name="myform" action="index.cfm" enctype="multipart/form-data" onsubmit="return chkFields();">
<table width="100%">
<tr>
<td><label>Field 1</label></td>
<td>
<cfselect name="field1">
<option value=""></option>
<cfoutput query="getFieldList">
<option value="#optionvalue#">#optiondesc#</option>
</cfoutput>
</cfselect>
</td>

<td><label>Field 2</label></td>
<td>
<cfselect
name="field2"
value="field2_id"
bind="cfc:getField2({field1})"
display="field2_desc"
bindonload="true"
style="width:350px;"
>
<option value=""></option>
</cfselect>
</td>
</tr>
<tr>
<td><label>Type</label></td>
<td>
<cfselect
name="field3"
value="field3_id"
bind="cfc:getField3({field1},{field2})"
display="field3_desc"
>
<option value=""></option>
</cfselect>
</td>
<td><label>Field 4</label></td>
<td>
<cfselect
name="field4"
value="field4_id"
bind="cfc:getField4({field3})" style="width:350px;"
display="field4_desc"

>
<option value=""></option>
</cfselect>
</td>
</tr>
<tr>
<td>
<label>Field 5</label></td>
<td style="z-index:20000; position:relative;">
<cfinput type="text" name="field5" autosuggest="cfc:getField5({field1},{cfautosuggestvalue})" size="50" >
</td>
<td><label>Field 6</label></td>
<td style="z-index:0; position:relative;" colspan="3">
<cfselect name="field6"
value="field6_id"
display="field6_desc"
bind="cfc:getField6({field1},{field3},{field5})"

style="width:350px;"

>
<option value=""></option>
</cfselect>
</td>
</tr>

</table>

<cflayout type="tab" name="formTab" tabHeight="170" >
<cfif request.ActiveFormTab eq "tab1a"><cfset isSelected = "true"><cfelse><cfset isSelected="false"></cfif>
<cflayoutarea title="Tab 1" name = "tab1a" selected="#isSelected#">
<cftextarea richtext="true" name="richText1" toolbar="Basic" height="100" validate="noblanks"/>
</cflayoutarea>
<cfif request.ActiveFormTab eq "tab2a"><cfset isSelected = "true"><cfelse><cfset isSelected="false"></cfif>
<cflayoutarea title="Tab 2" name = "tab2a" selected="#isSelected#">
<cftextarea richtext="true" name="richText2" toolbar="Basic" height="100" validate="noblanks"/>
</cflayoutarea>
<cfif request.ActiveFormTab eq "tab3a"><cfset isSelected = "true"><cfelse><cfset isSelected="false"></cfif>
<cflayoutarea title="Tab 3" name = "tab3a" selected="#isSelected#">
<cfinclude template="tab3.cfm">
</cflayoutarea>
<cfif request.ActiveFormTab eq "tab4a"><cfset isSelected = "true"><cfelse><cfset isSelected="false"></cfif>
<cflayoutarea title="Tab 4" name = "tab4a" selected="#isSelected#">
<cfinclude template="tab4.cfm">
</cflayoutarea>
<cfif request.ActiveFormTab eq "tab5a"><cfset isSelected = "true"><cfelse><cfset isSelected="false"></cfif>
<cflayoutarea title="Tab 5" name = "tab5x" selected="#isSelected#">
<cfinclude template="tab5.cfm">
</cflayoutarea>
<cfif request.ActiveFormTab eq "tab6a"><cfset isSelected = "true"><cfelse><cfset isSelected="false"></cfif>
<cflayoutarea title="Tab 6" name = "tab6a" selected="#isSelected#" >
<cfinclude template="tab6.cfm">
</cflayoutarea>
<cfif request.ActiveFormTab eq "tab7a"><cfset isSelected = "true"><cfelse><cfset isSelected="false"></cfif>
<cflayoutarea title="Tab 7" name = "tab7a" selected="#isSelected#">
<cfinclude template="tab7.cfm">
</cflayoutarea>
</cflayout>
<cfinput type = "submit" name="btnSubmit" value="Update">
<cfinput type = "button" name="btn1" value="Button 1">
<cfinput type = "button" name="btn2" value="Button 2">
<cfinput type = "button" name="btn3" value="Button 3">

</cfform>

<cflayout type="tab" name="MyTabLayout">
<cfif request.ActiveTab eq "tab1"><cfset isSelected = "true"><cfelse><cfset isSelected="false"></cfif>
<cflayoutarea title="Tab 1" name = "tab1" selected="#isSelected#" source="index.cfm?fuseaction=tab1" refreshonActivate="true" />
<cfif request.ActiveTab eq "tab2"><cfset isSelected = "true"><cfelse><cfset isSelected="false"></cfif>
<cflayoutarea title="Tab 2" name = "tab2" selected="#isSelected#" source="index.cfm?fuseaction=tab2" refreshonActivate="true" />
<cfif request.ActiveTab eq "tab3"><cfset isSelected = "true"><cfelse><cfset isSelected="false"></cfif>
<cflayoutarea title="Tab 3" name = "tab3" selected="#isSelected#" source="index.cfm?fuseaction=tab3" refreshonActivate="true" />
<cfif request.ActiveTab eq "tab4"><cfset isSelected = "true"><cfelse><cfset isSelected="false"></cfif>
<cflayoutarea title="Tab 4" name = "tab4" selected="#isSelected#" source="index.cfm?fuseaction=tab4" refreshonActivate="true" />
<cfif request.ActiveTab eq "tab5"><cfset isSelected = "true"><cfelse><cfset isSelected="false"></cfif>
<cflayoutarea title="Tab 5" name = "tab5" selected="#isSelected#" source="index.cfm?fuseaction=tab5" refreshonActivate="true" />
<cfif request.ActiveTab eq "tab6"><cfset isSelected = "true"><cfelse><cfset isSelected="false"></cfif>
<cflayoutarea title="Tab 6" name = "tab6" selected="#isSelected#" source="index.cfm?fuseaction=tab6" refreshonActivate="true" />
</cflayout>

Comment 7 by Raymond Camden posted on 4/13/2009 at 5:54 AM

I assume you have timed the various parts of the page? I assume you have used Firebug to look at the Ajax based requests to see if one is slower than the others? If not - you know what to do. :)