# Thread: Calculate form total

1. ## Calculate form total

I'm working on a registration form (I'll be the only user). The idea is to select which fee is appropriate (Single / Couple / Student), add child fee (if any) and have the total appear in a text box. The first part is working, thanks to a code snippet I found online, but I can't figure out how to add in the fee for children. Here's the code. Any help gratefully appreciated.
HTML Code:
```<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<title>Registration Form</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--//
function total(){
var form = document.forms['myform'];
for(var i=0; i<form.elements.length; i++){
form.elements[i].onclick = function(){
for(var i=0,total=0; i<this.form.elements.length; i++){
var input = this.form.elements[i];
total += input.value/1;
}
this.form.total.value = total.toFixed(2);
}
}
}

form.onsubmit = function(){
for(var i=0; i<this.elements.length; i++){
var input = this.elements[i];
input.value = input.id+'/'+input.value;
}
}
}
}
} window.onload = total;
</script>

<body>
<form action="<?php echo \$editFormAction; ?>" method="POST" name="myform">

<h1>Registration</h1>
<input type="radio" name="fee" id="Couple" value=95.00> Couple \$95 <br>
<input type="radio" name="fee" id="Student" value=25.00> Student \$25<br><br>

Number of Children: <input name="childnum" type="text" id="Children" value="" size="3">
&nbsp;&nbsp; Cost: \$&nbsp;<input name="fee" type="text" id="childfee" value="0" size="8"><br>
(\$10 per child to cover cost of lunch)<br>

<h3>Cost</h3>
Total: <input name="total" id="total" type="text" onFocus="this.blur();" size="8" readonly>
Paid: \$<input name="amountpaid" id="amountpaid" type="text" size="8">

<br><br>
<input name="Submit" type="submit" class="button"  value="Register"></td>
</form>

</body>
</html>```

2. Hi there,

This should do the trick:

Code:
```<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<title>Registration Form</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<body>
<form action="<?php echo \$editFormAction; ?>" method="POST" name="myform">
<h1>Registration</h1>
<input type="radio" name="fee" id="Couple" value=95.00> Couple \$95 <br>
<input type="radio" name="fee" id="Student" value=25.00> Student \$25<br><br>

Number of Children: <input name="childnum" type="text" id="Children" value="" size="3">
&nbsp;&nbsp; Cost: \$&nbsp;<input name="fee" type="text" id="childfee" value="0" size="8"><br>
(\$10 per child to cover cost of lunch)<br>

<h3>Cost</h3>
Total: <input name="total" id="total" type="text" onFocus="this.blur();" size="8" readonly>
Paid: \$<input name="amountpaid" id="amountpaid" type="text" size="8">

<br><br>
<input name="Submit" type="submit" class="button"  value="Register"></td>
</form>

<script type="text/javascript">
var form = document.forms['myform'];
var adultTotal = 0;
var kidsTotal = 0;

function updateTotal(tot1, tot2){
form.total.value = (adultTotal + kidsTotal).toFixed(2);
}

for(var i=0; i<form.elements.length; i++){
form.elements[i].onclick = function(){
for(var i=0,total=0; i<this.form.elements.length; i++){
var input = this.form.elements[i];
}
updateTotal();
}
}
}
}

form.Children.onkeyup = function(){
form.childfee.value = form.Children.value*10;
kidsTotal = Number(form.childfee.value);
updateTotal();
}

form.onsubmit = function(){
for(var i=0; i<this.elements.length; i++){
var input = this.elements[i];
input.value = input.id+'/'+input.value;
}
}
}
</script>
</body>
</html>```
Any questions, just let me know.

3. That works a treat, thanks
Just wondering why you put the code on the bottom?

4. No problem

The reason is that I put the code at the bottom, is that otherwise it would run before any of the elements it attempts to reference exist on the page.

The reason that it worked at the top of the page for you, was that you had everything wrapped in a call to window.onload().

5. Pullo, I'm calling on you again. The code you gave me worked very well until recently. I added a section to record method of payment and now when I select MoP the Total field shows NaN. I'm assuming it's because the code is checking values of radio elements to include in the total, but I don't know how to fix it. Here's the code.
HTML Code:
```<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<title>Registration Form</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<body>
<form action="<?php echo \$editFormAction; ?>" method="POST" name="myform">
<h1>Registration</h1>
<input type="radio" name="fee" id="Couple" value=95.00> Couple \$95 <br>
<input type="radio" name="fee" id="Student" value=25.00> Student \$25<br><br>

Number of Children: <input name="childnum" type="text" id="Children" value="" size="3">
&nbsp;&nbsp; Cost: \$&nbsp;<input name="fee" type="text" id="childfee" value="0" size="8"><br>
(\$10 per child to cover cost of lunch)<br>

<h3>Cost</h3>
Total: <input name="total" id="total" type="text" onFocus="this.blur();" size="8" readonly>
Paid: \$<input name="amountpaid" id="amountpaid" type="text" size="8">

<br><br>
<h3>Method of payment:</h3>
<label>Cheque<input type="radio" name="method_pymt" id="method_pymt" value="Cheque"></label>
<label>Cash<input type="radio" name="method_pymt" id="method_pymt" value="Cash"></label>
<label>Money Order<input type="radio" name="method_pymt" id="method_pymt" value="Money Order"></label>
<br><br>
<input name="Submit" type="submit" class="button"  value="Register"></td>
</form>

<script type="text/javascript">
var form = document.forms['myform'];
var adultTotal = 0;
var kidsTotal = 0;

function updateTotal(tot1, tot2){
form.total.value = (adultTotal + kidsTotal).toFixed(2);
}

for(var i=0; i<form.elements.length; i++){
form.elements[i].onclick = function(){
for(var i=0,total=0; i<this.form.elements.length; i++){
var input = this.form.elements[i];
}
updateTotal();
}
}
}
}

form.Children.onkeyup = function(){
form.childfee.value = form.Children.value*10;
kidsTotal = Number(form.childfee.value);
updateTotal();
}

form.onsubmit = function(){
for(var i=0; i<this.elements.length; i++){
var input = this.elements[i];
input.value = input.id+'/'+input.value;
}
}
}
</script>
</body>
</html>```

6. Hi there,

The problem is that the code you started with is recalculating the total every time any radio button or checkbox changes.

Just limit the recalculation to the radio buttons with the name of "fee"

Change this:

Code JavaScript:
```if(input.type.match(/(checkbox|radio)/i) && input.checked){
}```
To this:

Code JavaScript:
```if(input.name.match(/fee/i) && input.checked){
}```

And all will be good.

7. Thank you again

8. Hello, thank you so much for this thread. i have been searching way too long to find this. Could you please help me? I am wanting to do this exact form but i would need another "Number of Children" section. I would greatly appreciate your help.

Thank you in advance!

9. Hi there Shnuk,

Welcome to the forums

Having two "Number of Children" fields, doesn't make much sense.
Do you mean a second text field whose value is also added to the total?

Why don't you post your HTML and I can help you hook it up to the JavaScript.

10. Hi, thank you for your reply. This is my "code" edited from your version. I would ideally like for there to be another two more text fields that will add to the total. They would be: Number of Subs and Number of Mics.

Also, (i know this is very simple but i am completely new) could i make all of the writing bold?

Thanks again

11. Code JavaScript:
```<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<title>Custom Calculator</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<body>
<form action="<?php echo €editFormAction; ?>" method="POST" name="myform">
<h1>Custom Calculator</h1>
<input type="radio" name="fee" id="Adult" value=00.00> No Mixer <br>
<input type="radio" name="fee" id="Couple" value=10.00> Small Mixer €10 <br>
<input type="radio" name="fee" id="Student" value=50.00> X32 Digital Mixer €50<br><br>

Number of Tops: <input name="childnum" type="text" id="Children" value="" size="3">
&nbsp;&nbsp; Cost: €&nbsp;<input name="fee" type="text" id="childfee" value="0" size="8"><br>

<h3>Cost</h3>
Total € <input name="total" id="total" type="text" onFocus="this.blur();" size="8" readonly>

</td>
</form>

<script type="text/javascript">
var form = document.forms['myform'];
var adultTotal = 0;
var kidsTotal = 0;

function updateTotal(tot1, tot2){
form.total.value = (adultTotal + kidsTotal).toFixed(2);
}

for(var i=0; i<form.elements.length; i++){
form.elements[i].onclick = function(){
for(var i=0,total=0; i<this.form.elements.length; i++){
var input = this.form.elements[i];
}
updateTotal();
}
}
}
}

form.Children.onkeyup = function(){
form.childfee.value = form.Children.value*30;
kidsTotal = Number(form.childfee.value);
updateTotal();
}

form.onsubmit = function(){
for(var i=0; i<this.elements.length; i++){
var input = this.elements[i];
input.value = input.id+'/'+input.value;
}
}
}
</script>
</body>
</html>```

12. Howdy,

Originally Posted by Shnuk
I would ideally like for there to be another two more text fields that will add to the total. They would be: Number of Subs and Number of Mics.
Quick question: should these fields also have their own "Cost" field, as "Number of tops" does? Also, how much do subs and mics cost?

Originally Posted by Shnuk
could i make all of the writing bold?
Sure! Just wrap the text in <strong> </strong> tags.

Let me know the answer to the above and I'll knock you up a quick demo.

13. Hi!

I'd like if the "cost" wasn't displayed on any of the fields. The Subs would cost €40 and the Mics would cost €10.

Thank you

14. Hi again,

I basically rewrote the script. Here you go:

Code:
```<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Custom Calculator</title>
<style>
#myForm div{
margin-bottom:15px;
}
</style>

<body>
<form action="" method="POST" name="myForm" id="myForm">
<h1>Custom Calculator</h1>

<div>
<input type="radio" name="mixer" id="no_mixer" value="0">
<label for="no_mixer">No Mixer</label>
</div>

<div>
<input type="radio" name="mixer" id="small_mixer" value="10">
<label for="small_mixer">Small Mixer €10</label>
</div>

<div>
<input type="radio" name="mixer" id="x32" value="50">
<label for="x32">X32 Digital Mixer €50</label>
</div>

<div>
<label for="tops">Number of Tops</label>
<input name="tops" type="text" id="tops" size="3">
</div>

<div>
<label for="subs">Number of Subs</label>
<input name="subs" type="text" id="subs" size="3">
</div>

<div>
<label for="mics">Number of Mics</label>
<input name="mics" type="text" id="mics" size="3">
</div>

<h3>Cost</h3>
<p>Total € <span id="cost">0</span></p>
</form>

<script type="text/javascript">
var f = document.forms['myForm'];
var radios = f.mixer;
var inputs = f.getElementsByTagName("input");

for(var i = 0; i < radios.length; i++) {
radios[i].onclick = function() {
updateTotal(Number(this.value));
}
}

for(var i in inputs){
if(inputs[i].type == "text"){
inputs[i].onkeyup = function(){
updateTotal(0);
}
}
}

function updateTotal(t){
var tot = Number(f.mics.value) * 10 +
Number(f.tops.value) * 25 +
Number(f.subs.value) * 40 +
t;
document.getElementById("cost").innerHTML = tot;
}
</script>
</body>
</html>```
That should more or less do what you want and should be fairly easy to extend.
If you have any questions, just let me know.

15. I LOVE you thank you so much!

16. Thanks ... I think
Seriously though, I'm happy to help.
If you have any more questions just let me know.

17. Now that you mention it there is one more thing....... would it be easy to add an "Order Now" button at the end that would send the info to my email? If it is difficult i don't want to waste your time.

Code:
```<html>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Custom Calculator</title>
<style>
#myForm div{
margin-bottom:5px;
}
</style>

<body>
<form action="" method="POST" name="myForm" id="myForm">

<div>
<input type="radio" name="mixer" id="no_mixer" value="0">
<label for="no_mixer"><strong>No Mixer<strong/></label>
</div>

<div>
<input type="radio" name="mixer" id="small_mixer" value="10">
<label for="small_mixer">Small Mixer </label>
</div>
<div>
<input type="radio" name="mixer" id="x32" value="50">
<label for="x32">X32 Digital Mixer</label>
</div>

<div>
<label for="tops">Number of Tops</label>
<input name="tops" type="text" id="tops" size="1">
</div>

<div>
<label for="subs">Number of Subs</label>
<input name="subs" type="text" id="subs" size="1">
</div>

<div>
<label for="mics">Number of Mics</label>
<input name="mics" type="text" id="mics" size="1">
</div>

<h2> Estimate Price <h2>*
**Total € <span id="cost">0</span>
</form>

<script type="text/javascript">
var f = document.forms['myForm'];
var radios = f.mixer;
var inputs = f.getElementsByTagName("input");

for(var i = 0; i < radios.length; i++) {
radios[i].onclick = function() {
updateTotal(Number(this.value));
}
}

for(var i in inputs){
if(inputs[i].type == "text"){
inputs[i].onkeyup = function(){
updateTotal(0);
}
}
}

function updateTotal(t){
var tot = Number(f.mics.value) * 10 +*
Number(f.tops.value) * 25 +*
Number(f.subs.value) * 40 +
t;
document.getElementById("cost").innerHTML = tot;
}
</script>
</body>
</html>```

18. Hi,

Originally Posted by Shnuk
would it be easy to add an "Order Now" button at the end that would send the info to my email?
This depends.
Do you have a server running PHP from which you can send mail?
This might sound complicated, but most shared hosting packages offer this.

19. Ehhhm i'm using weebly (i know it's terrible) so i doubt it there are built in forms that email info... Sorry i can't be more helpful.

20. Well, let's try it out.

Copy the following code into a PHP file on your computer:

PHP Code:
``` <?php if ( function_exists( 'mail' ) ){     echo 'mail() is available'; } else {     echo 'mail() has been disabled'; }   ?> ```
Upload it to your server and navigate to that address.
What message do you see?

21. I'm sorry but i haven't got a clue what to do... It's ok i will manage without

22. Shame. It's not that difficult.
Can you upload files to your webspace via FTP?

#### Posting Permissions

• You may not post new threads
• You may not post replies
• You may not post attachments
• You may not edit your posts
•