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 9 of 9
  1. #1
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    817
    Thanks
    43
    Thanked 6 Times in 5 Posts

    javascript addition

    Hi, I am trying to automate some addition and multiplication.

    [no.1] + [no.2] = [total 1]
    [no.3] + [no.4] = [total 2]
    [no.5] + [no.6] = [total 3]
    [no.7] + [no.8] = [total 4]

    subtotal 1 = [total 1 + total 2 + total 3 + total 4]

    subtotal 2 = [subtotal 1 divided by 16]

    TOTAL = [subtotal 2 multiplied by 10]

    Ideally, I would have the user enter the nos. 1 to 8 and hit a single button to get totals 1 to 4, the two subtotals, and the TOTAL showing in input boxes.

    Before I attempt this mini project, is it possible do you think? Or does it have to be done by hitting more than one button?

    I have no idea where to start.

    Happy to pay someone to get this totals thing finished. Three years on this major project and I have to get it all done by next month.

    Thanks.
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,911
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Is this what you require?

    Code:
    <BODY>
    
    <form name = "myform">
    
    <p>Number 1 <input type = "text" name = "no1" id = "no1" size = "6"></p>
    <p>Number 2 <input type = "text" name = "no2" id = "no2" size = "6"></p>
    <p>Total 1  <input type = "text" name = "total1" id = "total1" size = "6" readonly></p>
    <p>Number 3 <input type = "text" name = "no3" id = "no3" size = "6"></p>
    <p>Number 4 <input type = "text" name = "no4" id = "no4" size = "6"></p>
    <p>Total 2  <input type = "text" name = "total2" id = "total2" size = "6" readonly></p>
    <p>Number 5 <input type = "text" name = "no5" id = "no5" size = "6"></p>
    <p>Number 6 <input type = "text" name = "no6" id = "no6" size = "6"></p>
    <p>Total 3  <input type = "text" name = "total3" id = "total3" size = "6" readonly></p>
    <p>Number 7 <input type = "text" name = "no7" id = "no7" size = "6"></p>
    <p>Number 8 <input type = "text" name = "no8" id = "no8" size = "6"></p>
    <p>Total 4  <input type = "text" name = "total4" id = "total4" size = "6" readonly></p>
    
    <input type ="button" name = "button1" value = "Click to calculate" onclick = "calculate()">
    
    <p>SubTotal1 <input type = "text" name = "sub1" id = "sub1" size = "10" readonly></p>
    <p>SubTotal2 <input type = "text" name = "sub2" id = "sub2" size = "10" readonly></p>
    <p>GRAND TOTAL   <input type = "text" name = "gdtotal" id = "total" size = "10" readonly></p>
    </form>
    
    <script type = "text/javascript">
    
    function calculate() {
    var No1 = parseFloat(document.myform.no1.value);
    var No2 = parseFloat(document.myform.no2.value);
    var No3 = parseFloat(document.myform.no3.value);
    var No4 = parseFloat(document.myform.no4.value);
    var No5 = parseFloat(document.myform.no5.value);
    var No6 = parseFloat(document.myform.no6.value);
    var No7 = parseFloat(document.myform.no7.value);
    var No8 = parseFloat(document.myform.no8.value);
    
    var Total1= No1 + No2;
    var Total2= No3 + No4;
    var Total3= No5 + No6;
    var Total4= No7 + No8;
    
    document.myform.total1.value = Total1;
    document.myform.total2.value = Total2;
    document.myform.total3.value = Total3;
    document.myform.total4.value = Total4;
    
    var Sub1 = Total1 + Total2 + Total3 + Total4;
    var Sub2 = Sub1/16;
    var Total = Sub2 *10;
    
    document.myform.sub1.value = Sub1;
    document.myform.sub2.value = Sub2;
    document.myform.gdtotal.value = Total;
    }
    
    </script>
    
    </BODY>
    </HTML>
    You may want to add checks to ensure that the user enters (valid) numbers in the boxes (i.e. valid range, not negative etc.)

    E.G:-

    function checkvalid(which) {
    if (isNaN(which.value) || (which.value <0) || (which.value > 99)) {
    alert ("Invalid entry");
    which.value = "";
    which.focus();
    }
    }
    Last edited by Philip M; 08-15-2007 at 11:29 AM.

  • #3
    Regular Coder
    Join Date
    Jul 2007
    Location
    UK
    Posts
    223
    Thanks
    0
    Thanked 14 Times in 14 Posts
    How about this:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
     <head>
      <title> New Document </title>
      <script type="text/javascript">
      <!--
     function calcTotals(frm){
      var total1 = frm.total1.value = getNum(frm.no1.value) + getNum(frm.no2.value);
      var total2 = frm.total2.value = getNum(frm.no3.value) + getNum(frm.no4.value);
      var total3 = frm.total3.value = getNum(frm.no5.value) + getNum(frm.no6.value);
      var total4 = frm.total4.value = getNum(frm.no7.value) + getNum(frm.no8.value);
      var subTotal1 = frm.subTotal1.value = total1+total2+total3+total4;
      var subTotal2 = frm.subTotal2.value = subTotal1/16;
      frm.total.value = subTotal2 * 10;
     }
     function getNum(input){
      var num = parseFloat(input);
      if(isNaN(num)){
       return 0;
      }
      else{
       return num;
      }
     }
      //-->
      </script>
     </head>
     <body>
      <form method="post" action="" name="myForm">
     <input type="text" name="no1">+<input type="text" name="no2">=<input type="text" name="total1"><br>
     <input type="text" name="no3">+<input type="text" name="no4">=<input type="text" name="total2"><br>
     <input type="text" name="no5">+<input type="text" name="no6">=<input type="text" name="total3"><br>
     <input type="text" name="no7">+<input type="text" name="no8">=<input type="text" name="total4"><br>
     subtotal1<input type="text" name="subTotal1"><br>
     subtotal2<input type="text" name="subTotal2"><br>
     total:<input type="text" name="total">
     <input type="button" name="totalsButton" value="Calculate Totals" onclick="calcTotals(this.form)">
      </form>
     </body>
    </html>

  • #4
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    817
    Thanks
    43
    Thanked 6 Times in 5 Posts
    That is just perfect - both ideas work and so logical too! Thanks so much.

    My total now ends up as a figure often with a decimal remainder which I need to get rid of (and the decimal point).

    I can truncate the figure to three items with:

    frm.total.value = (subTotal/16 * 10).toString().substr(0,3);

    ...but if the number is less than 99 it includes the decimal point.

    How do I convert, say, 145.564 to 145 only and make it work similarly for all numbers?
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)

  • #5
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    817
    Thanks
    43
    Thanked 6 Times in 5 Posts
    WAIT! Sorry I have figured it out...

    frm.total.value = Math.round(subTotal/16 * 10);
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)

  • #6
    Regular Coder
    Join Date
    Jul 2007
    Location
    UK
    Posts
    223
    Thanks
    0
    Thanked 14 Times in 14 Posts
    Nice to see you updated your post Phil!
    Glad you got it working tpeck.

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,911
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by tpeck View Post
    How do I convert, say, 145.564 to 145 only and make it work similarly for all numbers?
    WAIT! Sorry I have figured it out...

    frm.total.value = Math.round(subTotal/16 * 10);
    Math.round will round up 145.564 to 146. If you want to round down use Math.floor

    or:-

    frm.total.value = (subTotal/16 *10).toFixed(0);

  • #8
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    817
    Thanks
    43
    Thanked 6 Times in 5 Posts
    I am trying to take this one step further by having the number boxes automatically entered from values existing in input boxes on an iFrame on the same page. (People are complaining about entering the numbers when they already exist on the page.)

    I've tried lots of things like below, but they dont work - yet:

    Code:
    function calcTotals(frm){
    frm.no1.value = document.iframe['I2'].getElementsById('a1ap.value');
    The iFrame is called 'I2' and the input box containing the value for the first number box ('no.1') is called 'a1ap'.

    I've made a demo at http://aapress.com.au/demo/iframes/p1.html

    Where am I going wrong?

    If I can get the values to show onload in the number boxes as well as in the iFrame, I think also calculating the totals onload - as shown in this post -will display the FINAL TOTAL automatically.
    Last edited by tpeck; 08-17-2007 at 05:51 AM.
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)

  • #9
    Regular Coder
    Join Date
    Jul 2007
    Location
    UK
    Posts
    223
    Thanks
    0
    Thanked 14 Times in 14 Posts
    You've made a couple of mistakes there;
    Frames and iframes are referenced through the document.frames collection (there is no "iframe" collection).
    There is no method getElementsById, it's getElementById (typeo perhaps?).
    Once you've referneced the frame/iframe you have actually got a reference similar to window, so you have to make a reference to the document within the frame (if you want to use something like getElementById).
    You can only put the id of an element in the arguement of getElementById, you need to move the '.value' bit outside.

    This all means you need something like this (in p1.html):
    Code:
    function load(){
      if(document.frames['I3'] && document.frames['I2']){
       document.frames['I3'].document.getElementById('no1').value = document.frames['I2'].document.getElementById('a1ap').value;
      }
     }
    then your body should be <body onload="load()">, but I suspect you know this bit!

    If you want to put the javascript in a different file it'll need modifying, let me know if this is the case and you need any help.
    Hope that helps.
    Last edited by mcjwb; 08-17-2007 at 09:23 AM.


  •  

    Posting Permissions

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