A

Anonymous

Question

coldfusion/ajax form value manipulation

Forum|Forum|15 years ago
February 15, 2011
2 replies
1587 views

Hi, I have been trying to learn some CF ajax lately and its going slowly but still going. lol Specifically, I have a very simple application I needed to use ajax with. I have two form fields that the user would input numbers in each. Then each of these numbers would have roughly 4 different calculations performed on them and the results returned and displayed. I have all that working now, but I want this to all be done asynchronously.

Every tutorial on CF ajax so far deals with databases or simple text editing and calling, so I am unsure how to created a function that will perform these calculations and return the results to my page. I have currently one function with all the calculations inside this one function. Not sure if that is even possible so I commented out all but one simple calculation, but that didnt work either.

Obviously I dont know enough about it to know why its not working, so if anyone knows of a tutorial with something specific to what I need, that would be great!.

Again a tutorial that shows how to perform numeric calculations on user defined form inputs, then call the results asynchronously. Thanks for any help!

This topic has been closed for replies.

A

Anonymous

Hi Owain, thought I'd let you know I figured out another way to resolve my issue. Not sure if its the best way, but it works and it works without new page request. Do you see an problems with this approach? What I did was create my form page, then I have a <cfdiv> with the bind attribute. So then the action page performs the calculations, and I use a cfoutput to display the result variables that are displayed asynchronously back on the form page.

<body>
<h2>Ticket Example</h2>
<cfform>
  <cfinput name="lampVoltage" type="text"> Name:<br />
  <cfinput name="socketVoltage" type="text" onChange="">Date:<br />
</cfform>
<cfdiv bind="url:calculationAction.cfm?lampVoltage={lampVoltage}&socketVoltage={socketVoltage}"
       id="dynaDiv" style="background-color:##dddddd;">
</body>

action page:

<cfif url.lampVoltage NEQ "" AND url.socketVoltage NEQ "">
<cfset lampVolts = url.lampVoltage>
<cfset actualVolts = url.socketVoltage>
<!--- Set Constants For Calculations --->
<cfset lumens = 27500>
<cfset life = 500>
<cfset watts = 65>
<cfset colorTemp = 3500>
<!--- Perform Calculations --->
<cfset actualLumens = ((actualVolts/lampVolts)^3.4)*lumens>
<cfset lumenPercent = actualLumens/lumens*100>
<cfset hours = ((lampVolts/actualVolts)^13)*life>
<cfset hourPercent = hours/life*100>
<cfset actualWatts = ((actualVolts/lampVolts)^1.3)*watts>
<cfset wattPercent = actualWatts/watts*100>
<cfset temperature = ((actualVolts/lampVolts)^.42)*colorTemp>
<cfset tempReduction = temperature-colorTemp>
 <cfoutput>
   You have a bulb voltage of #url.lampVoltage# inserted in a socket with #url.socketVoltage# actual volts.
   <h3>#round(lumenPercent)#%</h3> 
   <p><strong>#round(hourPercent)#%</strong> Increase in Rated Life</p>
   <h3>#round(wattPercent)#</h3> 
   <h3>#round(tempReduction)#</h3>
 </cfoutput>
 <cfelse>
   Enter a Lamp voltage and socket voltage to calculate the differences.
</cfif>

One thing I was wondering though. I know in php you can edit the htacces file or something like that that will allow you to run and parse php scripts on a .html page. I was wondering if the same is possible with CF. This application will be residing on a static html site, and would like it to be within the home page, which is an html page. Otherwise I guess I would just create a new cf template and link that to the home page.

Owainnorth

Inspiring

I can only assume Dan either replied to the wrong thread, or is experimenting with hard drugs.

I have a <cfdiv> with the bind attribute. So then the action page performs the calculations, and I use a cfoutput to display the result variables that are displayed asynchronously back on the form page.

Yup this is absolutely fine - the only thing is that using any CF tag requires more processing and a larger page size than doing things manually. It's not a bad place to start, but if you really want to learn it's worth doing it properly. Not necessarily for this project as your solution works perfectly, but it just means you'll never gain the understanding.

in php you can edit the htacces file or something like that that will allow you to run and parse php scripts on a .html page.

You'd need to set this at a webserver level, and the method depends on whether you're running on Windows or Linux. But yes, this is possible but largely pointless.

A

Anonymous

lol Hard drugs may be needed sometimes to deal with us newbies.

Anyway, thanks for the reply and advice. Yes I understand that I still need to work and study so that I can grasp javascript and ajax concepts and languages and thats my desire to do so. I will keep working on this, but for now, and since I needed this little feature rather quickly, I think it will work fine for our needs.

As for the other idea. I think our servers are windows. But I think I'll forget about this idea. It's really no big deal to give users a link to this .cfm page from our home page. My employers home page is WAY to cluttered anyway, so this will clean things up a little.

Thanks again!

Owainnorth

Inspiring

Gotta say I agree with you - sometimes it's easy to find massive complex examples when all you want is something simple, so here's a working example for you to go with. Create a cfc, in this case "test.cfc" in the root folder:

</cfcomponent>

Then in a page, do this:

    function doSomeMaths(){
        var MyFirstNumber = document.getElementById('Field1').value ;
        var MySecondNumber = document.getElementById('Field2').value ;
        var res = oTestComponent.addItUp(MyFirstNumber, MySecondNumber) ;
        alert(res) ;
    }
</script>

Try that, see if that works for you. If there's anything you don't understand I can comment it up for you.

Owainnorth

Inspiring

Also, I really wish Adobe would sort their shanty forums out so the fonts and colouring I used actually showed up.

A

Anonymous

lol yes and they could also fix some other forum "bugs" that are annoying.

Anyway, thats so much for the help! Now, I will say the two input fields are two separate entities. Meaning they wont be added or subtracted from each other, rather their values will be used to find other mathmatical values in some standard equations. Let me show you what I have now thats working, but lacks the ajax functionality, then you can get an idea of what I mean.

Here is my form page code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<cfform action="calculatorAction.cfm">
  <table>
    <tr>
      <th>Lamp Voltage</th>
      <td><cfinput name="lampVoltage" id="lampVoltage" type="text" /></td>
    </tr>
    <tr>
      <th>Socket Voltage</th>
      <td><cfinput name="socketVoltage" id="socketVoltage" type="text" /></td>
    </tr>
    <tr>    
      <td><input type="submit" value="Submit"  /></td>
      <td><input type="reset" value="Reset" /></td>
    </tr>
  </table>
  
</cfform>
</body>
</html>

and here is my action page that has the calculations on it.

<cfparam name="FORM.lampVoltage" type="any" default="1">
<cfparam name="FORM.socketVoltage" type="any" default="1">
<cfparam name="bulbCalculator.cfm" default="0" type="any">
  <!--- Set User Defined Values of Form --->
<cfset lampVolts = FORM.lampVoltage>
<cfset actualVolts = FORM.socketVoltage>
<!--- Set Constants For Calculations --->
<cfset lumens = 27500>
<cfset life = 500>
<cfset watts = 65>
<cfset colorTemp = 3500>
<!--- Perform Calculations --->
<cfset actualLumens = ((actualVolts/lampVolts)^3.4)*lumens>
<cfset lumenPercent = actualLumens/lumens*100>
<cfset hours = ((lampVolts/actualVolts)^13)*life>
<cfset hourPercent = hours/life*100>
<cfset actualWatts = ((actualVolts/lampVolts)^1.3)*watts>
<cfset wattPercent = actualWatts/watts*100>
<cfset temperature = ((actualVolts/lampVolts)^.42)*colorTemp>
<cfset tempReduction = temperature-colorTemp>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<table>
    <tr>
      <td>Lamp Rated Voltage:</td>
      <td><cfoutput>#lampVolts#</cfoutput></td>
    </tr>
    <tr>
      <td>Socket Application Voltage:</td>
      <td><cfoutput>#actualVolts#</cfoutput></td>
    </tr>
    <tr>
      <td>Percent of Lumens Used:</td>
      <td id="lumens"><cfoutput>#round(lumenPercent)#</cfoutput>%</td>
    </tr>
    <tr>
      <td>New Rated life in Percentages:</td>
      <td><cfoutput>#round(hourPercent)#</cfoutput>%</td>
    </tr>
    <tr>
      <td>Percent of Watts Used:</td>
      <td><cfoutput>#round(wattPercent)#</cfoutput>%</td>
    </tr>
    <tr>
      <td>Change in Temperature:</td>
      <td><cfoutput>#round(tempReduction)#</cfoutput>&deg;</td>
    </tr>
  
</table>
<!--- <cfdump var="#FORM#"> --->
</body>
</html>

This code works fine and displays the original form values along with four calculated values.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded