...

View Full Version : Automatic total



CPower
04-14-2005, 12:56 PM
Hey Guys,

Could anybody give me a piece of code that will show the answer of a quantity entered by a user, multiplyed by a set price/number. I would like the total to automatically be shown. Been struggling with this for a while now!
A bit of help would be great.

Thanks,
Cathal.

A1ien51
04-14-2005, 02:00 PM
onchange="alert(parseFloat(this.value)*12345);"

CPower
04-14-2005, 02:14 PM
Sorry to be an idiot about this but i'v used java before but not much javascript. I want to enter this into a table. The code i have for it at the mo is:



<table width="654" height="64" border="3" align="center" bordercolor="#BEDEC6">
<tr>
<td width="260" height="26"><div align="left"><span class="style18">Ageratum</span></div></td>
<td width="152"><span class="style18">2.50 euro</span></td>
<td width="113"><input size=7 name="Quantity" value=""></td>
<td width="97">onchange="alert(parseFloat(this.value)*12345);"</td>
</tr>
<tr>
<td height="26"><div align="left"><span class="style18">Alyssum</span></div></td>
<td><span class="style18">2.50 euro</span></td>
<td><input size=7 name="Quantity" value=""></td>
<td>onchange="alert(parseFloat(this.value)*12345);"</td>
</tr>
</table>


I'v entered the code into where i want the total to be shown, but how do i set 2.50 euro to this.value

this.value = 2.5 stated before the table.???

Thanks a mill for the help on this.

Cathal.

glenngv
04-15-2005, 09:36 AM
<script type="text/javascript">
function compute(oQty, iPrice, sTotalId){
document.getElementById(sTotalId).innerHTML = oQty.value*iPrice;
}
</script>
...
<td><input size="7" name="Quantity" value="" onchange="compute(this, 2.50, 'total');" /></td>
<td><span id="total"></span></td>
Take note that id should be unique so you need to specify different ids for other totals. To make the price fixed to 2 decimal places, use the script that can be found in the sticky FAQ in this forum.

CPower
04-15-2005, 12:29 PM
Thanks a million man this is a great help, able to work this in perfectly.

Cathal.

CPower
04-15-2005, 12:39 PM
"Iv been trying to get the "onchange="alert(parseFloat(this.value));"" funtion to work in the total field so as the answer will appear automatically but can't seem to make it work. When i enter the answer into the quantity testbox i have to click to one side to get the answer to appear in the total field. Tried making the page refresh but this does no work either?? Any ideas?"

DONT MIND ALL THAT! just created a fake button called view total, works perfectly.


Thanks,
Cathal.

CPower
04-15-2005, 02:02 PM
Me.....again!!!

Could anyone help me on getting an Overall total function working for this. Tryed coding this but its pretty complicated and hard to get a hang of. I know its just a matter of adding all the total varibles together total1+total2..etc., but can't do it.

Cheers,
Cathal.

vwphillips
04-15-2005, 04:17 PM
this does not recognise backspace but may assist




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--

function CalTotal(obj,id,mul){
Obj=obj;
Id=id;
Mul=mul;
obj.onkeypress=function(event){ RetnKey(event); }
if (isNaN(obj.value)){
alert('Only Numbers Allowed');
obj.value=obj.value.substring(0,obj.value.length-1);
return;
}
document.getElementById(id).value=obj.value*mul;
}

function RetnKey(e){
if (!document.all){
if (e.which!=8){return; }
}
else {
if (event.keyCode!=8){return; }
}
CalTotal(Obj,Id,Mul)
}

//-->
</script>
</head>

<body>
<table width="654" height="64" border="3" align="center" bordercolor="#BEDEC6">
<tr>
<td width="260" height="26"><div align="left"><span class="style18">Ageratum</span></div></td>
<td width="152"><span class="style18">2.50 euro</span></td>
<td width="113"><input size=7 name="Quantity" value="" onkeyup="CalTotal(this,'Total1',2.5);" ></td>
<td width="97"><input size=7 id="Total1" value=" " onkeypress="return false; " ></td>
</tr>
<tr>
<td height="26"><div align="left"><span class="style18">Alyssum</span></div></td>
<td><span class="style18">3.50 euro</span></td>
<td><input size=7 name="Quantity" value="" onkeyup="CalTotal(this,'Total2',3.5);" ></td>
<td><input size=7 id="Total2" id="Total2" value=" " onkeypress="return false; "></td>
</tr>
</table>
</body>

</html>


Edited to account for BackSpace

playing again



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--

var Obj,Mul,Add,TotalVals,TotalObj;
var ObjAry=new Array();

function CalTotal(obj,mul){
Obj=obj;
Mul=mul;
obj.onkeypress=function(event){ RetnKey(event); }
if (isNaN(obj.value)){
alert('Only Numbers Allowed');
obj.value=(obj.value.substring(0,obj.value.length-1));
return;
}
TotalObj=document.getElementById(obj.title.split(',')[0]);
TotalObj.value=(obj.value*mul).toFixed(2);
TotalObj.size=obj.value.length+3;
Add=1;
for (i=0;i<ObjAry.length;i++){
if (TotalObj==ObjAry[i]){
Add=0;
}
}
if (Add){
ObjAry[ObjAry.length]=TotalObj;
}
TotalVals=0
for (i=0;i<ObjAry.length;i++){
TotalVals+=parseFloat(ObjAry[i].value);
}
if (obj.title.split(',')[1]){
document.getElementById(obj.title.split(',')[1]).value=TotalVals.toFixed(2);
document.getElementById(obj.title.split(',')[1]).size=(toString(TotalVals)).length+3;
}
}

function RetnKey(e){
if (!document.all){
if (e.which!=8){return; }
}
else {
if (event.keyCode!=8){return; }
}
CalTotal(Obj,Mul)
}

//-->
</script>
</head>

<body>
<table height="64" border="3" align="center" bgcolor="#FFFFCC" bordercolor="#BEDEC6">
<tr>
<td width="100" height="26"><div align="left"><span class="style18">Ageratum</span></div></td>
<td width="80"><span class="style18">2.50 euro</span></td>
<td width="80"><input size=7 title="Total1,GTotal" name="Quantity" value="" onkeyup="CalTotal(this,2.5);" ></td>
<td width="120"> euros <input size=1 id="Total1" value=" " onkeypress="return false;" style="border:0px;background-Color:#FFFFCC;" ></td>
</tr>
<tr>
<td height="26"><div align="left"><span class="style18">Alyssum</span></div></td>
<td><span class="style18">3.50 euro</span></td>
<td><input size=7 title="Total2,GTotal" name="Quantity" value="" onkeyup="CalTotal(this,3.5);" ></td>
<td> euros <input size=1 id="Total2" id="Total2" value=" " onkeypress="return false;" style="border:0px;background-Color:#FFFFCC;" ></td>
</tr>
<tr>
<td height="26"></td>
<td></td>
<td>Total</td>
<td> euros <input size=1 id="GTotal" name="GTotal2" value=" " onkeypress="return false;" style="border:0px;background-Color:#FFFFCC;" ></td>
</tr>
</table>
</body>

</html>


is all in the title

CPower
04-15-2005, 04:56 PM
Works a treat thanks a mill, all i need to do now is get that overall total row working.

Thanks
Cathal.

vwphillips
04-15-2005, 05:37 PM
posts crossed
see my last edit




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<title></title>

<script language="JavaScript" type="text/javascript">
<!--

// Form Compendium f2 (15-04-2005)
// by Vic Phillips http://www.vicsjavascripts.org.uk

// Multiply a 'source' Text Box value with a number and display the result in a 'result' text box
// Any number of applications can exist on a page.

// Application Notes

// the 'source' text box must be allocated a onkeyup event call
// onkeyup="f2_CalTotal(this,*Multiplier*);"
// where *Multiplier* = the multipier number
// The 'result' text box id is specified as the title of the source text box
// e.g.
// <input size=7 title="JoeResult" name="Quantity" value="" onkeyup="f2_CalTotal(this,3.5);" >
// <input size=1 id="JoeResult" value=" " onkeypress="return false;" style="border:0px;background-Color:#FFFFCC;" >

// If a number of 'result' text box values are to be added in a 'Total' text box
// The 'Total' id must be allocated a unique id
// the title of the 'source' text box includes the 'Result' id and the 'Total' id separated with a comma
// e.g.
// <input size=7 title="FredResult,Total" name="Quantity" value="" onkeyup="f2_CalTotal(this,3.5);" >
// <input size=1 id="FredResult" value=" " onkeypress="return false;" style="border:0px;background-Color:#FFFFCC;" >

// <input size=7 title="JoeResult,Total" name="Quantity" value="" onkeyup="f2_CalTotal(this,3.5);" >
// <input size=1 id="JoeResult" value=" " onkeypress="return false;" style="border:0px;background-Color:#FFFFCC;" >

//<input size=1 id="TotalA" name="TotalA" value=" " onkeypress="return false;" style="border:0px;background-Color:#FFFFCC;" >

// The 'Total' must also be initialised by a <body> onload event
// e.g. <body onload="f2_InitTotal('Total');f2_InitTotal('TotalA');" >

// If the sum of the 'Total' text boxes is to be displayed as a 'GrandTotal'
// A text box must be specified with an id of 'f2_GrandTotal' to display the sum.

// All variable, function etc. names are prefixed with 'f2_' to minimise conflicts with other javascripts

// Functional Code

// No Need to Change

var f2_Obj,f2_Mul,f2_Add,f2_TotalVals,f2_ResultObj,f2_TotalObj,f2_Find;
var f2_ObjAry=new Array();

function f2_InitTotal(id){
f2_ObjAry[f2_ObjAry.length]=new Array();
f2_ObjAry[f2_ObjAry.length-1][0]=0;
f2_ObjAry[f2_ObjAry.length-1][1]=id;
}

function f2_CalTotal(obj,mul){
f2_Obj=obj;
f2_Mul=mul;
if (isNaN(obj.value)){
alert('Only Numbers Allowed');
obj.value=(obj.value.substring(0,obj.value.length-1));
return;
}
f2_ResultObj=f2_gEBId(obj.title.split(',')[0]);
f2_ResultObj.value=(obj.value*mul).toFixed(2);
f2_ResultObj.size=obj.value.length+3;
f2_Find=-1
for (i0=0;i0<f2_ObjAry.length;i0++){
if (f2_ObjAry[i0][1]==obj.title.split(',')[1]){
f2_Find=i0;
}
}
if (f2_Find<0){ return; }
f2_Add=1;
for (i1=1;i1<f2_ObjAry[f2_Find].length;i1++){
if (f2_ResultObj==f2_ObjAry[f2_Find][i1]){
f2_Add=0;
}
}
if (f2_Add){
f2_ObjAry[f2_Find][f2_ObjAry[f2_Find].length]=f2_ResultObj;
obj.onkeypress=function(event){ f2_RetnKey(event); }
}
f2_TotalVals=0;
for (i=2;i<f2_ObjAry[f2_Find].length;i++){
f2_TotalVals+=parseFloat(f2_ObjAry[f2_Find][i].value);
}
f2_TotalObj=f2_gEBId(obj.title.split(',')[1]);
f2_TotalObj.value=f2_TotalVals.toFixed(2);
f2_TotalObj.size=f2_TotalVals.toString().length+2;
f2_ObjAry[f2_Find][0]=parseFloat(f2_TotalObj.value);
if (f2_gEBId('f2_GrandTotal')){
f2_TotalVals=0;
for (f2_2=0;f2_2<f2_ObjAry.length;f2_2++){
f2_TotalVals+=f2_ObjAry[f2_2][0];
}
f2_gEBId('f2_GrandTotal').value=f2_TotalVals.toFixed(2);
f2_gEBId('f2_GrandTotal').size=f2_TotalVals.toString().length+2;
}
}

function f2_gEBId(id){
return document.getElementById(id);
}

function f2_RetnKey(e){
if (!document.all){
if (e.which!=8){return; }
}
else {
if (event.keyCode!=8){return; }
}
f2_CalTotal(f2_Obj,f2_Mul)
}

//-->
</script>
</head>

<body onload="f2_InitTotal('Total');f2_InitTotal('TotalA');" >

<table height="64" border="3" align="center" bgcolor="#FFFFCC" bordercolor="#BEDEC6">
<tr>
<td width="100" height="26"><div align="left"><span class="style18">Ageratum</span></div></td>
<td width="80"><span class="style18">2.50 euro</span></td>
<td width="80"><input size=7 title="AgeratumResult,Total" name="Quantity" value="" onkeyup="f2_CalTotal(this,2.5);" ></td>
<td width="120"> euros <input size=1 id="AgeratumResut" value=" " onkeypress="return false;" style="border:0px;background-Color:#FFFFCC;" ></td>
</tr>
<tr>
<td height="26"><div align="left"><span class="style18">Alyssum</span></div></td>
<td><span class="style18">3.50 euro</span></td>
<td><input size=7 title="AlyssumResult,Total" name="Quantity" value="" onkeyup="f2_CalTotal(this,3.5);" ></td>
<td> euros <input size=1 id="AlyssumResult" value=" " onkeypress="return false;" style="border:0px;background-Color:#FFFFCC;" ></td>
</tr>
<tr>
<td height="26"></td>
<td></td>
<td>Total</td>
<td> euros <input size=1 id="Total" name="Total" value=" " onkeypress="return false;" style="border:0px;background-Color:#FFFFCC;" ></td>
</tr>
</table>
<br>
<table height="64" border="3" align="center" bgcolor="#FFFFCC" bordercolor="#BEDEC6">
<tr>
<td width="100" height="26"><div align="left"><span class="style18">Tom</span></div></td>
<td width="80"><span class="style18">1.50 euro</span></td>
<td width="80"><input size=7 title="TomResult,TotalA" name="Quantity" value="" onkeyup="f2_CalTotal(this,1.5);" ></td>
<td width="120"> euros <input size=1 id="TomResult" value=" " onkeypress="return false;" style="border:0px;background-Color:#FFFFCC;" ></td>
</tr>
<tr>
<td height="26"><div align="left"><span class="style18">Harry</span></div></td>
<td><span class="style18">2.50 euro</span></td>
<td><input size=7 title="HarryResult,TotalA" name="Quantity" value="" onkeyup="f2_CalTotal(this,2.5);" ></td>
<td> euros <input size=1 id="HarryResult" name="TotalA2" value=" " onkeypress="return false;" style="border:0px;background-Color:#FFFFCC;" ></td>
</tr>
<tr>
<td height="26"><div align="left"><span class="style18">Joe</span></div></td>
<td><span class="style18">2.55 euro</span></td>
<td><input size=7 title="JoeResult,TotalA" name="Quantity" value="" onkeyup="f2_CalTotal(this,2.55);" ></td>
<td> euros <input size=1 id="JoeResult" value=" " onkeypress="return false;" style="border:0px;background-Color:#FFFFCC;" ></td>
</tr>
<tr>
<td height="26"></td>
<td></td>
<td>Total</td>
<td> euros <input size=1 id="TotalA" name="GTotal2" value=" " onkeypress="return false;" style="border:0px;background-Color:#FFFFCC;" ></td>
</tr>
</table>
<table height="64" border="3" align="center" bgcolor="#FFFFCC" bordercolor="#BEDEC6">
<tr>
<td width="100" >Grand Total</td>
<td width="120" > euros <input size=1 id="f2_GrandTotal" name="f2_GrandTotal" value=" " onkeypress="return false;" style="border:0px;background-Color:#FFFFCC;" ></td>
</tr>
</table>
</body>

</html>

CPower
04-16-2005, 12:32 PM
This has helped me so much, can't thank you enough,

Cathal.

vwphillips
04-16-2005, 08:47 PM
I am making a Compendium of form applications which may be of interest

see adraft on

http://www.vicsjavascripts.org.uk/FormCompendium/FormCompendium.htm



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum