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 4 of 4
  1. #1
    New Coder
    Join Date
    Oct 2007
    Location
    Washington
    Posts
    86
    Thanks
    3
    Thanked 2 Times in 2 Posts

    auto calculation in any event

    The test sample below shows my attempt at getting the calculation script down tho in some cases as in deleting the number or entering a non number it will show "NaN". is there any way to auto calculate the script so it will update itself on any event? and resort back to 0 if NaN updating the total?

    Code:
    <html>
       <head>
          <title>
          </title>
    
    <style type='text/css'>
    body {
         height:100%;
         margin:0;
         padding:0;
    }
    
    #overlay1 {
         position:fixed;
         left:0px;
         top:0px;
         width:100%;
         height:100%;
         background-repeat: repeat;
    }
    
    #overlay1 div {
         width:668px;
         margin: 100px auto;
         background-color: transparent;
         border:0px ridge #000000;
         padding:15px;
         text-align:center;
    }
    
    .page{
       display: none;
    }
    </style>
    
    <script type="text/javascript">
    var currentLayer = 'page1';
    function showLayer(lyr) {
       hideLayer(currentLayer);
       document.getElementById(lyr)
          .style.display = 'block';
       currentLayer = lyr;
    }
    
    function hideLayer(lyr) {
       document.getElementById(lyr).
          style.display = 'none';
    }
    
    function showValues(form) {
       var values = '';
       var len = form.length - 1; 
       //Leave off Submit Button
       for(i=0; i<len; i++) {
          if (form[i].id.indexOf("C") != -1 || 
             form[i].id.indexOf("B") != -1)
             //Skip Continue and Back Buttons
             continue;
             values += form[i].id;
             values += ': ';
             values += form[i].value;
             values += '\n';
          }
          alert(values);
       }
    </script>
    
    <!-- ******************************* Calculation \/\/***-->
    
    <script language="javascript">
    
    	function overlay1() {
    		el = document.getElementById("overlay1");
    		el.style.display = (el.style.display == "block") ? "none" : "block";
    	}
    
    function $i(e){
      return document.getElementById(e);
    }
    
    function enter(i) {
      $i('textbox_r'+i+'_c3').value = $i('tx1').value;
      $i('textbox_r'+i+'_c7').value = price.value;
      overlay1();
      return true;
      Calc('add');
    }
    
    function tst(i) {
      $i("ok").setAttribute ("onclick", "enter("+i+");Calc('add');");
      $i("a1_3[1]").focus();
      $i("a1_3[1]").value=$i("price").value="";
    }
    
    function clear(i){
      for(var j = 0; j <= 9; j++)
        $i("textbox_r"+i+"_c"+j).value="";
    }
    
       function Calc(className){
          var elements = document.getElementsByClassName(className);
          var total = 0;
          
          for(var x = 0; x < elements.length; ++x){
             total += parseInt(elements[x].value);
          }
          
          document.form0.total.value = total;
       }
    
    </script>
    
    </head>
    <body>
    <form enctype="multipart/form-data" name="form0" id="form0" method="POST" action="javascript:void(0)" onSubmit="showValues(this.id)">
    
    <div id="page1" class="page" style="display:block;">
    Page 1
    <table align="center"><tr><td align="center">
    <input type="button" value="1" onclick="overlay1();tst(1);"></td>
    <td><input type="text" name="textbox_r1_c1" id="textbox_r1_c1" size="1" value="<?php  echo "$_POST[textbox_r1_c1]"; ?>"></td>
    <td><input type="text" name="textbox_r1_c2" id="textbox_r1_c2" size="1" value="<?php  echo "$_POST[textbox_r1_c2]"; ?>"></td>
    <td><input type="text" name="textbox_r1_c3" id="textbox_r1_c3" size="35" value="<?php  echo "$_POST[textbox_r1_c3]"; ?>"></td>
    <td><input type="text" name="textbox_r1_c4" id="textbox_r1_c4" size="3" value="<?php  echo "$_POST[textbox_r1_c4]"; ?>"></td>
    <td><input type="text" name="textbox_r1_c5" id="textbox_r1_c5" size="3" value="<?php  echo "$_POST[textbox_r1_c5]"; ?>"></td>
    <td><input type="text" name="textbox_r1_c6" id="textbox_r1_c6" size="3" value="<?php  echo "$_POST[textbox_r1_c6]"; ?>"></td>
    <td><input type="text" name="textbox_r1_c7" id="textbox_r1_c7" size="3" value="<?php  echo "$_POST[textbox_r1_c7]"; ?>0" class="add" onKeyUp="Calc('add')" onClick="this.focus();this.select();"></td>
    <td><input type="text" name="textbox_r1_c8" id="textbox_r1_c8" size="3" value="<?php  echo "$_POST[textbox_r1_c8]"; ?>"></td>
    <td><input type="text" name="textbox_r1_c9" id="textbox_r1_c9" size="3" value="<?php  echo "$_POST[textbox_r1_c9]"; ?>">
    </td></tr>
    <tr><td align="center">
    <input type="button" value="1" onclick="overlay1();tst(2);"></td>
    <td><input type="text" name="textbox_r2_c1" id="textbox_r2_c1" size="1" value="<?php  echo "$_POST[textbox_r2_c1]"; ?>"></td>
    <td><input type="text" name="textbox_r2_c2" id="textbox_r2_c2" size="1" value="<?php  echo "$_POST[textbox_r2_c2]"; ?>"></td>
    <td><input type="text" name="textbox_r2_c3" id="textbox_r2_c3" size="35" value="<?php  echo "$_POST[textbox_r2_c3]"; ?>"></td>
    <td><input type="text" name="textbox_r2_c4" id="textbox_r2_c4" size="3" value="<?php  echo "$_POST[textbox_r2_c4]"; ?>"></td>
    <td><input type="text" name="textbox_r2_c5" id="textbox_r2_c5" size="3" value="<?php  echo "$_POST[textbox_r2_c5]"; ?>"></td>
    <td><input type="text" name="textbox_r2_c6" id="textbox_r2_c6" size="3" value="<?php  echo "$_POST[textbox_r2_c6]"; ?>"></td>
    <td><input type="text" name="textbox_r2_c7" id="textbox_r2_c7" size="3" value="<?php  echo "$_POST[textbox_r2_c7]"; ?>0" class="add" onKeyUp="Calc('add')" onClick="this.focus();this.select();"></td>
    <td><input type="text" name="textbox_r2_c8" id="textbox_r2_c8" size="3" value="<?php  echo "$_POST[textbox_r2_c8]"; ?>"></td>
    <td><input type="text" name="textbox_r2_c9" id="textbox_r2_c9" size="3" value="<?php  echo "$_POST[textbox_r2_c9]"; ?>">
    </td></tr>
    <tr><td><input type="button" id="C1" value="Continue" onClick="showLayer('page2')"></td></tr>
    </table>
    </div>
    
    <div id="page2" class="page">
    Page 2
    <table align="center"><tr><td align="center">
    <input type="button" value="1" onclick="overlay1();tst(3);"></td>
    <td><input type="text" name="textbox_r3_c1" id="textbox_r3_c1" size="1" value="<?php  echo "$_POST[textbox_r3_c1]"; ?>"></td>
    <td><input type="text" name="textbox_r3_c2" id="textbox_r3_c2" size="1" value="<?php  echo "$_POST[textbox_r3_c2]"; ?>"></td>
    <td><input type="text" name="textbox_r3_c3" id="textbox_r3_c3" size="35" value="<?php  echo "$_POST[textbox_r3_c3]"; ?>"></td>
    <td><input type="text" name="textbox_r3_c4" id="textbox_r3_c4" size="3" value="<?php  echo "$_POST[textbox_r3_c4]"; ?>"></td>
    <td><input type="text" name="textbox_r3_c5" id="textbox_r3_c5" size="3" value="<?php  echo "$_POST[textbox_r3_c5]"; ?>"></td>
    <td><input type="text" name="textbox_r3_c6" id="textbox_r3_c6" size="3" value="<?php  echo "$_POST[textbox_r3_c6]"; ?>"></td>
    <td><input type="text" name="textbox_r3_c7" id="textbox_r3_c7" size="3" value="<?php  echo "$_POST[textbox_r3_c7]"; ?>0" class="add" onKeyUp="Calc('add')" onClick="this.focus();this.select();"></td>
    <td><input type="text" name="textbox_r3_c8" id="textbox_r3_c8" size="3" value="<?php  echo "$_POST[textbox_r3_c8]"; ?>"></td>
    <td><input type="text" name="textbox_r3_c9" id="textbox_r3_c9" size="3" value="<?php  echo "$_POST[textbox_r3_c9]"; ?>">
    </td></tr>
    <tr><td align="center">
    <input type="button" value="1" onclick="overlay1();tst(4);"></td>
    <td><input type="text" name="textbox_r4_c1" id="textbox_r4_c1" size="1" value="<?php  echo "$_POST[textbox_r4_c1]"; ?>"></td>
    <td><input type="text" name="textbox_r4_c2" id="textbox_r4_c2" size="1" value="<?php  echo "$_POST[textbox_r4_c2]"; ?>"></td>
    <td><input type="text" name="textbox_r4_c3" id="textbox_r4_c3" size="35" value="<?php  echo "$_POST[textbox_r4_c3]"; ?>"></td>
    <td><input type="text" name="textbox_r4_c4" id="textbox_r4_c4" size="3" value="<?php  echo "$_POST[textbox_r4_c4]"; ?>"></td>
    <td><input type="text" name="textbox_r4_c5" id="textbox_r4_c5" size="3" value="<?php  echo "$_POST[textbox_r4_c5]"; ?>"></td>
    <td><input type="text" name="textbox_r4_c6" id="textbox_r4_c6" size="3" value="<?php  echo "$_POST[textbox_r4_c6]"; ?>"></td>
    <td><input type="text" name="textbox_r4_c7" id="textbox_r4_c7" size="3" value="<?php  echo "$_POST[textbox_r4_c7]"; ?>0" class="add" onKeyUp="Calc('add')" onClick="this.focus();this.select();"></td>
    <td><input type="text" name="textbox_r4_c8" id="textbox_r4_c8" size="3" value="<?php  echo "$_POST[textbox_r4_c8]"; ?>"></td>
    <td><input type="text" name="textbox_r4_c9" id="textbox_r4_c9" size="3" value="<?php  echo "$_POST[textbox_r4_c9]"; ?>">
    </td></tr>
    <tr><td><input type="button" id="B1" value="Go Back" onClick="showLayer('page1')"></td></tr>
    <tr><td><input type="submit" value="Submit"></td></tr>
    </table>
    </div>
    <!-- more pages here -->
    
    <div style="display:none;" id="overlay1" name="overlay1">
     <table cellspacing='0' cellpadding='0' align='center' valign='top' style='position:fixed;left:0px;top:0px;width:100%;height:100%;background-repeat:repeat;'><tr><td>
     <table cellspacing='0' cellpadding='0' align='center' style='border: 1px solid #000000;' bgcolor='#ffffff'><tr><td>
     <table cellspacing='0' cellpadding='0' align='center' style='border: 1px solid #2a2a2a;'><tr><td>
     <table style='border: 1px solid #555555;' cellspacing='0' cellpadding='5' width='500px' align='center' valign='top'><tr><td align='left' valign='top'>
     <table border='0' width='500px'><tr><td colspan='3'><b>Please enter Item<br><hr size='1'><br></td></tr>
    
    <tr>
    <td align='right'>
    Item: 
    </td>
    <td>
    <input size='38' type='text' value='' name='a1_3[1]' id='a1_3[1]' onkeyup='tx1.value = this.value;' onblur='this.focus();tx1.value = this.value;' onfocus='tx1.value = this.value;' onclick='tx1.value = this.value;'>
    <input type="hidden" name="tx1" id="tx1">
    </td>
    <td align='right'>
    Price: <input size='10' type='text' name='price' id='price'>
    </td>
    </tr>
    
     <tr><td align="right" colspan="3">
     <input type="button" name="ok" id="ok" value="OK" onClick="">
     <input type="button" value="Cancel" onClick="overlay1();">
     </td></tr></table>
     </td></tr></table>
     </td></tr></table>
     </td></tr></table>
     </td></tr></table>
    </div>
    
    <center>Total: <input type="text id="total" name="total"><center>
    </form>
    </body>
    </html>
    "The one closer to the truth is the one still learning"

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,864
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    You could check the value by isNaN() before using it.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Oct 2007
    Location
    Washington
    Posts
    86
    Thanks
    3
    Thanked 2 Times in 2 Posts
    I'm not to familiar with javascript so I'm not sure how to implement this

    I tried:
    Code:
       function Calcu(className){
          var frm = document.form0;
          var elements = document.getElementsByClassName(className);
          var total = 0;
          
          for(var a = 0; a < elements.length; ++a){
    
    total += (isNaN(parseInt(elements[a].value)));
          }
          
          frm.total.value = total;
       }
    and it works but it wont keep any entered #'s as they just go back to 0. What am I doing wrong?
    "The one closer to the truth is the one still learning"

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,147
    Thanks
    80
    Thanked 4,557 Times in 4,521 Posts
    Didn't look at all the code, but for the code you showed in last post:

    Code:
    for(var a = 0; a < elements.length; ++a)
    {
        var val = parseInt(elements[a].value);
        if ( ! isNaN(val) ) total += val;
    }
    You could also FORCE all those NaN elements to display a zero quite simply, if you wish:
    Code:
    for(var a = 0; a < elements.length; ++a)
    {
        var val = parseInt(elements[a].value);
        if ( isNaN(val) ) elements[a].value = "0";
        else total += val;
    }


  •  

    Posting Permissions

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