Adding Several text form fields for a grand total

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;">

Select allOpen in new window

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.

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;">

Select allOpen in new window

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>

Select allOpen in new window

sorry i just realized that i need the fields to accept  two deciemal points. ie. $100.25, too

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.
 

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...

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>

Select allOpen in new window

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....

Have you had any luck getting this all working?

134,
Sorry for the delay. I still have to try the correction that you have above. thanks and i will keep you informed.
 
thanks

parseFloat and toFixed would help too

Any luck?

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