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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    HELP! with Calculation

    Hi people... im a bit of a noob with javascript but im learning quickly..
    basically i need a calculator that adds up values when ticked.

    i got this code and its all working..

    Code:
    <script type="text/javascript">
    function calculate(f)
    {
    var nums = f.num;
    var ntext = f.numtext;
    var nitem = f.numitem;
    var result = 0;
    var items = '';
    for(var i=0;i<nums.length;i++)
    {
    if(nums[i].checked)
    {
    result+=parseFloat(ntext[i].value);
    items+=nitem[i].value+'\n';
    }
    }
    f.answer.value=result;
    
    //if you want to fix to 2 decimal places
    //f.answer.value=Number(result).toFixed(2);
    
    f.allitems.value=items;
    }
    </script>
    
    <input type="checkbox" name="num" onClick="calculate(this.form)">
    <input name="numtext" type="text" onChange="calculate(this.form)" value="59" size="3"><input name="numitem" type="text" class="tb-gradient" onChange="calculate(this.form)" value="4 Camera ">
    
    <input type="text" name="answer" size="10">
    
    <textarea name="allitems" rows="10" cols="50"></textarea>



    but i also need it so people can input a value into textbox and have it multiply by a pre-determined number then have that add to the total...

    if anyone can help it will be greatly appreciated!
    seems like a fairly basic thing but just cant get my head around it.. cheers

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,553
    Thanks
    78
    Thanked 4,382 Times in 4,347 Posts
    Homework for a class??

    A couple of fundamentals:

    (1) You only have ONE checkbox. Your variable nums correctly refers to it.
    *BUT* because there is only one, the expression nums.length in your line
    for(var i=0;i<nums.length;i++)
    will be null and you will get an error right then and there.

    You only get an array for checkboxes when you have more than one of the same name.

    (2) Same thing for your ntext variable. It refers to your ONE AND ONLY "numtext" field. So it will *NOT* be an array. Period.

    (3) Can you guess? Yep, ditto for your nitem variable.

    You can't index into a non-existent array, which you are trying to do with all 3 of those.

    If you WANT multiple checkbxes, etc., then you must put them in before this code will begin to work.

  • #3
    New to the CF scene
    Join Date
    May 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the reply... I didnt explain the code...
    I just put down the script and a single example of the tick box and total outcome... i have multiple tickboxes it all works..should have explained that sorry//

    i just need an additional feature where a user can input a numeric value into a text box and that value is multiplied by a static value then added to the total box along with the selected items in the text box...

    thanks

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,553
    Thanks
    78
    Thanked 4,382 Times in 4,347 Posts
    So show the extra text box and show the static value.

    It's no different than adding. Use parseFloat and multiply. (Or don't bother with parseFloat...when you multiply JS will do the parseFloat automatically.)

    If you show the page again, show at least two or three of the checkboxes, et al., so we can run the code as written.

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    The hardest part of doing this is usually the part beforehand - where you plan your strategy. Why use checkboxes to select a product, when the user will have the option of filling in the amount? That alone is enough to trigger recalculation. Why hardcode values in there (value="59") from load? Why not make all the fields (except the quantity) read-only? Inquiring minds want to know ...

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>untitled</title>
    <style type="text/css">
    body {background:buttonface;font:bold 12px monospace;}
    input {width:70px;padding:2px;margin:1px;background:ivory;}
    textarea {padding:2px;background:ivory;}
    </style>
    <script type="text/javascript">
    
    function calculate(f)
    {
       var productnum = f.elements['productnum'];
       var productname = f.elements['productname'];
       var productprice = f.elements['productprice'];
       var subtotal = f.elements['subtotal'];
       var num = 0;
       var sub = 0;
       var total = 0;
       var allproductnames = '';
       var n = 1;
       for(var i = 0; i < productnum.length; i++) //loop
       {
          num = Number(productnum[i].value); //coerce
          if (!/^\d+$/.test(num)) //check it
          {
             alert('Please enter only numbers.'); //bad dog!
             num = 0; //reset
          }
          productnum[i].value = num; //reset field
          sub = num * parseFloat(productprice[i].value); //calculate
          subtotal[i].value = sub.toFixed(2); //set
          total += sub; //accumulate
          if (num > 0) //add product to list
          {
             allproductnames += n++ + ') ' + productname[i].value + ' (' + num + ')' + '\n'; //list
          }
          f.elements['allproductstotal'].value = '$' + total.toFixed(2); //total
          f.elements['allproducts'].value = allproductnames; //print
       }
    }
    
    </script>
    </head>
    <body>
    <form>
    number: <input name="productnum" type="text" onblur="calculate(this.form)" value="0" />
    name: <input name="productname" type="text" class="tb-gradient" value="Camera 4" readonly="readonly" />
    price: <input type="text" name="productprice" value="100.00" readonly="readonly" />
    subtotal: <input type="text" name="subtotal" />
    <br />
    number: <input name="productnum" type="text" onblur="calculate(this.form)" value="0" />
    name: <input name="productname" type="text" class="tb-gradient" value="Camera 5" readonly="readonly" />
    price: <input type="text" name="productprice" value="200.00" readonly="readonly" />
    subtotal: <input type="text" name="subtotal">
    <br />
    number: <input name="productnum" type="text" onblur="calculate(this.form)" value="0" />
    name: <input name="productname" type="text" class="tb-gradient" value="Camera 6" readonly="readonly" />
    price: <input type="text" name="productprice" value="300.00" readonly="readonly" />
    subtotal: <input type="text" name="subtotal"><br /><br />
    total:
    <input name="allproductstotal" type="text" value="$0.00" readonly="readonly" />
    <br /><br />
    <textarea name="allproducts" rows="6" cols="18" readonly="readonly"></textarea>
    </form>
    </body>
    </html>
    Did that in a hurry so there are probably errors. Oops in advance.

  • #6
    New to the CF scene
    Join Date
    May 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Adios... much appreciated


  •  

    Posting Permissions

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