Sum values from form fields

stefig · 09-12-2008, 07:49 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:

Code:

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

Philip M · 09-12-2008, 08:08 PM

Javascript is case sensitive. amount != Amount.

Suggest you use find and replace to change all instances of Amount to amount and all instances of Cost to cost. Then it works.

Also:

if (document.orderform.Item3.checked) { Cost = Cost + (100 * amount); }

BTW, the time to say "thanks" is afterwards, not beforehand which gives the impression that you take other people's unpaid assistance for granted. Or as British politician Neil Kinnock put it, "Don't belch before you have had the meal." Prefer to use "please" beforehand and if you find a response helpful then you can use the "Thank User For This Post" button.

stefig · 09-12-2008, 08:57 PM

Thanks, Philip,
You're right about the thanks in advance. :-)
But now I can surely do say it, because you really helped.
I have just one small issue left.
Now, on "CCC" item, if you check the box first and then add Amount it doesn't change.
You have to put the amount and then to check the box to work fine.
Is there a way to make it the opposite?
(I mean check the box first and then when add amount the total will change).

jmrker · 09-13-2008, 05:09 AM

I think you can do what you want and simplify it somewhat with this.

PHP Code:


			
<html>
<head>
<script type="text/JavaScript">
// From: http://codingforums.com/showthread.php?t=148723

        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 = cost.toFixed(2);
        document.orderform.Total.value = "$" + cost;
        }
</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();tally()" /></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>

Note the removal of the 'dollar' function
which is replaced with the cost.toFixed(2) function.

Note that you could also replace:

PHP Code:


			
<td>Amount:<input name="EVT_01" type="text" id="EVT_01" value="0" size="3" maxlength="3"
 onChange="getNumber();tally()" /></td>

with:

PHP Code:


			
<td>Amount:<input name="EVT_01" type="text" id="EVT_01" value="0" size="3" maxlength="3"
 onBlur="getNumber();tally()" /></td>

Good Luck!

Philip M · 09-13-2008, 08:59 AM

Correction:-

if (document.orderform.Item3.checked) { cost = cost + (100 * amount) }