Web Form calculated running total

U

ultramel1987

Well-Known Member
Joined
Dec 31, 2010
Messages
193
Reaction score
0
HI there

i wonder if someone could perhaps assist me please? I am have an online webform with various options for the user to sselect before submitting the form (the form is a request for a booking). I would like the form to automatically calculate a "running total" of the conference booking at the bottom. what would be the way to do this?

the user enters the following:


Name of Contact Person:
Company:
Official Name Of Conference
Tel No Of Contact Person:

Duration: Full Day @ R220.00
Half Day @ R200.00 (these are radio buttons)

No Of People :

Please select a menu: (tickboxes)
Menu A: R60.00
Menu B: R90.00
Menu C: R120.00
Braai/Barbeque: R150.00


Overhead Projector R650.00 (tickbox)
Email of Contact Person:

Thank you
 
You should be able to do this by using JavaScript,

Take the amount relevant to the options selected,
calculate a running total and display it on a label.

You can also have 2 labels, display the inclusive of vat and exclusive of vat amount.
 
Yup, you can ONLY do running totals as someone changes the drop down or selection boxes if you use javascript.

Something like this would work:
HTML

Menu :
Menu A : <input type="checkbox" name="calculate" value="60" onclick="updateTotals()"/>
Menu B : <input type="checkbox" name="calculate" value="90" onclick="updateTotals()"/>
Menu C : <input type="checkbox" name="calculate" value="120" onclick="updateTotals()"/>

Overhead Projector R650 : <input type="checkbox" name="calculate" value="650" onclick="updateTotals()"/>

Subtotal : R<span id="subtotal"></span>

JAVASCRIPT

function updateTotals()
{
var num = document.getElementsByName("calculate");
var subTotal = 0;
for (var i = 0; i < num.length;i++)
{
if (num.checked)
subTotal = subTotal + num.value;
}
document.getElementById("subtotal").innerHTML = subTotal;
}

EXPLANATION
Basically, if you make each of the elements you want to add up have a ' name="calculate" ' and make sure that there is a onclick="updateTotals()" it will quickly go through the list of numbers and add up the ones that are selected. Thats about the easiest way to do it...

If you are really interested, I have actually written a online booking software application (web based). Go check the link in my signature for it...
 
what ozzie said.
except you wouldn't put javascript event handlers on the elements themselves... you'd use a js framework like jquery to do the selection, processing and manipulation.
 
@murraybiscuit Why would you not do the event handling yourself? Scared of a bit of plain old hardcoded JS ??? Wus. Back in my day, real programmers worked in Machine Language! :-D

I really am not a big fan of the frameworks (yes, I have used them - both jquery and others)
 
thank you thank you thank you!!! (almost complete)

Thank you to all. It is basically working perfectly, thank you so much to all for your help -
One last thing I would like to do (not sure if possible)

I have my "subtotal" now showing at the bottom of my form, is it possible to multiply the subtotal by the "number of people attending" as the total is "per person" (except for the overhead projector rental though.... that is obviously only once off"

Is that possible
I will then perhaps show a "per person" total, and then a "TOTAL" (which is the "no of people" * "sub total)

if anyone is perhaps willing, could I maybe send you the .html and the .js files to take a peek please?

thank you so much
 
Anything is possible and what your asking for is very simple to implement.
 
Hi MelissaFleet
Send them this way, ill try have a look at it a bit later when i get home, if you can wait :-)
 
Great, thank you
can I attach files here or could you maybe pm me your email (I promise not to harass you) :-)
 
thats true:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>

<script type="text/javascript" src="autoSumCheckboxes.js"></script>
<title>
Contact Form Test
</title>
</head>
<body>

<div>
<input type="hidden" name="acctid" id="acctid" value="7lwa2kwod1xsnds5" />
<input type="hidden" name="formid" id="formid" value="975213" />
<input type="hidden" name="required_vars" id="required_vars" value="name" />
</div>
<table cellspacing="5" cellpadding="5" border="0">

<td valign="top">
<strong>Name of Contact Person:</strong>
</td>
<td valign="top">
<input type="text" name="name" id="name" size="40" value="" />

</td>
</tr>
<tr>
<td valign="top">
<strong>Company:</strong>
</td>
<td valign="top">
<input type="text" name="email" id="email" size="40" value="" />

</td>
</tr>
<tr>
<td valign="top">
<strong>Official Name Of Conference</strong>
</td>
<td valign="top">
<input type="text" name="field-36b58f8c5142ff3" id="field-36b58f8c5142ff3" size="40" value="" />

</td>
</tr>
<tr>
<td valign="top">
<strong>Tel No Of Contact Person:</strong>
</td>
<td valign="top">
<input type="text" name="field-7c496d0fb21abfd" id="field-7c496d0fb21abfd" size="40" value="" />

</td>
</tr>
<tr>
<td valign="top">
<strong>Duration:</strong>
</td>
<td valign="top">
<input type="checkbox" name="field-385963a5c9a4ef9" id="game4" value="220.00" onclick="UpdateCost()"> Full Day R220.00<br/>
<input type="checkbox" name="field-385963a5c9a4ef9" id="game5" value="200.00" onclick="UpdateCost()"> Half Day R200.00<br/>

</td>
</tr>
<tr>
<td valign="top">
<strong>No Of People</strong>
</td>
<td valign="top">
<input type="text" name="field-5af722f60ee2f9b" id="field-5af722f60ee2f9b" size="40" value="" />

</td>
</tr>
<tr>
<td valign="top">
<strong>Please select a menu:</strong>
</td>

<td valign="top">
<input type="checkbox" id='game0' value="60.00" onclick="UpdateCost()">Menu A (60.00)<br>
<input type="checkbox" id='game1' value="90.00" onclick="UpdateCost()">Menu B (90.00)<br>
<input type="checkbox" id='game2' value="120.00" onclick="UpdateCost()">Menu C (120.00)<br>
<input type="checkbox" id='game3' value="150.00" onclick="UpdateCost()">Braai/Barbeque (150.00)<br>


</td>
</tr>
<tr>
<td valign="top">
<strong>Overhead Projector</strong>
</td>
<td valign="top">
<input type="checkbox" name="field-73cf21adf8b52d5[]" id="game6" value="650.00" onclick="UpdateCost()">R650.00 <br/>

</td>
</tr>
<tr>
<td valign="top">
<strong>Email of Contact Person: </strong>
</td>
<td valign="top">
<input type="text" name="field-3f92f5a7876cd50" id="field-3f92f5a7876cd50" size="40" value="" />

</td>

<tr>
<td valign="top">
<strong>Sub Total: </strong>
</td>
<td valigh="top">
<input type="text" id="totalcost" size="40" value="">

</td>


<tr>

<td colspan="2" align="center">
<input type="submit" value=" Submit Form " />
</td>



</tr>


</form>

</body>
</html>





/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Jay Rumsey | http://www.nova.edu/~rumsey/ */

function UpdateCost() {
var sum = 0;
var gn, elem;
for (i=0; i<7; i++) {
gn = 'game'+i;
elem = document.getElementById(gn);
if (elem.checked == true) { sum += Number(elem.value); }
}
document.getElementById('totalcost').value = sum.toFixed(2);
}
 
May I ask what this is for?
This does what you asked for:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>

<script type="text/javascript" src="autoSumCheckboxes.js"></script>
<title>
Contact Form Test
</title>
</head>
<body>

<div>
<input type="hidden" name="acctid" id="acctid" value="7lwa2kwod1xsnds5" />
<input type="hidden" name="formid" id="formid" value="975213" />
<input type="hidden" name="required_vars" id="required_vars" value="name" />
</div>
<table cellspacing="5" cellpadding="5" border="0">

<td valign="top">
<strong>Name of Contact Person:</strong>
</td>
<td valign="top">
<input type="text" name="name" id="name" size="40" value="" />

</td>
</tr>
<tr>
<td valign="top">
<strong>Company:</strong>
</td>
<td valign="top">
<input type="text" name="email" id="email" size="40" value="" />

</td>
</tr>
<tr>
<td valign="top">
<strong>Official Name Of Conference</strong>
</td>
<td valign="top">
<input type="text" name="field-36b58f8c5142ff3" id="field-36b58f8c5142ff3" size="40" value="" />

</td>
</tr>
<tr>
<td valign="top">
<strong>Tel No Of Contact Person:</strong>
</td>
<td valign="top">
<input type="text" name="field-7c496d0fb21abfd" id="field-7c496d0fb21abfd" size="40" value="" />

</td>
</tr>
<tr>
<td valign="top">
<strong>Duration:</strong>
</td>
<td valign="top">
<input type="checkbox" name="field-385963a5c9a4ef9" id="game4" value="220.00" onclick="UpdateCost()"> Full Day R220.00<br/>
<input type="checkbox" name="field-385963a5c9a4ef9" id="game5" value="200.00" onclick="UpdateCost()"> Half Day R200.00<br/>

</td>
</tr>
<tr>
<td valign="top">
<strong>No Of People</strong>
</td>
<td valign="top">
<input type="text" name="field-5af722f60ee2f9b" id="field-5af722f60ee2f9b" size="40" value="" onchange="UpdateCost()"/>

</td>
</tr>
<tr>
<td valign="top">
<strong>Please select a menu:</strong>
</td>

<td valign="top">
<input type="checkbox" id='game0' value="60.00" onclick="UpdateCost()">Menu A (60.00)<br>
<input type="checkbox" id='game1' value="90.00" onclick="UpdateCost()">Menu B (90.00)<br>
<input type="checkbox" id='game2' value="120.00" onclick="UpdateCost()">Menu C (120.00)<br>
<input type="checkbox" id='game3' value="150.00" onclick="UpdateCost()">Braai/Barbeque (150.00)<br>


</td>
</tr>
<tr>
<td valign="top">
<strong>Overhead Projector</strong>
</td>
<td valign="top">
<input type="checkbox" name="field-73cf21adf8b52d5[]" id="game6" value="650.00" onclick="UpdateCost()">R650.00 <br/>

</td>
</tr>
<tr>
<td valign="top">
<strong>Email of Contact Person: </strong>
</td>
<td valign="top">
<input type="text" name="field-3f92f5a7876cd50" id="field-3f92f5a7876cd50" size="40" value="" />

</td>

<tr>
<td valign="top">
<strong>Sub Total: </strong>
</td>
<td valigh="top">
<input type="text" id="totalcost" size="40" value="">

</td>


<tr>

<td colspan="2" align="center">
<input type="submit" value=" Submit Form " />
</td>



</tr>


</form>

</body>
</html>

Code: 
/* This script and many more are available free online at The JavaScript Source!! http://javascript.internet.com Created by: Jay Rumsey | http://www.nova.edu/~rumsey/ */

function UpdateCost() {
var sum = 0;
var gn, elem, totalAmmount, peopleNum; 
for (i=0; i<7; i++) {
gn = 'game'+i;
elem = document.getElementById(gn);
if (elem.checked == true) { sum += Number(elem.value); }
}
peopleNum = document.getElementById('field-5af722f60ee2f9b').value; 
if(isNaN(peopleNum ) || peopleNum==''){
totalAmmount = sum;
}
else{
totalAmmount = sum * peopleNum;
}
document.getElementById('totalcost').value = totalAmmount.toFixed(2);
}
 
thank you so much - that is amazing!!! thank you. is there any possibility of excluding "projector of R650" from multiplying by no of people - as they only pay for the projector "per conference" and not per person, so that field must only be added once.
thank you so so much - you're a lifesaver :-)
 
I ask again what are you planning to do with this code?

I've updated the script, just know that there is allot that still needs to be done if your planning to "go live" with this.


Code: 
/* This script and many more are available free online at The JavaScript Source!! http://javascript.internet.com Created by: Jay Rumsey | http://www.nova.edu/~rumsey/ */

function UpdateCost() {
var sum = 0;
var gn, elem, totalAmmount, peopleNum; 
for (i=0; i<7; i++) {
gn = 'game'+i;
if(gn != 'game6'){
elem = document.getElementById(gn);
if (elem.checked == true) { sum += Number(elem.value); }
}
peopleNum = document.getElementById('field-5af722f60ee2f9b').value; 
if(isNaN(peopleNum ) || peopleNum==''){
totalAmmount = sum;
}
else{
totalAmmount = sum * peopleNum;
}
}
if(document.getElementById('game6').checked == true)
{
totalAmmount += Number(document.getElementById('game6').value);
}
document.getElementById('totalcost').value = totalAmmount.toFixed(2);
}
 
Hi. Thank you so much it works perfectly
Sorry for not answering previously - this is for a booking form on a website. the code is going to be inserted into a "html placeholder" in the wysiwyg web editor.
I us the form script available on the cPanel of the website to setup the "sending' of the form. and I also know to upload the javascript file for the form onto the cpanel
is there anything I am missing?

Thank you so much once again :-)
 
There is plenty you are missing:
Validating the fields
Error handling
Security

Some examples are:
After completing the form and the total being calculated, I can just change the total to 5 before I submit if I want.
I can put anything in any field or nothing so they are potentially useless you need some basic validation.

Unfortunately what is currently there is very risky to put on a live web site, do you not know someone that can give you some guidance and help?
 
oh my gosh. i didn't think of that. i've been struggling with this for so long :-(
no unfortunately I don't know anyone who can help
I originally used Freedforms for the contact form, which worked fine, until the need arized for calculations being done :-(

thank you so much for all your help :-)
 
anyone willing to help out please

hi there
i have tried to get the above working, but really struggling. i know this is a lot to ask, but is anyone perhaps willing to give me a bit of help with this calculating form please?
I would really appreciate it, :-) Please

Thank you so much
 
Hi Melissa

I have also just completed my form for my website. Have a look at my signature. Maybe after the form has been filled in pass it to another page where you can do validating before the form gets sent/emailed.
 
You must log in or register to reply here.
Back
Top
Sign up to the MyBroadband newsletter
X