Ask a Jedi: Can I keep a Flash Form item disabled until I'm ready?

Rich asks:

Is there a way to keep a cfform field "disabled” until it is selected in a cfgrid (assuming it was bound from a querry in the grid to the form field)? So the form field would be activated once the (bound) grid item was selected?

Using Flash forms, you can mark certain fields as being disabled. This means any text in them will not be editable and they will show up in a nice gray color. However, if you want to re-enable the field you have to use a bit of ActionScript. Here is an example:

<cfset data = queryNew("name,age,gender")>
<cfloop index="x" from="1" to="50">
<cfset queryAddRow(data)>
<cfset querySetCell(data,"name","Name #x#")>
<cfset querySetCell(data,"age",randRange(20,40))>
<cfif randRange(0,1) is 1>
<cfset querySetCell(data,"gender","Male")>
<cfelse>
<cfset querySetCell(data,"gender","Female")>
</cfif>
</cfloop>

<cfsavecontent variable="onchange">
if(data.selectedIndex != undefined) {
   name.enabled = true;
} else {
   name.enabled = false;
   name.text = '';
}
</cfsavecontent>

<cfform format="flash" name="foo" width="400" height="400">
   <cfgrid query="data" name="data" onChange="#onchange#"/>
   
   <cfinput type="text" name="name" width="150" bind="{data.dataProvider[data.selectedIndex]['name']}" disabled=true>
</cfform>

Completely ignore the first portion as all it does is create our data. Instead pay attention to the onchange variable. This is run whenever anyone clicks in the grid. The first thing we do is check to see if something was selected. If the user holds their CTRL key down while clicking on an item, it will actually deselect the row, so we check selectedIndex to make sure it actually equals something. If it does, we simply turn on the control. Notice, however, that we say enabled=true in ActionScript, but disabled=true in the cfinput tag.

If there is no selectedIndex, I re-disable the field. Also note the name.text=’’ line. I use this because the value will turn to “undefined” if you deselect a grid row. I could have done some fancy work in my bind as well to handle that, but I was lazy.

Ok, I won’t be lazy. If you want to remove the name.text=’’ line, you can use this binding expression:

{data.selectedIndex!=undefined?data.dataProvider[data.selectedIndex][‘name’]:’’}

Raymond Camden's Picture

About Raymond Camden

Raymond is a developer advocate. He focuses on JavaScript, serverless 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

Comments