Solved

Adding Several text form fields for a grand total

Posted on 2009-07-14
17
186 Views
Last Modified: 2014-06-27
I believe that what I am looking for is pretty easy but I don't knkow anything about JavaScript. Here is what I am doing. I am using a form as a donation page for a church and i need
about seven different text fields to be added together to get a grand total.  I will post the code and here is a link to the page if that helps www.joycenter.org/donation/donation.shtml

I need for each to be added together to get a grand total i.e

tithes      $100.00
offering  $100.00
building fund $100.00
pastoral offering $100.00
school offering $100.00
tv boardcast $100.00
benevolence $100.00
Grand total: $700.00

I am only using this as an example. Of course, if a field is left empty the script should continue adding together the remaining fields.

Any help would be useful.
 
<fieldset class="alt">

<legend><span>Giving</span></legend>

<ol>
 

<li>

<label for="Tithes">Tithes: 10&#37;

</label>

<input id="Tithes" name="tithes" class="text" type="text" style="width:125px;">

</li>
 

<li>

<label for="General Offering">General Offering:	

</label>

<input id="General Offering" name="General Offering" class="text" type="text" style="width:125px;">

</li>
 

<li>

<label for="Building Fund">Building Fund:

</label>

<input id="Building Fund" name="Building Fund" class="text" type="text" style="width:125px;">

</li>
 

<li>

<label for="Pastoral Offering">Pastoral Offering:

</label>

<input id="Pastoral Offering" name="Pastoral Offering" class="text" type="text" style="width:125px;">

</li>
 

<li>

<label for="CJC Preschool">CJC Preschool:

</label>

<input id="CJC Preschool" name="School Offering" class="text" type="text" style="width:125px;">

</li>
 

<li>

<label for="Television Broadcast">TV Broadcast:

</label>

<input id="Television Broadcast" name="Television Broadcast" class="text" type="text" style="width:125px;">

</li>
 

<li>

<label for="Benevolence">Benevolence:

</label>

<input id="Benevolence" name="Benevolence" class="text" type="text" style="width:125px;">

</li>
 

<li>

<label for="amount" class="required"> Grand Total:<span>*</span>

	<br/><span class="yaverr" id="errdiv_amount"></span>

</label>
 

<input id="amount" name="amount" class="text" type="text" style="width:125px;">

</li>

</ol>

</fieldset>

Open in new window

0
Comment
Question by:no-java
  • 7
  • 6
  • 2
17 Comments
 
LVL 2

Expert Comment

by:onethreefour
ID: 24856791
Shouldn't be too difficult...
Add a calculate button:
In the onClick you just set the 'value' of your grandtotal textfield to the sum of all the other values...
Then when the form is posted (using another submit button) your grandtotal value will be passed...

<input type=submit value='calculate' style='return false' onclick="document.getElementById('amount').value = document.getElementById('Tithes').value + document.getElementById('General Offering').value + document.getElementById('Benevolence').value;">

Open in new window

0
 

Author Comment

by:no-java
ID: 24856892
Is there a way to do it without adding another button to this form? Here is what i would like to have.  As the person is filling out this portion of the form i would like to see the grand total calculate as each amount is added without refeashing or clicking another button. kinda like a spreadsheet would do once you have all of your forumlas added to the sheet.
0
 
LVL 2

Expert Comment

by:onethreefour
ID: 24856962
Ok... In that case take that javascript that is in the onclick of the 'new' button, and copy it into an 'onkeypress' function within each text box you want added up:

Make sure that you put the onkeypress code within each of the 7 'inputs'...
Then when you start to enter numbers into each text box it should start calculating it all on the fly...
<input id="General Offering" name="General Offering" class="text" type="text" style="width:125px;" onkeypress="document.getElementById('amount').value = document.getElementById('Tithes').value + document.getElementById('General Offering').value + document.getElementById('Benevolence').value;">

Open in new window

0
 

Author Comment

by:no-java
ID: 24860017
We are getting closer. I am adding the code so you can see what I have done. The only real problem is that the Grand Total is not TOTALING the dollar amounts. Here is a test page. www.joycenter.org/donation/donation-new2.shtml
instead of it calulating a total it is placing them all in one field.
here is what i need it to do:
Tithes:                    $100.00
General Offering: $200.00
Building Fund:      $300.00
Pastoral Offering: $400.00
CJC Preschool:
TV Broadcast:
Benevolence:
Grand Total:         $1000.00


here is what it is doing:

Tithes:                    100.00
General Offering: 200.00
Building Fund:      300.00
Pastoral Offering: 400.00
CJC Preschool:
TV Broadcast:
Benevolence:
Grand Total:         100200300400
here are two smaller details:
can i use $?
is there a way to use unobtrusive Java?

<ol>
 

<li>

<label for="Tithes">Tithes: 10&#37;

</label>

<input id="Tithes" name="tithes" class="text" type="text" style="width:125px; onkeypress="document.getElementById('amount').value = document.getElementById('Tithes').value + document.getElementById('General Offering').value + document.getElementById('Building Fund').value+ document.getElementById('Pastoral Offering').value + document.getElementById('CJC Preschool').value + document.getElementById('Television Broadcast').value + document.getElementById('Benevolence').value;"">

</li>
 

<li>

<label for="General Offering">General Offering:	

</label>

<input id="General Offering" name="General Offering" class="text" type="text" style="width:125px;" onkeypress="document.getElementById('amount').value = document.getElementById('Tithes').value + document.getElementById('General Offering').value + document.getElementById('Building Fund').value+ document.getElementById('Pastoral Offering').value + document.getElementById('CJC Preschool').value + document.getElementById('Television Broadcast').value + document.getElementById('Benevolence').value;">

</li>
 

<li>

<label for="Building Fund">Building Fund:

</label>

<input id="Building Fund" name="Building Fund" class="text" type="text" style="width:125px;" onkeypress="document.getElementById('amount').value = document.getElementById('Tithes').value + document.getElementById('General Offering').value + document.getElementById('Building Fund').value+ document.getElementById('Pastoral Offering').value + document.getElementById('CJC Preschool').value + document.getElementById('Television Broadcast').value + document.getElementById('Benevolence').value;">

</li>
 

<li>

<label for="Pastoral Offering">Pastoral Offering:

</label>

<input id="Pastoral Offering" name="Pastoral Offering" class="text" type="text" style="width:125px;" onkeypress="document.getElementById('amount').value = document.getElementById('Tithes').value + document.getElementById('General Offering').value + document.getElementById('Building Fund').value+ document.getElementById('Pastoral Offering').value + document.getElementById('CJC Preschool').value + document.getElementById('Television Broadcast').value + document.getElementById('Benevolence').value;">

</li>
 

<li>

<label for="CJC Preschool">CJC Preschool:

</label>

<input id="CJC Preschool" name="School Offering" class="text" type="text" style="width:125px;" onkeypress="document.getElementById('amount').value = document.getElementById('Tithes').value + document.getElementById('General Offering').value + document.getElementById('Building Fund').value+ document.getElementById('Pastoral Offering').value + document.getElementById('CJC Preschool').value + document.getElementById('Television Broadcast').value + document.getElementById('Benevolence').value;">

</li>
 

<li>

<label for="Television Broadcast">TV Broadcast:

</label>

<input id="Television Broadcast" name="Television Broadcast" class="text" type="text" style="width:125px;" onkeypress="document.getElementById('amount').value = document.getElementById('Tithes').value + document.getElementById('General Offering').value + document.getElementById('Building Fund').value+ document.getElementById('Pastoral Offering').value + document.getElementById('CJC Preschool').value + document.getElementById('Television Broadcast').value + document.getElementById('Benevolence').value;">

</li>
 

<li>

<label for="Benevolence">Benevolence:

</label>

<input id="Benevolence" name="Benevolence" class="text" type="text" style="width:125px;" onkeypress="document.getElementById('amount').value = document.getElementById('Tithes').value + document.getElementById('General Offering').value + document.getElementById('Building Fund').value+ document.getElementById('Pastoral Offering').value + document.getElementById('CJC Preschool').value + document.getElementById('Television Broadcast').value + document.getElementById('Benevolence').value;">

</li>
 

<li>

<label for="amount" class="required"> Grand Total:<span>*</span>

	<br/><span class="yaverr" id="errdiv_amount"></span>

</label>
 

<input id="amount" name="amount" class="text" type="text" style="width:125px;" onkeypress="document.getElementById('amount').value = document.getElementById('Tithes').value + document.getElementById('General Offering').value + document.getElementById('Building Fund').value+ document.getElementById('Pastoral Offering').value + document.getElementById('CJC Preschool').value + document.getElementById('Television Broadcast').value + document.getElementById('Benevolence').value;">

</li>

</ol>

Open in new window

0
 

Author Comment

by:no-java
ID: 24860089
sorry i just realized that i need the fields to accept  two deciemal points. ie. $100.25, too
0
 
LVL 2

Accepted Solution

by:
onethreefour earned 250 total points
ID: 24861442
Ok... The problem here now with the concatination of the number, instead of addition, is caused because the values we are adding are being treated by javascript as 'strings' not 'numbers' as described here:
http://www.w3schools.com/jS/js_operators.asp

One easy method of converting the 'string' to a 'number' is by multiplying it as described below:
http://www.computing.net/answers/programming/javascript-addition-problem-/14391.html
num1 = num1 * 1;
sum += num1;
By putting the multiplication in, you force JavaScript to treat it as a number.

So moral of the story here is to try and wrap that multiplication method into your long 'onkeypress'...
$<input id="Benevolence" name="Benevolence" class="text" type="text" style="width:125px;" onkeypress="document.getElementById('amount').value = (document.getElementById('Tithes').value * 1) + (document.getElementById('General Offering').value * 1) + (document.getElementById('Building Fund').value * 1) + (document.getElementById('Pastoral Offering').value * 1) + (document.getElementById('CJC Preschool').value * 1) + (document.getElementById('Television Broadcast').value * 1) + (document.getElementById('Benevolence').value * 1);">

On a seperate note, the easiest way to approach your $dollar sign problem$  would be to simply put the dollar sign outside of the input box like I did in the example above...  
Lets hope that once your math is working properly, and it is not longer attempting to concatenate your strings, your decimal problem should hopefully work itself out on its own....
0
 

Author Comment

by:no-java
ID: 24861923
134,
thanks for all of your help. we are getting closer but I am still having problems. again here is the link to the page. www.joycenter.org/donation/donation-new2.shtml
problems
1. when i type a number in the first field, tithe, it does not appear in the grand total until i add a number to another field. I need the total field to calulate as i am adding the numbers into the fields - "real time". i need the "real time" feel when i add a number to any of the fields.
2. the decimals are quirky at best. if  i add $125.00 into the tithes field and add just $50 in another field it shows a total of $130.00.  in other words if i don't add the .00 after the 50 it breaks the calculation.
3. another decimal problem, it is not calulating properly
   Tithes: 150.10
   Offering 150.25
   Grand Total 300.29999999999995
why not 300.35?
4. the final problem is if i type a number into a field and then i decide to change that number. the grand total is not correcting the change.
This java is becoming looooooooooooong. is there an unobtrusive way to do this?
thanks for all of your help. I will give you all of the points once we get this worked out.
 
0
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 
LVL 2

Expert Comment

by:onethreefour
ID: 24864896
I think that you may want to try using the 'onkeyup' event instead of the 'onkeypress' event... That might help you with the problem of having to fill out the next field before the previous one adds...

Javascript can get very long... For that reason you may want to put everything within the current 'onkeypress' event into a javascript function within script tags in the 'head' of your html page...
I find it though much easier to understand and navigate simple javascript when it is within events like onkeypress, or a body onload, or an <a onclick...   It is much prettier though when you wrap your javascript up in a function, then just call that function from your event...

<head>
<script type='text/javascript'>
    function calculate() {
document.getElementById('amount').value = (document.getElementById('Tithes').value * 1 +  (document.getElementById('Offering').value * 1) + (document.getElementById('Building Fund').value * 1) + (document.getElementById('Pastoral Offering').value * 1) + (document.getElementById('CJC Preschool').value * 1) + (document.getElementById('Television Broadcast').value * 1) + (document.getElementById('Special').value * 1);
}

</script>
</head>


Now in your text field change that onkeypress to onkeyup and insert the function call...
<input id="Tithes" name="tithes" class="text" type="text" style="width:125px;" onkeyup="calculate();">

On a different note, within the 'Tithes' input id there is a missing double quote " at the end of the 'style'...
with straight html proper quoting is not quite as important... But once you start to through javascript into it it is very important to get your quoting and everything straight...
0
 

Author Comment

by:no-java
ID: 24866663
134,

first let me say thank you so much for teaching Java to me in the process of helping me to get a functional code. I "code" html and css but i know almost nothing about javascript. thank for the keen eye on double quote " on the "tithes" form element. I corrected that problem on all the other fields except that one. as you know long days and nights of coding will cause that to happen.

i do like the "pretty" code but it's not working at all !  I am getting NO totals whatsoever tn grand total. Nothing is totaling and because i am a complete newbie to js i am clueless on how to trouble shoot the code for typos. I copied and pasted this directly from your previous comment. please help!!

I don't know if this matters but i now have a sercurty ceretificate and the form is now linked to the payment processor.  so here the link once more.
https://www.joycenter.org/donation/donation-new2.shtml

thanks again

/* i added this in the header */
 

<script type='text/javascript'>

    function calculate() {

document.getElementById('amount').value = (document.getElementById('Tithes').value * 1 +  (document.getElementById('Offering').value * 1) + (document.getElementById('Building Fund').value * 1) + (document.getElementById('Pastoral Offering').value * 1) + (document.getElementById('CJC Preschool').value * 1) + (document.getElementById('Television Broadcast').value * 1) + (document.getElementById('Special').value * 1);

}
 

</script>
 
 

/* here is the content in the body*/
 

<fieldset class="alt">

<legend><span>Giving</span></legend>

<ol>

<li>

<label for="Tithes">Tithes: 10&#37;

</label>

$ <input id="Tithes" name="tithes" class="text" type="text" style="width:125px;" onkeyup="calculate();">

</li>
 

<li>

<label for="Offering">Offering:	

</label>

$ <input id="Offering" name="Offering" class="text" type="text" style="width:125px;" onkeyup="calculate();">

</li>
 

<li>

<label for="Building Fund">Building Fund:

</label>

$ <input id="Building Fund" name="Building Fund" class="text" type="text" style="width:125px;" onkeyup="calculate();">

</li>
 

<li>

<label for="Pastoral Offering">Pastoral Offering:

</label>

$ <input id="Pastoral Offering" name="Pastoral Offering" class="text" type="text" style="width:125px;" onkeyup="calculate();">

</li>
 

<li>

<label for="CJC Preschool">CJC Preschool:

</label>

$ <input id="CJC Preschool" name="School Offering" class="text" type="text" style="width:125px;" onkeyup="calculate();">

</li>
 

<li>

<label for="Television Broadcast">TV Broadcast:

</label>

$ <input id="Television Broadcast" name="Television Broadcast" class="text" type="text" style="width:125px;" onkeyup="calculate();">

</li>
 

<li>

<label for="Special">Special / Love Gift:

</label>

$ <input id="Special" name="Special" class="text" type="text" style="width:125px;" onkeyup="calculate();">

</li>
 

<li>

<label for="amount" class="required"> <strong>Grand Total</strong>:<span>*</span>

	<br/><span class="yaverr" id="errdiv_amount"></span>

</label>

$ <input id="amount" name="amount" class="text" type="text" style="width:125px;" onkeyup="calculate();">

</li>

</ol>

</fieldset>

Open in new window

0
 
LVL 2

Expert Comment

by:onethreefour
ID: 24881363
Sorry for my delay....    I can not now access the URL you gave.  But it looks to me like there is a right parenthesis missing in the function calculate....  
document.getElementById('amount').value = (document.getElementById('Tithes').value * 1 +  (document.getElementById('Offering').value * 1) + (document.getElementById('Building Fund').value * 1) + (document.getElementById('Pastoral Offering').value * 1) + (document.getElementById('CJC Preschool').value * 1) + (document.getElementById('Television Broadcast').value * 1) + (document.getElementById('Special').value * 1);
}

Right after the ('Thithes').value * 1
There should a ) after the '1' and before the '+' .... If you  look at all of the other fields being added you can see that there is a ) after each 1 and before the + ....
That may fix your javascript function...

One thing that will help you A LOT with debugging your javascript is to use Mozilla Firefox...    Once you open a webpage in firefox, click on 'tools' then click 'Error Console'.... Then click the 'Clear' button in the error console, then reload your webpage and click around and use your javascript form...  If there are any errors, like the missing parenthesis or anything else, the Error Console will tell you what the problem is... The Firefox Error Console is much more descriptive and helps more than the javascript debugging in Internet Explorer or elsewhere....

Hope this helps....
0
 
LVL 2

Expert Comment

by:onethreefour
ID: 24891028
Have you had any luck getting this all working?
0
 

Author Comment

by:no-java
ID: 24915199
134,
Sorry for the delay. I still have to try the correction that you have above. thanks and i will keep you informed.
 
thanks
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 25124125
parseFloat and toFixed would help too
0
 
LVL 2

Expert Comment

by:onethreefour
ID: 25126600
Any luck?

It sucks when questions like this get drawn out forever and then are never resolved...  
0
 
LVL 75

Assisted Solution

by:Michel Plungjan
Michel Plungjan earned 250 total points
ID: 25126911
My suggestion

It can be more streamlined with the fields in an array but this is easier to understand

/* i added this in the header */
 

<script type='text/javascript'>

    function calculate(theForm) {

      var total = 0;

      var tithes = parseFloat(theForm.elements["tithes"].value);

      var offering = parseFloat(theForm.elements["Offering"].value);

      var fund = parseFloat(theForm.elements["Building Fund"].value);

      var pastOffer = parseFloat(theForm.elements["Pastoral Offering"].value);

      var preSchool = parseFloat(theForm.elements["CJC Preschool"].value);

      var tv = parseFloat(theForm.elements["Television Broadcast"].value);

      var special = parseFloat(theForm.elements["Special"].value);

      total += isNaN(tithes)?0:tithes;

      total += isNaN(offering)?0:offering;

      total += isNaN(fund)?0:fund;

      total += isNaN(pastOffer)?0:pastOffer;

      total += isNaN(preSchool)?0:preSchool;

      total += isNaN(tv)?0:tv;

      total += isNaN(special)?0:special;

      theForm.amount.value=total.toFixed(2);

}
 

</script>
 

 <form>

/* here is the content in the body*/
 

<fieldset class="alt">

<legend><span>Giving</span></legend>

<ol>

<li>

<label for="Tithes">Tithes: 10&#37;

</label>

$ <input id="Tithes" name="tithes" class="text" type="text" style="width:125px;" onkeyup="calculate(this.form);">

</li>
 

<li>

<label for="Offering">Offering:

</label>

$ <input id="Offering" name="Offering" class="text" type="text" style="width:125px;" onkeyup="calculate(this.form);">

</li>
 

<li>

<label for="Building Fund">Building Fund:

</label>

$ <input id="Building Fund" name="Building Fund" class="text" type="text" style="width:125px;" onkeyup="calculate(this.form);">

</li>
 

<li>

<label for="Pastoral Offering">Pastoral Offering:

</label>

$ <input id="Pastoral Offering" name="Pastoral Offering" class="text" type="text" style="width:125px;" onkeyup="calculate(this.form);">

</li>
 

<li>

<label for="CJC Preschool">CJC Preschool:

</label>

$ <input id="CJC Preschool" name="School Offering" class="text" type="text" style="width:125px;" onkeyup="calculate(this.form);">

</li>
 

<li>

<label for="Television Broadcast">TV Broadcast:

</label>

$ <input id="Television Broadcast" name="Television Broadcast" class="text" type="text" style="width:125px;" onkeyup="calculate(this.form);">

</li>
 

<li>

<label for="Special">Special / Love Gift:

</label>

$ <input id="Special" name="Special" class="text" type="text" style="width:125px;" onkeyup="calculate(this.form);">

</li>
 

<li>

<label for="amount" class="required"> <strong>Grand Total</strong>:<span>*</span>

	<br/><span class="yaverr" id="errdiv_amount"></span>

</label>

$ <input id="amount" name="amount" class="text" type="text" style="width:125px;" onkeyup="calculate(this.form);">

</li>

</ol>

</fieldset>

</form>

Open in new window

0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

This tutorial will discuss fancy secure registration forms, with AJAX technology support. In this article I assume you already know HTML and some JS. I will write the code using WhizBase Server Pages, so you need to know some basics in WBSP (you mig…
This article will show, step by step, how to integrate R code into a R Sweave document
Learn the basics of while and for loops in Python.  while loops are used for testing while, or until, a condition is met: The structure of a while loop is as follows:     while <condition>:         do something         repeate: The break statement m…
The viewer will learn how to dynamically set the form action using jQuery.

760 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

20 Experts available now in Live!

Get 1:1 Help Now