How to call a JavaScript function from "ColdFusion button"

Question

I have a prototype function. I would like to wrap it around function tag and then call it from a button in a cfform. Is it possible to do it? and how would I do it?

I tried this, but I got an error said the array is not defined. All Helps are appreciated.

<cfscript >
    function calculateTotal(){
        var Price = Array();
        var Quantity = Array();
            $$('.x-grid3-col-PRICE').each(function(el){Price[Price.length] = el.innerHTML; });
            $$('.x-grid3-col-QUANTITY').each(function(el){Quantity[Quantity.length] = parseInt(el.innerHTML); });

        var Totals = 0;
        for (var index = 0; index < Price.length; ++index) {
            if (!isNaN(Price[index]) && !isNaN(Quantity[index]))
             {
             Totals =  Totals + (Price[index] * Quantity[index]);
                    }

                }
        $('total').value = Totals;
       return true;
    }
    </cfscript>

<cfform>
     <cfinput type="Button" name="submit" value="Calculate Order" onclick="#calculateTotal()#">
    <cfinput type="Text" name="total" disabled="true" label="Total $" size="5">
</cfform

Answer 1

So After reading the article of Adam Cameron, I found a way to work the problem. Instead of wrapping the function in a <cfscript> tag, I wrapped it with <cfsavecontent>. Just in case someone out there looking for same question, here is how I did it.

Basically, I put the javascript function code in the cfsavecontent tag with a variable, so when the server talk to CMFL, it only passes on the variable "calculatetotal" in the compilation.

<cfsavecontent variable="calculateTotal">
        var Price  = Array();
        var Quantity = Array();
            $$('.x-grid3-col-PRICE').each(function(el){Price[Price.length] = el.innerHTML; });
            $$('.x-grid3-col-QUANTITY').each(function(el){Quantity[Quantity.length] = parseInt(el.innerHTML); });

        var Totals = 0;
        for (var index = 0; index < Price.length; ++index) {
            if (!isNaN(Price[index]) && !isNaN(Quantity[index]))
             {
             Totals =  Totals + (Price[index] * Quantity[index]);
                    }

                }
        $('total').value = Totals;
       return true;
</cfsavecontent>


<cfform name="display" format="html">
         <cfgrid name= "cart" query="getdtls" selectmode="edit"  width="580" format="html">
            <cfgridcolumn name="chargename" header="Charge Type" dataalign="right" select="No" >
            <cfgridcolumn name="price" header="price"type="numeric"  dataalign="right" select="No" >
            <cfgridcolumn name="quantity" header="Quantity" type="numeric"  dataalign="right"  >               
        </cfgrid>
       <cfinput type="Button" name="calculateBtn" value="Calculate Order" onclick="#calculateTotal#">
       <cfinput type="Text" name="total" disabled="true" label="Total $" size="5">

    </cfform>