(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.
Archived Comments
Yeah, cfform is nice and all but to bad it invalidates our xhtml. I made a quick and dirty fix for it though in the form of a custom tag:
--- 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...">
<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>
ah hell, that sucked... let's try that again...
--- 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... &lt;html xmlns=&quot;http://www.w3.org/1999/xhtm... &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;
Oh well,... email me if you want to see that code.
Please help! I am trying to make a flash form that has multiple submit buttons. Depending on which button is pressed, it would change the cfform tag's "action" attribute. For example, if you click on the "Users" submit, it would change the form's action to "users.cfm", and submit to that page. If you click the "Administrators" submit, it would take you to "administrators.cfm". Etc.
Sorry that I didn't finish that last post. Here is paragraph two:
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
What you want may be possible - but there is a simpler way to do it. Make the form action go to itself. Make the buttons share the same name but have different value. So if the name was submit, you can say, if form.submit is x, cfinclude y, where y does the specific processing. You can also use cflocation - just be sure to store the form results in the session scope so you can still access them.
Raymond, Thanks for the description of how to use conditional AS2 statements with CF7 Flash Form bindings. That's just what I was looking for.
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>
Also, is it possible to control the height of cfformitem input boxes? If I make the font-size smaller than 10, the text appears smaller when input, but the input box remains the same height. Thanks.
Rixon - I'm pretty sure you can do all of this via CSS. The Flash Forms are -very- configurable using CSS. I don't know the exact settings though.
I have radio buttons in my form. One of the radio buttons has to be selected for the bind to work. Any suggestions. No errors are displayed. Just nothing appears till something is selected.
using this syntax doesnt seem to work. When i write the following code, the flashform doesn't load:
<code>
<cfformitem type="html" name="new" bind="{FirstName.text>0?'yes'+FirstName.text}"></cfformitem>
</code>
Any ideas appreciated