Solved

Calculate input fields and bind

Posted on 2006-07-11
8
532 Views
Last Modified: 2013-12-24
I'd like to be able to add up multiple input fields and have it do the calculation as I type

<cfinput label="IN:" type="text" name="InTime1" validate="time" value="#TimeFormat(employee.in1, "HH:mm")#" width="60">
<cfinput label="OUT:" type="text" name="OutTime1" validate="time" value="#TimeFormat(employee.out1, "HH:mm")#" width="60">
<cfformitem type="hrule"/>
<cfinput label="IN:" type="text" name="InTime2" validate="time" value="#TimeFormat(employee.in2, "HH:mm")#" width="60">
<cfinput label="OUT:" type="text" name="OutTime2" validate="time" value="#TimeFormat(employee.out2, "HH:mm")#" width="60">


and then the field they would be adding into would be something like:
<cfinput type="text" name="Total" bind="#form.intime1# + #form.outime1#..." label="Total:">
0
Comment
Question by:g127404
  • 5
  • 2
8 Comments
 
LVL 3

Expert Comment

by:siva350
ID: 17085948
you would have to use javascript for this.

here is a script I found that you could modify:

<html>
<head>
<title>Calculator Exemple</title>
<style type="text/css">
fieldset{border:2px #000 solid;padding:1em;}
legend{font-weight:700}
table{margin-left:1em}
td{padding:0.4em;vertical-align:top;font-size:0.9em}
#result{border:thin #fff solid;color:green;font-weight:700;}
</style>
<script type="text/javascript">
//-----------------------------------------------------------------
function Calculator(){ this.articles={}; }
Calculator.prototype.addArticle = function (art){
this.articles[art.name]=art;
}
Calculator.prototype.getTotal = function(){
var total = 0;
for(var ii in this.articles)
total += this.articles[ii].getValue();
return total;
}
Calculator.prototype.getArticle = function(s){
return this.articles[s] || null;
}
//-----------------------------------------------------------------
function Article(name, price, quantity){
this.name = name;
this.price = price || 0;
this.quantity = quantity || 0;
}
Article.prototype.getValue = function(){
return this.price * this.quantity;
}
Article.prototype.setQuantity = function(q){ this.quantity = q; }
//-----------------------------------------------------------------
var myCalculator = new Calculator();
myCalculator.addArticle(new Article("Arrows", 10, 0));
myCalculator.addArticle(new Article("Deku Seeds", 5, 0));
myCalculator.addArticle(new Article("Biggoron Sword", 200, 0));
myCalculator.addArticle(new Article("Din's Fire", 70, 0));
myCalculator.addArticle(new Article("Farore's Wind", 50, 0));
//-----------------------------------------------------------------
function calculate(button){
var
frm=button.form,
qArrows=frm.elements["artArrows"].value,
qDekuSeeds=
+ frm.elements["artDekuSeeds"].options[
frm.elements["artDekuSeeds"].selectedIndex].value,
qBiggoronSword=frm.elements["artBiggoronSword"].checked ? 1 : 0,
qDinsFire=frm.elements["artMagics"][0].checked ? 1 : 0,
qFaroresWind=frm.elements["artMagics"][1].checked ? 1 : 0;

qArrows = /^\d+$/.test(qArrows) ? + qArrows : 0

myCalculator.getArticle("Arrows").setQuantity(qArrows);
myCalculator.getArticle("Deku Seeds").setQuantity(qDekuSeeds);
myCalculator.getArticle("Biggoron Sword").
setQuantity(qBiggoronSword);
myCalculator.getArticle("Din's Fire").setQuantity(qDinsFire);
myCalculator.getArticle("Farore's Wind").
setQuantity(qFaroresWind);

frm.elements["result"].value = myCalculator.getTotal() + "r";
}
</script>
</head>
<body>
<form action="whatever.foo" onsubmit="return false">
<fieldset>
<legend>Articles</legend>
<p>Please select your articles and quantities below.</p>
<table cellspacing="0">
<tr>
<td><label for="artArrows">Arrows (10r)</label></td>
<td>
<input type="text" id="artArrows" name="artArrows"
value="10" onblur="calculate(this)">
</td>
</tr>
<tr>
<td><label for="artDekuSeeds">Deku Seeds (5r)</label></td>
<td>
<select name="artDekuSeeds" id="artDekuSeeds"
onchange="calculate(this)">
<option value="0">0</option>
<option value="10">10</option>
<option value="20">20</option>
</select>
</td>
</tr>
<tr>
<td>
<label for="artBiggoronSword">
Do you want the Biggoron Sword (200r)?
</label>
</td>
<td>
<input name="artBiggoronSword" id="artBiggoronSword"
value="YES_I_WANT_THE_BIGGORON_SWORD"
type="checkbox" checked="checked"
onclick="calculate(this)">
</td>
</tr>
<tr>
<td rowspan="2">Magics</td>
<td>
<input type="radio" name="artMagics" id="artDinsFire"
value="artDinsFire_1" checked="checked"
onclick="calculate(this)">
<label for="artDinsFire">Din's Fire (70r)</label>
</td>
</tr>
<tr>
<td>
<input type="radio" name="artMagics" id="artFaroresWind"
value="artFaroresWind_1" onclick="calculate(this)">
<label for="artFaroresWind">Farore's Wind (50r)</label>
</td>
</tr>
<tr>
<td>
<input type="button" value="Calculate!"
onclick="calculate(this)">
</td>
<td>
<input type="text" name="result"
id="result" readonly="readonly">
</td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
0
 
LVL 4

Author Comment

by:g127404
ID: 17086063
As much as I appreciate any responses... I've spent plenty of time trying to configure javascript calculators to work in my own code.  I'm a newbie at javascript and would rather not wade through all of that to find the one or two important functions I need.  I'd also like a specific coldfusion answer.  I know that javascript will be part of it but binding the calculated answer is also key.

Thanks
0
 
LVL 3

Expert Comment

by:siva350
ID: 17086215
THe problem is that coldfusion cannot do what you are asking without using AJAX or some other form of Javascript. WHat it seems to me you are trying to do is get the diffrence of hours and add them togeather. The problem is without submiting the form or using Javascript you cannot process any coldfusion code. Maybe you should look into cfajax and ask your question in the JS forum. THe problem is without AJAX the coldfusion code will run before the Javascript even gets parsed.
0
 
LVL 4

Author Comment

by:g127404
ID: 17086357
I'm fine with using javascript or Ajax, I'd rather not get into another learning curve.  I'll look into Ajax and see if I can find a solution.
I thought I could get an easy script such as: (form.input1 + form.input2) = mytotalvariable
which I could bind to.
0
Complete VMware vSphere® ESX(i) & Hyper-V Backup

Capture your entire system, including the host, with patented disk imaging integrated with VMware VADP / Microsoft VSS and RCT. RTOs is as low as 15 seconds with Acronis Active Restore™. You can enjoy unlimited P2V/V2V migrations from any source (even from a different hypervisor)

 
LVL 4

Author Comment

by:g127404
ID: 17086365
If I ask this in the java forum I'll get java specific answers which I'm not sure how to tie back into Coldfusion <cfinput>
0
 
LVL 4

Author Comment

by:g127404
ID: 17125896
Anyone else?
0
 
LVL 3

Accepted Solution

by:
bhinshawnc1 earned 500 total points
ID: 17127135
I think this is what you're looking for. Replace the input values with 0 to avoid NaN in the fields when it opens.

onBlur updates it as you go or the button can be clicked. Then in your update statement you just refer back to the form fields to update the table. Not sure how you have those fields setup so you may have to tweak something in your db tables

<form>

in 1<input id="intime1" value="6:00 am"><br>
out 1<input id="outtime1" value="8:00 pm" ><br>
lunch 1 (minutes)<input id="lunchtime1" value="0" onBlur="process();"><br>
total 1<input id="total_one" onChange="process();"><br>
<br><br>
in 2<input id="intime2" value="6:00"><br>
out 2 <input id="outtime2" value="20:00"> (showing we can take am/pm or military time entry) <br>
lunch 2 (minutes)<input id="lunchtime2" value="0" onBlur="process();"><br>
total 2<input id="total_two" onChange="process();"><br>
<br><br>
totals
hrs <input id="hrs" value="">
mins <input id="mins" value="">
sum time <input id="time_sum" value="">
<br>

<button onclick="process(); ">get total</button>

</form>

<script language="javascript">
function process()
{
     var intime1 = new Date('1/1/2000 '+document.getElementById('intime1').value);     // clock in input box
     var outtime1 = new Date('1/1/2000 '+document.getElementById('outtime1').value);     // clock out input box
 
     // if removing  lunch time from calc take out next var and in diff1 calc "-(lunchtime1*1000*60)"
       var lunchtime1 = parseInt(document.getElementById('lunchtime1').value);     // lunch time input box
       var diff1  = (outtime1-intime1-(lunchtime1*1000*60))/1000/60;     // time in minutes
     var hrs1   = Math.floor(diff1/60);
     var mins1  = diff1-(hrs1*60);
     document.getElementById('total_one').value=(hrs1+':'+(mins1<10?0:'')+mins1);  // input box for 'total1'

      
     var intime2 = new Date('1/1/2000 '+document.getElementById('intime2').value);     // clock in input box
     var outtime2 = new Date('1/1/2000 '+document.getElementById('outtime2').value);     // clock out input box
     var lunchtime2 = parseInt(document.getElementById('lunchtime2').value);     // lunch time input box

     var diff2  = (outtime2-intime2-(lunchtime2*1000*60))/1000/60;     // time in minutes
     var hrs2   = Math.floor(diff2/60);
     var mins2  = diff2-(hrs2*60);
     document.getElementById('total_two').value=(hrs2+':'+(mins2<10?0:'')+mins2);  // input box for 'total2'

//repeat for as many totals as needed


//alert('diff1'); // use to alert you are about to see diff1 in seconds
//alert(diff1); //show diff1 value
//alert('diff2'); // use to alert you are about to see diff2 in seconds
//alert(diff2); //show diff1 value

// add more to this line if you added more inputs above
var diff_total = (diff1+diff2); //sum it up

//alert(diff_total); // show diff_total in seconds
var hours_total = Math.floor(diff_total/60); // convert to hours
//alert(hours_total); //show hours
var mins_total = diff_total-(hours_total*60); // now how many minutes left
//alert(mins_total); // show minutes

document.getElementById('hrs').value=hours_total; // write to form input fields with same name - case sensitive!
document.getElementById('mins').value=mins_total;
document.getElementById('time_sum').value=(hours_total+':'+(mins_total<10?0:'')+mins_total); // show it in one box
}
</script>





0
 
LVL 4

Author Comment

by:g127404
ID: 17131639
The Get Total button actually wipes out all the results and returns it default, but I can work on that.  The general operation was what I was looking for.

Thanks for your help.  Great job.
0

Featured Post

Comprehensive Backup Solutions for Microsoft

Acronis protects the complete Microsoft technology stack: Windows Server, Windows PC, laptop and Surface data; Microsoft business applications; Microsoft Hyper-V; Azure VMs; Microsoft Windows Server 2016; Microsoft Exchange 2016 and SQL Server 2016.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction This article explores the design of a cache system that can improve the performance of a web site or web application.  The assumption is that the web site has many more “read” operations than “write” operations (this is commonly the ca…
Meet the world's only “Transparent Cloud™” from Superb Internet Corporation. Now, you can experience firsthand a cloud platform that consistently outperforms Amazon Web Services (AWS), IBM’s Softlayer, and Microsoft’s Azure when it comes to CPU and …
In this video I am going to show you how to back up and restore Office 365 mailboxes using CodeTwo Backup for Office 365. Learn more about the tool used in this video here: http://www.codetwo.com/backup-for-office-365/ (http://www.codetwo.com/ba…
As a trusted technology advisor to your customers you are likely getting the daily question of, ‘should I put this in the cloud?’ As customer demands for cloud services increases, companies will see a shift from traditional buying patterns to new…

867 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now