Calculating / Multiplying form fields (on exit)

[a4udi]

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.

[Amphiluke]

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

[Philip M]

"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:-

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

[a4udi]

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'?

[Philip M]

Amphiluke - a price can only have (up to) 2 decimal places and a quantity must be an integer.

A4udi - see my post above.

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

[Amphiluke]

the amounts don't total correclty with decimal values

The amount is decimal??

      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.

[a4udi]

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.