![]() |
|
|
|||||||
![]() |
|
|
Thread Tools | Rate Thread |
|
|
PM User | #1 |
|
New Coder ![]() Join Date: Oct 2009
Posts: 23
Thanks: 0
Thanked 0 Times in 0 Posts
![]() |
Help to calculate sum of multiple input and show total
Hi, please help. I've been trying to check what I did wrong in my code but still the total doesn't show. Below is my javascript function:
Code:
function CalculateTotal(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r)
{
var tota= document.getElementById('a');
var totb= document.getElementById('b');
var totc= document.getElementById('c');
var totd= document.getElementById('d');
var tote= document.getElementById('e');
var totf= document.getElementById('f');
var totg= document.getElementById('g');
var toth= document.getElementById('h');
var toti= document.getElementById('i');
var totj= document.getElementById('j');
var totk= document.getElementById('k');
var totl= document.getElementById('l');
var totm= document.getElementById('m');
var totn= document.getElementById('n');
var toto= document.getElementById('o');
var totp= document.getElementById('p');
var totq= document.getElementById('q');
var totr= document.getElementById('r');
var grandTotal = tota + totb +totc + totd + tote + totf + totg + toth + toti +totj + totk + totl + totm + totn + toto + totp +totq + totr; document.getElementById('Total').value = grandTotal.toFixed(2);
}
Code:
<fieldset id="fieldset-in_registration">
<table>
<tr>
<td style="width:390px;text-align:left"><label for="a" style="font-weight:bold">A. Aloha United Way Community Care Fund </label></td>
<td style="float:right"> <input id="a" name="a" class="text" type="text" value="$<?php safeEcho($form['a'])?>" style="width:100px;" onChange="CalculateTotal()" />
<?php helper_error('a');?> </td>
</tr>
<tr>
<td style="width:390px;text-align:left"><label for="b">211 Information and Referral Services </label></td>
<td style="float:right"> <input id="b" name="b" class="text" type="text" value="$<?php safeEcho($form['b'])?>" style="width:100px;" onChange="CalculateTotal()" />
<?php helper_error('b');?> </td>
</tr>
<tr>
<td style="width:390px;text-align:left"><label for="c">Volunteer Hawaii/Gifts-in-Kind</label></td>
<td style="float:right"> <input id="c" name="c" class="text" type="text" value="$<?php safeEcho($form['c'])?>" style="width:100px;" onChange="CalculateTotal()"/>
<?php helper_error('c');?> </td>
</tr>
</table>
</fieldset>
<fieldset id="fieldset-in_registration">
<label for="impact" style="font-weight:bold">B. Impact Areas</label>
<table>
<tr>
<td style="width:390px;text-align:left"><label for="d">Crime and Drug Use</label></td>
<td style="float:right"> <input id="d" name="d" class="text" type="text" value="$<?php safeEcho($form['d'])?>" style="width:100px;" onChange="CalculateTotal()"/>
<?php helper_error('d');?> </td>
</tr>
<tr>
<td style="width:390px;text-align:left"><label for="e">Early Childhood Development</label></td>
<td style="float:right"> <input id="e" name="e" class="text" type="text" value="$<?php safeEcho($form['e'])?>" style="width:100px;" onChange="CalculateTotal()" />
<?php helper_error('e');?> </td>
</tr>
<tr>
<td style="width:390px;text-align:left"><label for="f">Emergency and Crisis Services</label></td>
<td style="float:right"> <input id="f" name="f" class="text" type="text" value="$<?php safeEcho($form['f'])?>" style="width:100px;" onChange="CalculateTotal()" />
<?php helper_error('f');?> </td>
</tr>
<tr>
<td style="width:390px;text-align:left"><label for="g" >Financial Stability and Independence</label></td>
<td style="float:right"> <input id="g" name="g" class="text" type="text" value="$<?php safeEcho($form['g'])?>" style="width:100px;" onChange="CalculateTotal()"/>
<?php helper_error('g');?> </td>
</tr>
<tr>
<td style="width:390px;text-align:left"><label for="h" >Homelessness</label></td>
<td style="float:right"> <input id="h" name="h" class="text" type="text" value="$<?php safeEcho($form['h'])?>" style="width:100px;" onChange="CalculateTotal()"/>
<?php helper_error('h');?> </td>
</tr>
</table>
</fieldset>
<fieldset id="fieldset-in_registration">
<p>D. <b>Agency/Program Support ($48 MINIMUM PER CHOICE)</b></p>
<p>My gift is designated to one or more specific agencies or programs. Processing fee may apply.
<p style="color:#FF0000">(Note: Agency Name is intentionally shorten/cut-off and indented to the next line to fit in the page. Choose either one of the indented line will give the same code.)</p>
<div class="formfield">
<table>
<tr>
<td>
<select id="designation_list1" name="designation_list1" size="1" style="overflow-x:scroll; width:390px; ">
<?php foreach ($designation_list as $descode => $prompt) : ?>
<option value="<?php echo $descode; ?>" ><?php safeEcho($descode); ?>
</option>
<?php endforeach; ?>
</select>
</td>
<td>
<input id="i" name="i" class="text" type="text" value="$<?php safeEcho($form['i'])?>" style="width:100px;" onChange="CalculateTotal()""/>
</td>
</tr>
<tr>
<td>
<select id="designation_list2" name="designation_list2" size="1" style="overflow-x:scroll; width:390px; ">
<?php foreach ($designation_list as $descode => $prompt) : ?>
<option value="<?php echo $descode; ?>" ><?php safeEcho($descode); ?>
</option>
<?php endforeach; ?>
</select>
</td>
<td>
<input id="j" name="j" class="text" type="text" value="$<?php safeEcho($form['j'])?>" style="width:100px;" onChange="CalculateTotal();"/>
</td>
</tr>
<tr>
<td>
<select id="designation_list3" name="designation_list3" size="1" style="overflow-x:scroll; width:390px; ">
<?php foreach ($designation_list as $descode => $prompt) : ?>
<option value="<?php echo $descode; ?>" ><?php safeEcho($descode); ?>
</option>
<?php endforeach; ?>
</select>
</td>
<td>
<input id="k" name="k" class="text" type="text" value="$<?php safeEcho($form['k'])?>" style="width:100px;" onChange="CalculateTotal()"/>
</td>
</tr>
<tr>
<td>
<select id="designation_list4" name="designation_list4" size="1" style="overflow-x:scroll; width:390px; ">
<?php foreach ($designation_list as $descode => $prompt) : ?>
<option value="<?php echo $descode; ?>" ><?php safeEcho($descode); ?>
</option>
<?php endforeach; ?>
</select>
</td>
<td>
<input id="l" name="l" class="text" type="text" value="$<?php safeEcho ($form['l'])?>" style="width:100px;" onChange="CalculateTotal()"/>
</td>
</tr>
<tr>
<td>
<select id="designation_list5" name="designation_list5" size="1" style="overflow-x:scroll; width:390px; ">
<?php foreach ($designation_list as $descode => $prompt) : ?>
<option value="<?php echo $descode; ?>" ><?php safeEcho($descode); ?>
</option>
<?php endforeach; ?>
</select>
</td>
<td>
<input id="m" name="m" class="text" type="text" value="$<?php safeEcho($form['m'])?>" style="width:100px;" onChange="CalculateTotal();"/>
</td>
</tr>
<tr>
<td>
<select id="designation_list6" name="designation_list6" size="1" style="overflow-x:scroll; width:390px; ">
<?php foreach ($designation_list as $descode => $prompt) : ?>
<option value="<?php echo $descode; ?>" ><?php safeEcho($descode); ?>
</option>
<?php endforeach; ?>
</select>
</td>
<td>
<input id="n" name="n" class="text" type="text" value="$<?php safeEcho($form['n'])?>" style="width:100px;" onChange="CalculateTotal()"/>
</td>
</tr>
<tr>
<td>
<select id="designation_list7" name="designation_list7" size="1" style="overflow-x:scroll; width:390px; ">
<?php foreach ($designation_list as $descode => $prompt) : ?>
<option value="<?php echo $descode; ?>" ><?php safeEcho($descode); ?>
</option>
<?php endforeach; ?>
</select>
</td>
<td>
<input id="o" name="o" class="text" type="text" value="$<?php safeEcho($form['o'])?>" style="width:100px;" onChange="CalculateTotal()"/>
</td>
</tr>
<tr>
<td>
<select id="designation_list8" name="designation_list8" size="1" style="overflow-x:scroll; width:390px; ">
<?php foreach ($designation_list as $descode => $prompt) : ?>
<option value="<?php echo $descode; ?>" ><?php safeEcho($descode); ?>
</option>
<?php endforeach; ?>
</select>
</td>
<td>
<input id="p" name="p" class="text" type="text" value="$<?php safeEcho($form['p'])?>" style="width:100px;" onChange="CalculateTotal()"/>
</td>
</tr>
<tr>
<td>
<select id="designation_list9" name="designation_list9" size="1" style="overflow-x:scroll; width:390px; ">
<?php foreach ($designation_list as $descode => $prompt) : ?>
<option value="<?php echo $descode; ?>" ><?php safeEcho($descode); ?>
</option>
<?php endforeach; ?>
</select>
</td>
<td>
<input id="q" name="q" class="text" type="text" value="$<?php safeEcho($form['q'])?>" style="width:100px;" onChange="CalculateTotal()"/>
</td>
</tr>
<tr>
<td>
<select id="designation_list10" name="designation_list10" size="1" style="overflow-x:scroll; width:390px; ">
<?php foreach ($designation_list as $descode => $prompt) : ?>
<option value="<?php echo $descode; ?>" ><?php safeEcho($descode); ?>
</option>
<?php endforeach; ?>
</select>
</td>
<td>
<input id="r" name="r" class="text" type="text" value="$<?php safeEcho($form['r'])?>" style="width:100px;" onChange="CalculateTotal()"/>
</td>
</tr>
<tr>
<td style="text-align:right;"><b>TOTAL GIFT(S) DESIGNATED (A-D)</b><BR /> (Must not exceed donation amount)</td>
<td><input name="Total" id="Total" type="text" maxlength="10" readonly="true" onChange="CalculateTotal(this.value)" /></td>
</tr>
</table>
|
|
|
|
|
|
PM User | #2 |
|
Master Coder ![]() Join Date: Jun 2002
Location: London, England
Posts: 7,092
Thanks: 85
Thanked 836 Times in 817 Posts
![]() ![]() |
Data entered into textboxes is a string, and must be converted to a (positive) number before mathematical calculations are performed.
Code:
function CalculateTotal() {
var tota= Math.abs(parseFloat(document.getElementById('a').value));
var totb= Math.abs(parseFloat(document.getElementById('b').value));
var totc= Math.abs(parseFloat(document.getElementById('c').value));
var totd= Math.abs(parseFloat(document.getElementById('d').value));
//.. and so on
var grandTotal = tota + totb + totc + totd // .. and so on
document.getElementById('Total').value = grandTotal.toFixed(2);
}
But you need to ensure that the data entered in each box by the user is a number (e.g. 99) and not a string ("How much?") as otherwise your total will return NaN (Not a Number); Code:
if (isNaN(grandTotal)) { // if grandTotal is not a number
alert ("You must enter numbers 0-9 only in the boxes");
document.getElementById('Total').value = 0; // or perhaps value = "ERROR!"
return false;
}
Code:
if ((toti >0 && toti <48 ) || (totj>0 && totj <48) || (totk >0 && totk <48) || (totl >0 & totl <48)) { // .. and so on
alert ("All donations in this section must be $48 minimum - please revise your entry");
return false;
}
Quizmaster: What is the only prime number between 60 and 65? Contestant: 50. Last edited by Philip M; 10-31-2009 at 11:36 AM.. |
|
|
|
|
|
PM User | #4 |
|
Senior Coder ![]() Join Date: Feb 2009
Location: Snohomish, WA
Posts: 4,061
Thanks: 18
Thanked 660 Times in 652 Posts
![]() ![]() |
Ummm...Philip, *all* those form fields will contain a $ in them, unless the user changes the field to get rid of it.
Need to strip out the $ and probably should just strip all non-digits except period, no?
__________________
"Old age and cunning win out over youth and enthusiasm every time." |
|
|
|
|
|
PM User | #5 |
|
Master Coder ![]() Join Date: Jun 2002
Location: London, England
Posts: 7,092
Thanks: 85
Thanked 836 Times in 817 Posts
![]() ![]() |
Yes, I had not noticed the $ sign. There would seem to be not a lot of point in placing a $ sign in (rather than in front of) the boxes which must then be immediately removed.
I did say "But you need to ensure that the data entered in each box by the user is a number (e.g. 99) and not a string ("How much?") as otherwise your total will return NaN (Not a Number)" |
|
|
|
|
|
PM User | #7 | |
|
Master Coder ![]() Join Date: Jun 2002
Location: London, England
Posts: 7,092
Thanks: 85
Thanked 836 Times in 817 Posts
![]() ![]() |
Quote:
Strip it down to just a few or a couple of input boxes and test it again. |
|
|
|
|
|
|
PM User | #8 |
|
New Coder ![]() Join Date: Oct 2009
Posts: 23
Thanks: 0
Thanked 0 Times in 0 Posts
![]() |
Hi Philip M, thanks a lot for your help. I made it work. I just need to add
Code:
totA = Number(a) + Number(b); //so on I have another problem though in regards to this. I need to make a comparison between my donation amount and my Total amount. I have the donation amount in PHP below: PHP Code:
Code:
<tr>
<td style="text-align:right; font-size:14px"><b>TOTAL GIFT(S) DESIGNATED (A-C)</b><BR /> (Must not exceed donation amount)</td>
<td>$<input name="TotalC" id="TotalC" type="text" maxlength="10" readonly="true" onChange="CalculateTotal(this.value,99);" style="width:90px" /></td>
</tr>
Code:
function dm(amount)
{
string = "" + amount;
dec = string.length - string.indexOf('.');
if (string.indexOf('.') == -1)
return string + '.00';
if (dec == 1)
return string + '00';
if (dec == 2)
return string + '0';
if (dec > 3)
return string.substring(0,string.length-dec+3);
return string;
}
function CalculateTotal()
{
a = document.getElementById('a').value;
document.getElementById('a').value = a;
b = document.getElementById('b').value;
document.getElementById('b').value = b;
c = document.getElementById('c').value;
document.getElementById('c').value = c;
d = document.getElementById('d').value;
document.getElementById('d').value = d;
e = document.getElementById('e').value;
document.getElementById('e').value = e;
f = document.getElementById('f').value;
document.getElementById('f').value = f;
g = document.getElementById('g').value;
document.getElementById('g').value = g;
h = document.getElementById('h').value;
document.getElementById('h').value = h;
i = document.getElementById('i').value;
document.getElementById('i').value = i;
j = document.getElementById('j').value;
document.getElementById('j').value = j;
k = document.getElementById('k').value;
document.getElementById('k').value = k;
l = document.getElementById('l').value;
document.getElementById('l').value = l;
m = document.getElementById('m').value;
document.getElementById('m').value = m;
n = document.getElementById('n').value;
document.getElementById('n').value = n;
o = document.getElementById('o').value;
document.getElementById('o').value = o;
p = document.getElementById('p').value;
document.getElementById('p').value = p;
q = document.getElementById('q').value;
document.getElementById('q').value = q;
r = document.getElementById('r').value;
document.getElementById('r').value = r;
TotA = Number(a) + Number(b) + Number(c);
document.getElementById('TotalA').value = dm(eval(TotA));
TotB = eval(TotA) + Number(d) + Number(e) + Number(f) + Number(g) + Number(h);
document.getElementById('TotalB').value = dm(eval(TotB));
TotC = eval(TotB) + Number(i) + Number(j) + Number(k) + Number(l) + Number(m) + Number(n) + Number(o) + Number(p) + Number(q) + Number(r);
document.getElementById('TotalC').value = dm(eval(TotC));
if (isNaN(TotA)) { // if grandTotal is not a number
alert ("You must enter numbers 0-9 only in the boxes");
document.getElementById('TotalA').value = "ERROR"; // or perhaps value = "ERROR!"
return false;
}
if (isNaN(TotB)) { // if grandTotal is not a number
alert ("You must enter numbers 0-9 only in the boxes");
document.getElementById('TotalB').value = "ERROR"; // or perhaps value = "ERROR!"
return false;
}
if (isNaN(TotC)) { // if grandTotal is not a number
alert ("You must enter numbers 0-9 only in the boxes");
document.getElementById('TotalC').value = "ERROR"; // or perhaps value = "ERROR!"
return false;
}
if ((i >0 && i <48 ) || (j >0 && j <48) || (k >0 && k <48) || (l >0 && l <48)) { // .. and so on
alert ("All donations in this section must be $48 minimum - please revise your entry or your donation amount will be ERROR.");
document.getElementById('TotalC').value = "ERROR"; // or perhaps value = "ERROR!"
return false;
}
Code:
if (TotC > document.getElementById('donate_amount'))
{
alert('Your total designated amount is more than your donation amount. Please revise your designation amount or your donation amount or you will get an ERROR and your designation amount will not process.');
document.getElementById('TotalC').value = "ERROR"; // or perhaps value = "ERROR!"
}
|
|
|
|
|
|
PM User | #9 |
|
Master Coder ![]() Join Date: Jun 2002
Location: London, England
Posts: 7,092
Thanks: 85
Thanked 836 Times in 817 Posts
![]() ![]() |
There are several points:-
a = document.getElementById('a').value; In Internet Explorer, names and IDs are global variables and thus you should NEVER use a global variable or function name which is the same as an HTML element name or ID. document.getElementById('a').value = a; What is this supposed to do? function dm(amount) This is not necessary. The correct way is to use x = x.toFixed(2) to show 2 decimal places. TotC = eval(TotB) + Number(i) + Number(j) + Number(k) + Number(l) + Number(m) + Number(n) + Number(o) + Number(p) + Number(q) + Number(r); document.getElementById('TotalC').value = dm(eval(TotC)); What is eval supposed to do? if (TotC > document.getElementById('donate_amount')) I do not see any field with an id of donate_amount. I see a field with the name donate_amount which is a radio button. document.getElementById('donate_amount') returns the object with that id. You want the value of that object. |
|
|
|
|
|
PM User | #10 |
|
New Coder ![]() Join Date: Oct 2009
Posts: 23
Thanks: 0
Thanked 0 Times in 0 Posts
![]() |
Thanks and I tried everything and still the answer is Nan in my textbox when I tried to call the radio button amount. It is reading as a string so please help I am desperate. I create another function to call the button but it is giving me
Code:
NaN //message in the textbox |
|
|
|
|
|
PM User | #11 |
|
Master Coder ![]() Join Date: Jun 2002
Location: London, England
Posts: 7,092
Thanks: 85
Thanked 836 Times in 817 Posts
![]() ![]() |
See post #7.
Also post #2 - But you need to ensure that the data entered in each box by the user is a number (e.g. 99) and not a string ("How much?") as otherwise your total will return NaN (Not a Number); Recursion - see recursion. The way to find the value of a checked radio button is like so (you must loop through the radio group to find the checked value):- Code:
<form name= "myform">
<input type = "radio" name = "rad1" value = "NE">North East
<input type = "radio" name = "rad1" value = "NW">North West
<input type = "radio" name = "rad1" value = "SE">South East
<input type = "radio" name = "rad1" value = "SW">South West
<input type = "radio" name = "rad1" value = "Midlands">Midlands
<br><br>
<input type = "button" value = "Which Radio Selected?" onclick = "chkrads()">
</form>
<script type = "text/javascript">
function chkrads() {
var chosen = "None";
var which = 0;
var len = document.myform.rad1.length;
for (i = 0; i <len; i++) {
if (document.myform.rad1[i].checked) {
chosen = document.myform.rad1[i].value;
which = i;
}
}
if (chosen == "None") {
alert("No Location Chosen");
}
else {
alert("You selected " + chosen + " which is Radio Button " + which );
}
}
</script>
Last edited by Philip M; 11-05-2009 at 09:37 AM.. |
|
|
|
![]() |
| Bookmarks |
| Thread Tools | |
| Rate This Thread | |
|
|