Update the total sum. Javascript.. something small im sure..

  • Mozzi
  • Student
  • Student
  • Mozzi
  • Posts: 70

Post 3+ Months Ago

Hi.. can anyone help please.. i cant get my form to update the TOTAL SUM ... i have tried many things.. but im a newbie.. and sure its should be something simple...

Code: [ Select ]

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/JavaScript">
function calculate(col, row){
var numericExpression = /^[0-9]+$/; //verify numeric - needs to allow for decimals though...hmmm...
  if(document.getElementById(col+"-"+row).value.match(numericExpression)){
var input=0; //initalize variable to get entered value
var rowTot=0; //initalize variable to capture row totals
var colTot=0; //initalize variable to capture column totals
//setup up array for paycodes/column headers
codes=new Array('1000','1001','1002','1005','1007','1003','1020','1035','1038','1045','1066','1067','Other');
//loop through all of the text fields for a given column and total them
    for (i=0;i<2;i++){
    input=(document.getElementById(col+'-'+i).value)*1
    colTot=colTot+input;
    document.getElementById(col).value = colTot;
    }
//loop through all of the text fields for a given row and total them
    for (j=0;j<13;j++){
    input=(document.getElementById(((codes[j])+'-'+row)).value)*1
    rowTot=rowTot+input;
    document.getElementById('row'+row).value = rowTot;
    }
  }
  //if the entry isn't numeric then return no value
  else {document.getElementById(col+"-"+row).value="";}
}

function updatesum() {
document.form.sum.value = (document.form.sum1.value -0) + (document.form.sum2.value -0);
}

</script>

</head>

<body>

<p>Enter numbers here:<br>
<form name="form" >
 <p>
  <input name="1000-0" id="1000-0" type="text" onblur="calculate('1000','0')">
  <input name="1001-0" id="1001-0" type="text" onblur="calculate('1001','0')">
  <br>
  <input name="1000-1" id="1000-1" type="text" onblur="calculate('1000','1')">
  <input name="1001-1" id="1001-1" type="text" onblur="calculate('1001','1')">
  <br>
  <input name="sum1" id="1000" type="text" onblur="updatesum()" >
  <input name="sum2" id="1001" type="text" onblur="updatesum()">
<br>

  Their sum is:
  <input name="sum" readonly>

</form>
</body>
</html>
  1. <head>
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  3. <title>Untitled Document</title>
  4. <script type="text/JavaScript">
  5. function calculate(col, row){
  6. var numericExpression = /^[0-9]+$/; //verify numeric - needs to allow for decimals though...hmmm...
  7.   if(document.getElementById(col+"-"+row).value.match(numericExpression)){
  8. var input=0; //initalize variable to get entered value
  9. var rowTot=0; //initalize variable to capture row totals
  10. var colTot=0; //initalize variable to capture column totals
  11. //setup up array for paycodes/column headers
  12. codes=new Array('1000','1001','1002','1005','1007','1003','1020','1035','1038','1045','1066','1067','Other');
  13. //loop through all of the text fields for a given column and total them
  14.     for (i=0;i<2;i++){
  15.     input=(document.getElementById(col+'-'+i).value)*1
  16.     colTot=colTot+input;
  17.     document.getElementById(col).value = colTot;
  18.     }
  19. //loop through all of the text fields for a given row and total them
  20.     for (j=0;j<13;j++){
  21.     input=(document.getElementById(((codes[j])+'-'+row)).value)*1
  22.     rowTot=rowTot+input;
  23.     document.getElementById('row'+row).value = rowTot;
  24.     }
  25.   }
  26.   //if the entry isn't numeric then return no value
  27.   else {document.getElementById(col+"-"+row).value="";}
  28. }
  29. function updatesum() {
  30. document.form.sum.value = (document.form.sum1.value -0) + (document.form.sum2.value -0);
  31. }
  32. </script>
  33. </head>
  34. <body>
  35. <p>Enter numbers here:<br>
  36. <form name="form" >
  37.  <p>
  38.   <input name="1000-0" id="1000-0" type="text" onblur="calculate('1000','0')">
  39.   <input name="1001-0" id="1001-0" type="text" onblur="calculate('1001','0')">
  40.   <br>
  41.   <input name="1000-1" id="1000-1" type="text" onblur="calculate('1000','1')">
  42.   <input name="1001-1" id="1001-1" type="text" onblur="calculate('1001','1')">
  43.   <br>
  44.   <input name="sum1" id="1000" type="text" onblur="updatesum()" >
  45.   <input name="sum2" id="1001" type="text" onblur="updatesum()">
  46. <br>
  47.   Their sum is:
  48.   <input name="sum" readonly>
  49. </form>
  50. </body>
  51. </html>
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Cae
  • Expert
  • Expert
  • User avatar
  • Posts: 734

Post 3+ Months Ago

Your code works fine on my box, in fact it works exactly as it should.

Your problem is that your two initial adders (1000/0, 1001/0 and 1000/1, 1001/1) call calculate when they blur. This updates the sum fields (sum1, sum2), however this update trigger does not pass through to sum fields, they may have been updated, but they still have never been selected by the user and hence cannot loose the focus.

The solution is simple though, just call 'updatesum()' at the end of you calculate routine.

Post Information

  • Total Posts in this topic: 2 posts
  • Users browsing this forum: No registered users and 102 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.