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 7 of 7
  1. #1
    Regular Coder
    Join Date
    Jan 2005
    Posts
    189
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Calculating / Multiplying form fields (on exit)

    This is probably very basic, but I don't think I'm searching the right terms to find what I need, I'm looking for an example code of how to do this.

    I have 3 columns (form fields below)
    PRICE | ITEMS | Total

    I want a user to be able to enter in a price and the amount of items so that when they leave one of those two fields, it will autocalculate and populate the "total" field. I also want the option for them
    to be able to fill out the total field alone, without having to enter "price" or "items". So basically 'total' has to be filled out either way, because I will then be doing calculations with that data.
    Last edited by a4udi; 07-16-2009 at 01:18 PM.

  • #2
    Regular Coder Amphiluke's Avatar
    Join Date
    Jul 2009
    Posts
    312
    Thanks
    3
    Thanked 89 Times in 89 Posts
    Code:
    <script type="text/javascript">
       function calcTotal(sender) {
          var frm = sender.form;
          var trow = sender.parentNode.parentNode;
          var item1 = trow.cells[0].getElementsByTagName("input")[0].value;
          var item2 = trow.cells[1].getElementsByTagName("input")[0].value;
          trow.cells[2].getElementsByTagName("input")[0].value = (parseFloat(item1) * parseInt(item2)).toFixed(2);
       }
    </script>
    
    <form action="#" id="calcForm" method="post">
       <table border="0" cellpadding="0" cellspacing="0" width="30%">
          <tr>
             <th>Price</th>
             <th>Amount</th>
             <th>Total</th>            
          </tr>
          <tr>
             <td><input type="text" name="price1" onchange="calcTotal(this);" /></td>
             <td><input type="text" name="amount1" onchange="calcTotal(this);" /></td>
             <td><input type="text" name="total1" readonly="readonly" /></td>            
          </tr>
          <tr>
             <td><input type="text" name="price2" onchange="calcTotal(this);" /></td>
             <td><input type="text" name="amount2" onchange="calcTotal(this);" /></td>
             <td><input type="text" name="total2" readonly="readonly" /></td>            
          </tr>
          <tr>
             <td><input type="text" name="price3" onchange="calcTotal(this);" /></td>
             <td><input type="text" name="amount3" onchange="calcTotal(this);" /></td>
             <td><input type="text" name="total3" readonly="readonly" /></td>            
          </tr>
       </table>
    </form>
    Does this suit you?
    I am still learning English

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,253
    Thanks
    203
    Thanked 2,557 Times in 2,535 Posts
    "I want a user to be able to enter in a price and the amount of items so that when they leave one of those two fields, it will autocalculate and populate the "total" field". Sorry, that makes no sense to me.

    Try this:-

    Code:
    <form name= "myform">
    PRICE <input type = "text" name = "price" id = "price" size = "6" onblur = "calcTot()">
    QUANTITY <input type = "text" name = "qty" size = "6" id = "qty" onblur ="calcTot()">
    TOTAL <input type = "text" name = "total" id = "total" value = "0" size = "6" >
    </form>
    
    <script type = "text/javascript">
    
    function calcTot() {
    var p = parseFloat(document.myform.price.value);
    p = Math.floor(p*Math.pow(10,2))/Math.pow(10,2);  // 2 decimal places only in price
    if (isNaN(p)) {
    alert ("You must enter a price!");
    document.myform.price.value = "";
    document.myform.price.focus();
    return false;
    }
    var q = parseInt(document.myform.qty.value);
    if (isNaN(q)) {
    if (!p) {
    alert ("You must enter a quantity!");
    document.myform.qty.value = "";
    document.myform.qty.focus();
    return false;
    }
    }
    var tot = (p * q);
    if (!isNaN(tot)) {
    document.myform.price.value = p.toFixed(2);  // write (adjusted) values back into input fields
    document.myform.qty.value = q;
    document.myform.total.value = "$" + tot.toFixed(2);  // show result as 2 decimal places
    }
    }
    </script>
    
    </form>

    "If you can't explain it simply, you don't understand it well enough” - Albert Einstein (German born American Physicist who developed the special and general theories of relativity. Nobel Prize for Physics in 1921. 1879-1955)
    Last edited by Philip M; 07-16-2009 at 01:55 PM.

  • #4
    Regular Coder
    Join Date
    Jan 2005
    Posts
    189
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Yes, thanks! I will look that over but will have to tweak a few things.
    The total for example is not allowing any input on it's own and the amounts don't total correclty with decimal values, so I'll have to figure that out.

    One question though... how can I change the message in javascript when there is a math error, to something more elegant than 'NaN'?

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,253
    Thanks
    203
    Thanked 2,557 Times in 2,535 Posts
    Amphiluke - a price can only have (up to) 2 decimal places and a quantity must be an integer.

    A4udi - see my post above.

    Code:
    if (isNaN(p)) {
    alert ("You must enter a price!");

  • #6
    Regular Coder Amphiluke's Avatar
    Join Date
    Jul 2009
    Posts
    312
    Thanks
    3
    Thanked 89 Times in 89 Posts
    the amounts don't total correclty with decimal values
    The amount is decimal??
    Code:
          function calcTotal(sender) {
             var frm = sender.form;
             var trow = sender.parentNode.parentNode;
             var item1 = trow.cells[0].getElementsByTagName("input")[0].value;
             var item2 = trow.cells[1].getElementsByTagName("input")[0].value;
             var tot = (parseFloat(item1) * parseFloat(item2));
             if (!isNaN(tot)) trow.cells[2].getElementsByTagName("input")[0].value = tot.toFixed(2);
          }
    You can clear the readonly attribute for 'total' inputs.
    I am still learning English

  • #7
    Regular Coder
    Join Date
    Jan 2005
    Posts
    189
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Philip M, I'm gonna go through that code to see how it works and everything but that looks like a great example, thanks! I posted the other one before I saw your code and then had to run out.


  •  

    Posting Permissions

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