(Thanks to Mike for help with these.)
Laying out two drop downs on the right hand side:
So, most simple Flash Forms will use a set of cfinput tags with labels. Out of the box, CFMX7 will nicely lay these out for you with the labels on the left and the form items on the right. But what if you want to put two items in the right hand column? For example, the expiration of a credit card should allow the user to pick a month and a year. By simply using <cfformgroup type="horizontal"> with a label, you can achive this. Here is a code sample:
<cfselect name="ccmonth">
<option value="01">January</option>
<option value="02">February</option>
... deletia ...
<option value="12">December</option>
</cfselect>
<cfselect name="ccyear">
<cfloop index="x" from="0" to="10">
<cfoutput><option value="#year(now())+x#">#year(now())+x#</option></cfoutput>
</cfloop>
</cfselect>
</cfformgroup>
Mask plus Required == Minor Bug
Unfortunately, if you use mask plus required, when the form loads, the field will automatically be marked red. For now, I'm just not using it for required items.
Complex, Conditional Binds
So I'm working on a form that has a confirmation step. The confirmation tab simply redisplays the data from the other two tabs. However - I ran into a problem. When I first started, I tried using cfformitem, type=html, bind=... This worked, but the layout was wierd. There was too much vertical spacing between each item. Plus, it didn't allow me to do things like, hide some text when it was blank. So for example, an address may have a second line for the street. I didn't want a blank line just sitting there. Mike pointed out I could use this type of code in my bind:
{addr2.text.length>0?'
'+addr2.text:''}
What this means is - if the value of addr2 has a length greather than zero, print it with a br in front, if not print nothing.
So this worked fine - but because of the vertical spacing, I needed to put ALL of my bind in one big string. To make this easier, I simply used cfsavecontent:
{'<b>Donation Information</b><br>'}
{firstname.text} {mi.text} {lastname.text}{'<br>'}
{company.text.length>0?company.text+'<br>':''}{addr1.text} {addrx.text} {addr2.text.length>0?'<br>'+addr2.text:''}
{'<br>'}
{city.text}, {state.text} {zip.text}{'<br>'}
{country.text}{'<br>'}
{'Phone: '+phone.text}{'<br>'}
{'Email: '+email.text}{'<br>'}
{'Donation Amount: '+donation.text}{'<br>'}
{'Credit Card: '+creditcard.text}{'<br>'}
{'Card Number: '+ccnumber.text}{'<br>'}
{'Expire Date: '+ccmonth.text+'/'+ccyear.text}{'<br>'}
</cfsavecontent>
This worked well, but the spacing was still off because of the new lines and tabs in the code. So I simply added this:
and finally I passed bind into my cfform item.


Comment 1 written by Eric Moritz on 7 February 2005, at 5:52 PM
--- start: xhtml_cfform.cfm ---
<cfif thistag.ExecutionMode is "end">
<cfset form_xml = thistag.GeneratedContent>
<cfset thistag.GeneratedContent = "">
<cfset dom = xmlparse("<cfform>" & form_xml & "</cfform>")>
<cfset head = xmlsearch(dom,"/cfform/link | /cfform/script")>
<cfset cfform.head = "">
<cfloop to="#ArrayLen(head)#" from="1" index="i">
<cfset cfform.head = cfform.head & REReplace(toString(head[i]),"<\?xml.*?>","")>
</cfloop>
<cfset body = xmlsearch(dom,"//div[@class='cfform']")>
<cfset cfform.body ="">
<cfloop to="#ArrayLen(body)#" from="1" index="i">
<cfset cfform.body = cfform.body & REReplace(toString(body[i]),"<\?xml.*?>","")>
</cfloop>
<cfset result = setVariable("caller.#attributes.return#",cfform)>
</cfif>
--- end: xhtml_cfform.cfm ---
--- Usage ---
<cfsilent>
<cf_xhtml_cfform return="data">
<cfform format="XML">
<cfinput name="name" label="Name">
</cfform>
</cf_xhtml_cfform>
</cfsilent>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitiona...;
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CFFORM XHTML test</title>
<meta name="generator" content="HTML Tidy, see www.w3.org" />
<cfoutput>#data.head#</cfoutput>
</head>
<body>
<cfoutput>#data.body#</cfoutput>
</body>
</html>
Comment 2 written by Eric Moritz on 7 February 2005, at 5:53 PM
--- start: xhtml_cfform.cfm --- &lt;cfif thistag.ExecutionMode is &quot;end&quot;&gt; &lt;cfset form_xml = thistag.GeneratedContent&gt; &lt;cfset thistag.GeneratedContent = &quot;&quot;&gt;
&lt;cfset dom = xmlparse(&quot;&lt;cfform&gt;&quot; &amp; form_xml &amp; &quot;&lt;/cfform&gt;&quot;)&gt; &lt;cfset head = xmlsearch(dom,&quot;/cfform/link | /cfform/script&quot;)&gt; &lt;cfset cfform.head = &quot;&quot;&gt; &lt;cfloop to=&quot;#ArrayLen(head)#&quot; from=&quot;1&quot; index=&quot;i&quot;&gt; &lt;cfset cfform.head = cfform.head &amp; REReplace(toString(head[i]),&quot;&lt;\?xml.*?&gt;&quot;,&quot;&quot;)&gt; &lt;/cfloop&gt;
&lt;cfset body = xmlsearch(dom,&quot;//div[@class='cfform']&quot;)&gt; &lt;cfset cfform.body =&quot;&quot;&gt; &lt;cfloop to=&quot;#ArrayLen(body)#&quot; from=&quot;1&quot; index=&quot;i&quot;&gt; &lt;cfset cfform.body = cfform.body &amp; REReplace(toString(body[i]),&quot;&lt;\?xml.*?&gt;&quot;,&quot;&quot;)&gt; &lt;/cfloop&gt;
&lt;cfset result = setVariable(&quot;caller.#attributes.return#&quot;,cfform)&gt; &lt;/cfif&gt; --- end: xhtml_cfform.cfm ---
--- Usage --- &lt;cfsilent&gt; &lt;cf_xhtml_cfform return=&quot;data&quot;&gt; &lt;cfform format=&quot;XML&quot;&gt; &lt;cfinput name=&quot;name&quot; label=&quot;Name&quot;&gt; &lt;/cfform&gt; &lt;/cf_xhtml_cfform&gt; &lt;/cfsilent&gt; &lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitiona...; &lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&...; &lt;head&gt; &lt;title&gt;CFFORM XHTML test&lt;/title&gt; &lt;meta name=&quot;generator&quot; content=&quot;HTML Tidy, see www.w3.org&quot; /&gt; &lt;cfoutput&gt;#data.head#&lt;/cfoutput&gt; &lt;/head&gt; &lt;body&gt; &lt;cfoutput&gt;#data.body#&lt;/cfoutput&gt; &lt;/body&gt; &lt;/html&gt;
Comment 3 written by Eric Moritz on 7 February 2005, at 5:54 PM
Comment 4 written by Neil on 18 February 2005, at 5:55 PM
Comment 5 written by Neil on 18 February 2005, at 5:59 PM
I have tried using Actionscript, but am such a newbie that I am struggling to figure it out.
Here is what I have tried;
cfform name=user_form action=blah.cfm
cfinput type=submit onclick="user_form.action='users.cfm'"
cfinput type=submit onclick="user_form.action='admins.cfm'"
Thanks,
Neil
Comment 6 written by Raymond Camden on 18 February 2005, at 6:00 PM
Comment 7 written by Rixon Reed on 20 February 2005, at 12:37 PM
Have you been able to control the margins in cfformgroups? I'd like the margins to be 0 and thus the colors flush to their parent containers. Not sure why the following code doesn't work to achieve that result.
<cfform method="get" name="myform" preloader="no" format="flash" height="385" width="600" skin="halogreen" timeout="1000">
<cfformgroup type="panel" style="marginTop: 0; marginBottom: 0;fontSize:18; backgroundColor:##F7FFE8" height="375" visible="yes" enabled="yes" > <!--- Container Panel 1 --->
<cfformgroup type="page" label="Image" style="font-size:10; marginTop: 0; marginBottom: 0; marginLeft: 0; background-color: ##FF0000;" height="165"> <!--- Page 1 --->
<cfformgroup type="horizontal" visible="yes" enabled="yes" style="font-size:10; marginTop: 0; marginBottom: 0; marginLeft: 0; background-color: ##FF9000;" height="140" width="500"> <!--- Horizontal Container --->
<cfformgroup type="vertical" visible="yes" enabled="yes" width="150" height="132" style="font-size:10; marginTop: 0; marginLeft: 0; marginBottom: 0; background-color: ##FF8000;"> <!--- Vertical Left Pane --->
<cfformitem type="html" visible="yes" enabled="yes" width="130" height="130" style="font-size:10; marginTop: 0; marginBottom: 0; marginLeft: 0;">
</cfformitem>
</cfformgroup> <!--- End Vertical Left Pane --->
<!--- Begin Vertical Right Pane --->
<cfformgroup type="vertical" visible="yes" enabled="yes" height="90" width="300">
<cfformitem type="html" style="font-family : 'Verdana, Arial, Helvetica, sans-serif';text-align:left; font-size:10; font-weight:reg; leading:0; verticalGap:0" visible="yes" enabled="yes" name="email"></cfformitem>
</cfformgroup> <!--- End Vertical Right Pane --->
</cfformgroup> <!--- End Horizontal Container --->
</cfformgroup> <!--- End Page --->
<!--- Begin Tab Container --->
<cfformgroup type="tabnavigator" height="195" style="marginTop: 0; marginBottom: 0;fontSize:11; backgroundColor:##F7FFE8">
<cfformgroup type="page" label="Tab" style="font-size:10; marginTop: 0; marginBottom: 0; marginBottom: 0;">
</cfformgroup> <!--- End 1st tab page --->
</cfformgroup> <!--- Page 1 --->
</cfformgroup> <!--- Panel 1 --->
</cfform>
Comment 8 written by Rixon Reed on 20 February 2005, at 12:43 PM
Comment 9 written by Raymond Camden on 22 February 2005, at 9:44 AM
Comment 10 written by mike hohnecker on 23 June 2005, at 6:59 PM
Comment 11 written by eatmorepossum on 13 June 2006, at 1:32 PM
<code>
<cfformitem type="html" name="new" bind="{FirstName.text>0?'yes'+FirstName.text}"></cfformitem>
</code>
Any ideas appreciated
[Add Comment] [Subscribe to Comments]