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

Reading this - cfmlblog.adamcameron.me/2012/10/… - might help you revise your expectations as to how things come together when a browser makes a request etc. — Adam Cameron
– Adam Cameron, Commented Sep 16, 2013 at 20:41

Scott Stroz · Accepted Answer · 2013-09-17 13:08:01Z

5

The way you are trying to do this is not possible.

You cannot call a ColdFusion function by clicking a button without using some kind of http request, such as via AJAX. ColdFusion is server side code, the onclick is client side, without making some kind of request to the server, these two cannot interact with each other.

You would need to either, rewrite the function in JavaScript or rewrite the code to make an AJAX request to run the ColdFusion function.

answered Sep 17, 2013 at 13:08

Scott Stroz

7,5192 gold badges23 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Leigh · Accepted Answer · 2013-09-17 19:19:49Z

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>

Many thanks mate. I am new to ColdFusion. This action makes feel like asp.net where you HAVE by default an ability to run any user-mode code on a server (runat="server" attribute) thru callbacks aka events.

Mandeep Singh · Accepted Answer · 2014-06-30 09:30:16Z

It is not possible to call a coldfusion function on click of HTML element. It is like using coldfusion(sever side language) as client side language. The method you are trying to do will print the value of function inside the html element like this

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

Using #calculateTotal()# inside onclick : Function will be called when the page is loaded, not on click.

If you want to use onclick function using coldfusion instead of javascript/jquery, you could use tag like this-

    <cfsavecontent variable="calculateTotal">
            //your code you want to execute
    </cfsavecontent>

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

Collectives™ on Stack Overflow

How to call a JavaScript function from "ColdFusion button"

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related