Sum the total of 3 text fields and display total

**_matrix_** · Apr 23, 2007 21:18

Hi,

Is it posible to have 3 text fields, as a value is typed into each field, have a read-only field generate the total sum of the 3 text fields without reloading the form?

If so where would I start?

Thanks

**AutisticCuckoo** · Apr 24, 2007 00:33

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.html">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Compute</title>
    <script type="text/javascript">
      function num(id) {
          var e = document.getElementById(id);
          if (e != null) {
              var v = e.value;
              if (/^\d+$/.test(v)) {
                  return parseInt(v, 10);
              }
          }
          return 0;
      }

      function sum() {
          var v1 = num("v1");
          var v2 = num("v2");
          var v3 = num("v3");
          var r  = document.getElementById("result");
          if (r != null) {
              r.value = v1 + v2 + v3;
          }
      }

      function addHandler(element, eventName, handler) {
          if (element.addEventListener) {
              element.addEventListener(eventName, handler, false);
          } else if (element.attachEvent) {
              element.attachEvent("on" + eventName, handler);
          }
      }

      addHandler(window, "load",
                 function() {
                   addHandler(document.getElementById("v1"), "keyup", sum);
                   addHandler(document.getElementById("v2"), "keyup", sum);
                   addHandler(document.getElementById("v3"), "keyup", sum);
                 });
    </script>
  </head>
  <body>
    <form action="">
      <fieldset>
        <legend>Input</legend>
        <label for="v1">Value 1</label>
        <input type="text" id="v1">
        <br>
        <label for="v2">Value 2</label>
        <input type="text" id="v2">
        <br>
        <label for="v3">Value 3</label>
        <input type="text" id="v3">
      </fieldset>
      <fieldset>
        <legend>Output</legend>
        <input type="text" id="result" readonly>
      </fieldset>
    </form>
  </body>
</html>

**muazzez** · Apr 24, 2007 13:31

Code:

  
<script type="text/javascript">

function calculate(){
var result = document.getElementById('result');
var el, i = 0, total = 0; 
while(el = document.getElementById('v'+(i++)) ) {
el.value = el.value.replace(/\D/,"");
total = total + Number(el.value);
}
result.value = total;
if(document.getElementById('v0').value =="" && document.getElementById('v1').value =="" && document.getElementById('v2').value =="" ){
 result.value ="";
}
}
</script>
Some number:<input type="text" id ="v0" onkeyup="calculate()"><br>
Some number:<input type="text" id ="v1" onkeyup="calculate()"><br>
Some number:<input type="text" id ="v2" onkeyup="calculate()"><br>
Result: <input type="text" id="result" onkeyup="calculate()"  readonly><br>

User Tag List

Thread: Sum the total of 3 text fields and display total

Thread Tools

Display

Hybrid View

Sum the total of 3 text fields and display total

Bookmarks

Bookmarks

Posting Permissions