Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12

Thread: Automatic total

  1. #1
    New to the CF scene
    Join Date
    Apr 2005
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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.

  • #2
    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
    onchange="alert(parseFloat(this.value)*12345);"
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #3
    New to the CF scene
    Join Date
    Apr 2005
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 251 Times in 247 Posts
    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.

  • #5
    New to the CF scene
    Join Date
    Apr 2005
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks a million man this is a great help, able to work this in perfectly.

    Cathal.

  • #6
    New to the CF scene
    Join Date
    Apr 2005
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    "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.

  • #7
    New to the CF scene
    Join Date
    Apr 2005
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #8
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    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.

  • #9
    New to the CF scene
    Join Date
    Apr 2005
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Works a treat thanks a mill, all i need to do now is get that overall total row working.

    Thanks
    Cathal.

  • #10
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    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.

  • #11
    New to the CF scene
    Join Date
    Apr 2005
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This has helped me so much, can't thank you enough,

    Cathal.

  • #12
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    I am making a Compendium of form applications which may be of interest

    see adraft on

    http://www.vicsjavascripts.org.uk/Fo...Compendium.htm


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •