Go Back   CodingForums.com > :: Client side development > JavaScript programming

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 04-14-2005, 12:56 PM   PM User | #1
CPower
New to the CF scene

 
Join Date: Apr 2005
Posts: 9
Thanks: 0
Thanked 0 Times in 0 Posts
CPower is an unknown quantity at this point
Automatic total

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.
CPower is offline   Reply With Quote
Old 04-14-2005, 02:00 PM   PM User | #2
A1ien51
Senior Coder

 
A1ien51's Avatar
 
Join Date: Jun 2002
Location: Between DC and Baltimore In a Cave
Posts: 2,717
Thanks: 1
Thanked 94 Times in 88 Posts
A1ien51 will become famous soon enough
onchange="alert(parseFloat(this.value)*12345);"
__________________
Tech Author [Ajax In Action, JavaScript: Visual Blueprint]
A1ien51 is offline   Reply With Quote
Old 04-14-2005, 02:14 PM   PM User | #3
CPower
New to the CF scene

 
Join Date: Apr 2005
Posts: 9
Thanks: 0
Thanked 0 Times in 0 Posts
CPower is an unknown quantity at this point
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:

Code:
<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.
CPower is offline   Reply With Quote
Old 04-15-2005, 09:36 AM   PM User | #4
glenngv
Supreme Master coder!


 
glenngv's Avatar
 
Join Date: Jun 2002
Location: Los Angeles, CA Original Location: Philippines
Posts: 10,241
Thanks: 0
Thanked 112 Times in 111 Posts
glenngv will become famous soon enough
Code:
<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.
__________________
Glenn
_____________________________________________
Play Tower of Hanoi Android app (Ad-FREE!)
Play Tower of Hanoi Android app (FREE!)
Go to Tower of Hanoi Leaderboard
Play Tower of Hanoi Facebook app
glenngv is offline   Reply With Quote
Old 04-15-2005, 12:29 PM   PM User | #5
CPower
New to the CF scene

 
Join Date: Apr 2005
Posts: 9
Thanks: 0
Thanked 0 Times in 0 Posts
CPower is an unknown quantity at this point
Thanks a million man this is a great help, able to work this in perfectly.

Cathal.
CPower is offline   Reply With Quote
Old 04-15-2005, 12:39 PM   PM User | #6
CPower
New to the CF scene

 
Join Date: Apr 2005
Posts: 9
Thanks: 0
Thanked 0 Times in 0 Posts
CPower is an unknown quantity at this point
"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.

Last edited by CPower; 04-15-2005 at 01:18 PM..
CPower is offline   Reply With Quote
Old 04-15-2005, 02:02 PM   PM User | #7
CPower
New to the CF scene

 
Join Date: Apr 2005
Posts: 9
Thanks: 0
Thanked 0 Times in 0 Posts
CPower is an unknown quantity at this point
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.
CPower is offline   Reply With Quote
Old 04-15-2005, 04:17 PM   PM User | #8
vwphillips
Senior Coder

 
Join Date: Mar 2005
Location: Portsmouth UK
Posts: 4,354
Thanks: 3
Thanked 458 Times in 445 Posts
vwphillips is a jewel in the roughvwphillips is a jewel in the roughvwphillips is a jewel in the rough
this does not recognise backspace but may assist

PHP Code:

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

PHP Code:
<!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

Last edited by vwphillips; 04-15-2005 at 05:32 PM..
vwphillips is offline   Reply With Quote
Old 04-15-2005, 04:56 PM   PM User | #9
CPower
New to the CF scene

 
Join Date: Apr 2005
Posts: 9
Thanks: 0
Thanked 0 Times in 0 Posts
CPower is an unknown quantity at this point
Works a treat thanks a mill, all i need to do now is get that overall total row working.

Thanks
Cathal.
CPower is offline   Reply With Quote
Old 04-15-2005, 05:37 PM   PM User | #10
vwphillips
Senior Coder

 
Join Date: Mar 2005
Location: Portsmouth UK
Posts: 4,354
Thanks: 3
Thanked 458 Times in 445 Posts
vwphillips is a jewel in the roughvwphillips is a jewel in the roughvwphillips is a jewel in the rough
posts crossed
see my last edit

PHP Code:

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

Last edited by vwphillips; 04-15-2005 at 08:38 PM..
vwphillips is offline   Reply With Quote
Old 04-16-2005, 12:32 PM   PM User | #11
CPower
New to the CF scene

 
Join Date: Apr 2005
Posts: 9
Thanks: 0
Thanked 0 Times in 0 Posts
CPower is an unknown quantity at this point
This has helped me so much, can't thank you enough,

Cathal.
CPower is offline   Reply With Quote
Old 04-16-2005, 08:47 PM   PM User | #12
vwphillips
Senior Coder

 
Join Date: Mar 2005
Location: Portsmouth UK
Posts: 4,354
Thanks: 3
Thanked 458 Times in 445 Posts
vwphillips is a jewel in the roughvwphillips is a jewel in the roughvwphillips is a jewel in the rough
I am making a Compendium of form applications which may be of interest

see adraft on

http://www.vicsjavascripts.org.uk/Fo...Compendium.htm
vwphillips is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 10:14 PM.


Advertisement
Log in to turn off these ads.