Javascript: calculating form

1

Hi. Im creating a pretty simple form with values that need to be calculated.

I got that portion working… sorta.

Right now it captures the current value in the total field to add the next value to it.

The problem is that even if I go back to a previous cell and make no change it will add to the total again.

Do I have to capture the qty before a change and after to see if a change has been made?

Here’s my code so far:

<html>
<head>
<title>Untitled Document</title>
<script type="text/javascript" language="javascript">
<!--
function calcVals(price,qty){
    var total = document.getElementById("valTotal");
    var currentTotal = total.value.replace('$','');

    var thisTotal = price * qty;
    
    var newTotal = eval(Number(currentTotal) + Number(thisTotal));
    total.value = newTotal;
}
-->
</script>
</head>

<body>
<form id="form1" name="form1" method="post" action="" >
  $0.25<input type="text" name="textfield"  title=".25" onblur="calcVals(this.title,this.value);"/><br/>
  $0.12<input type="text" name="textfield1"  title=".12" onblur="calcVals(this.title,this.value);"/><br/>
  $5.00<input type="text" name="textfield2"  title="5.00" onblur="calcVals(this.title,this.value);"/><br/>
  <a href="#" >Total</a>
  <input type="text" readonly="" name="valTotal" id="valTotal" value="$0"/>
</form>
</body>
</html>

Im just wondering what the best method to go about this is.

Just off the top of my head It seems like I would have to capture the qty (value) onFocus then check against the value onBlur then make the necessary calculation.

Any thoughts?

Thanks in advance.