You can use ActionScript in the following attribute of tags in CFML Flash format forms:

• Form and control events, such as the onSubmit attribute of the cfform tag, or the onChange and onClick attributes of the cfinput tag. The attribute description on the tag reference pages in the CFML Reference list the event attributes.

• Bind expressions, which you can use to set field values. For more information on binding data, see Binding data in Flash forms.

  Your ActionScript code can be inline in the form attribute specification, you can make a call to a custom function that you define, or you can use the ActionScript include command in the attribute specification to get the ActionScript from a .as file.

  The following example shows a simple Fahrenheit to Celsius converter that does the conversion directly on the client, without requiring the user to submit a form to the ColdFusion server.

  <cfform format="flash" width="200" height="150"> 
      <cfinput type="text" name="fahrenheit" label="Fahrenheit" width="100" 
          value="68"> 
      <cfinput type="text" name="celsius" label="Celsius" width="100"> 
      <cfinput type="button" name="convert" value="Convert" width="100" 
          onClick="celsius.text = Math.round((farenheit.text-32)/1.8*10)/10"> 
  </cfform>

  Note: You do not use the text property (for example, fieldname.text) to access hidden fields. To access a hidden field, use the format formname.fieldname = 'value'.

Custom ActionScript functions are the equivalent of CFML UDFs. You can define your own functions in ColdFusion by using the cfformitem tag with a type attribute value of script, or you can define the functions in an ActionScript (.as) file. Also, ColdFusion includes a small number of predefined custom ActionScript functions that you can use in your Flash form controls.

You can use the following custom functions in the ActionScript for all form controls to reset or submit the form:

• resetForm()

• submitForm()

You can use the following custom functions in cfgrid tags only to insert and delete rows in the grid:

• GridData.insertRow(gridName)

• GridData.deleteRow(gridName)

The following example shows how you can use the two GridData functions to add custom buttons that add and delete rows from a Flash form. These buttons are equivalent to the buttons that ColdFusion creates if you specify insert="yes" and delete="yes" in the cfgrid tag, but they allow you to specify you own button text and placement. This example puts the buttons on the side of the grid, instead of below it and uses longer than standard button labels.

<cfform format="flash" height="265" width="400"> 
    <cfformitem type="html"> 
        You can edit this grid as follows: 
        <ul> 
        <li>To change an item, click the field and type.</li> 
        <li>To add a row, click the Insert Row button and type in the fields  
            in the highlighted row.</li> 
        <li>To delete a row, click anywhere in the row and click the  
            Delete Row button</li> 
        </ul> 
        <p><b>When you are done, click the submit button.</b></p> 
    </cfformitem> 
    <!--- The hbox aligns the grid and the button vbox horizontally ---> 
    <cfformgroup type="hbox" style="verticalAlign:bottom; 
            horizontalAlign:center"> 
        <!--- To make all elements align properly, all of the hbox children must 
            be containers, so we must put the cfgrid tag in a vbox tag. ---> 
        <cfformgroup type="vbox"> 
            <!-- An editable grid with hard coded data (for simplicity). 
                By default, this grid does not have insert or delete buttons. ---> 
            <cfgrid name="mygrid" height="120" width="250" selectmode="edit"> 
                <cfgridcolumn name="city"> 
                <cfgridcolumn name="state"> 
                <cfgridrow data="Rockville,MD"> 
                <cfgridrow data="Washington,DC"> 
                <cfgridrow data="Arlington,VA"> 
            </cfgrid> 
        </cfformgroup> 
        <!--- Group the Insert and Delete buttons vertically;  
                use a vbox to ensure correct alignment. ---> 
        <cfformgroup type="vbox" name="buttons"style="verticalAlign:bottom; 
                horizontalAlign:center"> 
            <!--- Use a spacer to position the buttons. ---> 
            <cfformitem type="spacer" height="18" /> 
            <!--- Use the insertRow method in the onClick event to add a row. ---> 
            <cfinput type="button" name="ins" value="Insert a new row" width="125" 
                onClick="GridData.insertRow(mygrid);"> 
            <!--- Use the deleteRow method in the onClick event to delete 
                the selected row ---> 
            <cfinput type="button" name="del" value="Delete selected row" 
                    width="125" onClick="GridData.deleteRow(mygrid)">  
            <cfinput type="submit" name="f1" value="Submit" width="125"> 
        </cfformgroup> 
    </cfformgroup> 
</cfform> 
 
<!--- Dump the form if it has been submitted. ---> 
<cfif IsDefined("form.fieldnames")> 
<cfdump var="#form#"><br> 
</cfif>