SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Earth
    Posts
    739
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Sum the total of 3 text fields and display total

    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

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>
    Birnam wood is come to Dunsinane

  3. #3
    do righteous deeds
    Join Date
    Aug 2006
    Location
    Türkiye Turkey تركيى
    Posts
    266
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>
    Last edited by muazzez; Apr 24, 2007 at 15:27.


Bookmarks

Posting Permissions

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