PDA

View Full Version : Sum values from form fields



stefig
09-12-2008, 07:09 PM
Hello,
I am working on a script, but I'm really not an expert. Any help will be highly appreciated.
Description:
I have items - some have option for adding an amount and some not (because they can be only 1).
I need when the checkboxes are clicked (choosing an item) the total to be displayed in the text field at the bottom.
the single items work fine, but when i choose the one that can be added amount, it deletes the total from the first ones.
Below is the script so you can see what I'm trying to explain:




<html><head>
<script type="text/JavaScript"><!--

var Cost;
var Amount = 0;

function getNumber() {
Amount = document.orderform.EVT_01.value;
}
function tally() {
Cost = 0;
if (document.orderform.Item1.checked) { Cost = Cost + 40; }
if (document.orderform.Item2.checked) { Cost = Cost + 30; }
if (document.orderform.Item3.checked) { Cost = 100 * Amount; }

Cost = dollar(Cost);
document.orderform.Total.value = "$" + Cost;
}

function dollar (amount)
{
amount = parseInt(amount * 100);
amount = parseFloat(amount/100);
if (((amount) == Math.floor(amount)) && ((amount - Math.floor (amount)) == 0))
{
amount = amount + ".00"
return amount;
}
if ( ((amount * 10) - Math.floor(amount * 10)) == 0)
{
amount = amount + "0";
return amount;
}
if ( ((amount * 100) - Math.floor(amount * 100)) == 0)
{
amount = amount;
return amount;
}
return amount;
}

//--></script>
</head>
<body><form name="orderform">
<table width="500" border="0" cellspacing="1" cellpadding="1">
<tr><td width="167"><input type="checkbox" name="Item1" value="Item1_chosen" onClick="tally()" />AAA</td>
<td width="51">$40</td>
<td width="109">&nbsp;</td></tr>
<tr><td><input type="checkbox" name="Item2" value="Item2_chosen" onClick="tally()" />BBB</td>
<td>$30</td>
<td>&nbsp;</td></tr>
<tr><td colspan="3">&nbsp;</td></tr>
<tr><td><input type="checkbox" name="Item3" value="Item3_chosen" onClick="tally()" /><span class="EventPrice"><a href="#" title=" CCC "

target="_blank">CCC</a></span></td>
<td><span class="EventPrice">$100</span></td>

<td>Amount:<input name="EVT_01" type="text" id="EVT_01" value="0" size="3" maxlength="3" onChange="getNumber()" /></td></tr>
<tr>
<td colspan="3">&nbsp;</td></tr>
<tr><td>Total:<input name="Total" type="text" value="$0" size="7" readonly="readonly"></td>
<td colspan="2">&nbsp;</td></tr>
</table></form></body></html>




Thanks in advance for your help!

Nile
09-12-2008, 11:41 PM
Here:


<html><head>
<script type="text/JavaScript"><!--

var Cost;
var Amount = 0;

function getNumber() {
Amount = document.orderform.EVT_01.value;
}
function tally() {
Cost = 0;
if (document.orderform.Item1.checked) { Cost = Cost + 40; }
if (document.orderform.Item2.checked) { Cost = Cost + 30; }
if (document.orderform.Item3.checked) { Cost = 100 * Amount; }

Cost = dollar(Cost);
document.orderform.Total.value = "$" + Cost;
}

function dollar (amount)
{
amount = parseInt(amount * 100);
amount = parseFloat(amount/100);
if (((amount) == Math.floor(amount)) && ((amount - Math.floor (amount)) == 0))
{
amount += ".00"
return amount;
}
if ( ((amount * 10) - Math.floor(amount * 10)) == 0)
{
amount += amount + "0";
return amount;
}
if ( ((amount * 100) - Math.floor(amount * 100)) == 0)
{
amount += amount + amount;
return amount;
}
return amount;
}

//--></script>
</head>
<body><form name="orderform">
<table width="500" border="0" cellspacing="1" cellpadding="1">
<tr><td width="167"><input type="checkbox" name="Item1" value="Item1_chosen" onClick="tally()" />AAA</td>
<td width="51">$40</td>
<td width="109">&nbsp;</td></tr>
<tr><td><input type="checkbox" name="Item2" value="Item2_chosen" onClick="tally()" />BBB</td>
<td>$30</td>
<td>&nbsp;</td></tr>
<tr><td colspan="3">&nbsp;</td></tr>
<tr><td><input type="checkbox" name="Item3" value="Item3_chosen" onClick="tally()" /><span class="EventPrice"><a href="#" title=" CCC "

target="_blank">CCC</a></span></td>
<td><span class="EventPrice">$100</span></td>

<td>Amount:<input name="EVT_01" type="text" id="EVT_01" value="0" size="3" maxlength="3" onChange="getNumber()" /></td></tr>
<tr>
<td colspan="3">&nbsp;</td></tr>
<tr><td>Total:<input name="Total" type="text" value="$0" size="7" readonly="readonly"></td>
<td colspan="2">&nbsp;</td></tr>
</table></form></body></html>

stefig
09-13-2008, 02:09 AM
Hey Nile,
Can you show me where the difference is?
I can't see any.

Twey
09-13-2008, 11:27 AM
Better (by far):
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>cmene be fa no da pagbu</title>
<script type="text/javascript">
var Format = {
currency: function(n, dp, s) {
return (s || '$') + n.toFixed(dp || 2);
},

interpolate: function(s) {
for (var i = 1; i < arguments.length; ++i)
s = s.replace("%s", arguments[i]);

return s;
}
};

var Functional = {
map: function(f, a) {
for (var i = a.length - 1, r = []; i >= 0; --i)
r[i] = f(a[i], i);

return r;
}
};

var Dom = {
getElementsByClassName: (function() {
function getElementsByClassName_(root, className) {
return (className(root.className || "") ? [root] : []).concat(entr(root, className));
}

function entr(root, className) {
if (typeof className === "string")
className = (function(cn) {
return function(c) {
return c.indexOf(cn) >= 0;
};
})(className);

return Array.prototype.concat.apply([], Functional.map(function(e) {
return getElementsByClassName_(e, className);
}, root.childNodes));
}

return entr;
})()
};

var TallyPage = {
sumForm: function(frm, qstr) {
for (var t = 0, v, e = Dom.getElementsByClassName(frm, "sum"), i = e.length; --i >= 0; )
if (e[i].type === "checkbox" && e[i].checked)
t += ((v = frm.elements[Format.interpolate(qstr, e[i].name)]) ? v.value : 1) * parseInt(e[i].value, 10);

return t;
},

updateForm: function(frm, out) {
(out.firstChild || out.appendChild(document.createTextNode(""))).nodeValue = Format.currency(TallyPage.sumForm(frm, "%s_q"));
},

init: function() {
var ud = function() { TallyPage.updateForm(this.form, document.getElementById("output")); },
v;

Functional.map(function(e) { e.onclick = e.onkeyup = e.onchange = ud; },
Dom.getElementsByClassName(v = document.forms['sum_form'], function(c) {
return c.indexOf('sum') >= 0 || c.indexOf('quantity') >= 0;
}));

TallyPage.updateForm(v, document.getElementById("output"));

(v = v.elements.subm).parentNode.removeChild(v);
v = null;
}
};

onload = TallyPage.init;
</script>
</head>
<body>
<form action="/some/summer" id="sum_form">
<table>
<thead>
<tr>
<th>&nbsp;</th>
<th>Event</th>
<th>Price</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" value="40" class="sum" name="aaa">
</td>
<td>AAA</td>
<td>$40.00</td>
<td>1</td>
</tr>
<tr>
<td>
<input type="checkbox" value="30" class="sum" name="bbb">
</td>
<td>BBB</td>
<td>$30.00</td>
<td>1</td>
</tr>
<tr>
<td>
<input type="checkbox" value="100" class="sum" name="ccc">
</td>
<td>
<a href="#" title="CCC">CCC</a>
</td>
<td>$100.00</td>
<td>
<input type="textbox" class="quantity" name="ccc_q">
</td>
</tr>
</tbody>
</table>
<span id="output">&nbsp;</span>
<input name="subm" type="submit" value="Show Total">
</form>
</body>
</html>

I suggest you have a read of http://dynamicdrive.com/forums/showpost.php?p=158839&postcount=1337.

Nile
09-14-2008, 02:16 AM
Hey Nile,
Can you show me where the difference is?
I can't see any.

I've highlighted the difference.

stefig
09-26-2008, 01:33 PM
Thanks, Tway.
Your code is awesome.
It's a very different approach, but i like it a lot.
Thank you!

clunky
11-19-2008, 08:30 AM
Hi Twey
Thats a nice solution, apart from one thing....
If the value of the price value is a decimal (which is what I need) it doesn't calculate correctly. It seems not to take account of the decimal point?


<input type="checkbox" value="100.50" class="sum" name="ccc">

I have tried to alter the Format: currency but to no avail.
I was wondering if there has been any further developments with this particular app or you could point me in the right direction.
Anyone?

Cheers

Twey
11-19-2008, 09:24 AM
You're right: change parseInt(e[i].value, 10) to parseFloat(e[i].value).

clunky
11-19-2008, 09:50 AM
:-) Very nice, thank you loads !!
Strange how just a simple thing like that will mess it all up .
Cheers

clunky
11-19-2008, 09:54 AM
Twey
If I wanted to see if the tally sum was less than another total, could I grab the output and do some maths with that?
like...

if (Dom.getElementsByClassName(output){
do this...}
If a customer needs to see if their total amount is less than a discountable amount then show them how much they need to add in order to get to the right total.
Cheers

Twey
11-19-2008, 02:39 PM
Yes, certainly — the TallyPage.sumForm(form, qstr) function is pure, and simply calculates the total without doing anything else.

dienchan
06-19-2011, 06:33 PM
Hi Twey
Your script TallyPage to sum form fields is great and i would like to know if it is possible to recover the sum result?
but i don't understand what is the name of the var.
How do you print it then somewhere else in another <span id="output2"> for exemple?
I would like to recover the result to be able to write it again on the form and receive it also with the email the cgi sends me.
Thanks for your time

http://multireflex.eu/dienshop2/ds_spain_sumacarro_TWEY.htm