title: How to auto-sum column and save to MySQL database?
body: <p>How can I auto-sum the "Total Hours" data in the tfoot and save to MySQL database and re-display in  same area? I've got two examples working, I would like to add the auto-sum functionality to the VizaHours web-app.</p>
  
  <p>Working examples are here: </p>
  
  <ul>
  <li><a href="http://onetimemobile.com/vizahours/index.php" rel="nofollow">http://onetimemobile.com/vizahours/index.php</a> </li>
  <li><a href="http://onetimemobile.com/autosummer" rel="nofollow">http://onetimemobile.com/autosummer</a></li>
  </ul>
  
  <p><strong>EDITED 4-2-14 ADDED ALL CODE <code>index.php</code> below:</strong></p>
  
  <pre><code>&lt;script src="http://code.jquery.com/jquery-1.11.0.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;table&gt;
  &lt;thead&gt;
  &lt;tr&gt;
      &lt;th&gt; DAY &lt;/th&gt;
      &lt;th&gt; DAY INFO &lt;/th&gt;
      &lt;th&gt; HOURS &lt;/th&gt;
  &lt;/tr&gt;
  &lt;tfoot&gt;
      &lt;tr id="summation"&gt;
          &lt;td class="total-hours" colspan="2"&gt;TOTAL HRS &amp;gt;&amp;gt;&amp;gt;&amp;gt;&amp;gt;&lt;/td&gt;
          &lt;td&gt;&lt;span&gt;0&lt;/span&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;th colspan="3"&gt;BUD HOURS - START WEEK 3-24-14&lt;br /&gt;unpaid&lt;/th&gt;
      &lt;/tr&gt;
  &lt;/tfoot&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
  &lt;?php
      include('connect.php');
      $result = $db-&gt;prepare("SELECT * FROM budsvizahours ORDER BY id DESC");
      $result-&gt;execute();
      for($i=0; $row = $result-&gt;fetch(); $i++){
  ?&gt;
  &lt;tr class="record"&gt;
  &lt;td&gt;&lt;?php echo $row['fname']; ?&gt;&lt;br /&gt;&lt;br /&gt;&lt;a href="editform.php?id=&lt;?php echo 
  $row['id']; ?&gt;"&gt; Edit &lt;/a&gt;&lt;/td&gt;
      &lt;td&gt;&lt;?php echo $row['lname']; ?&gt;&lt;/td&gt;
      &lt;td&gt;&lt;?php echo $row['age']; ?&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;?php
      }
  ?&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>EDITED 4-2-14 ADDED ALL CODE <code>edit.php</code> below:</strong></p>
  
  <pre><code>&lt;?php
  // configuration
  include('connect.php');
  
  // new data
  $lname = $_POST['lname'];
  $fname = $_POST['fname'];
  $age = $_POST['age'];
  $id = $_POST['memids'];
  // query
  $sql = "UPDATE budsvizahours 
      SET fname=?, lname=?, age=?
      WHERE id=?";
  $q = $db-&gt;prepare($sql);
  $q-&gt;execute(array($fname,$lname,$age,$id));
  header("location: index.php");
  
  ?&gt;
  </code></pre>
  
  <p><strong>EDITED 4-2-14 ADDED ALL CODE <code>editform.php</code> below:</strong></p>
  
  <pre><code>&lt;?php
  include('connect.php');
  $id=$_GET['id'];
  $result = $db-&gt;prepare("SELECT * FROM budsvizahours WHERE id= :userid");
  $result-&gt;bindParam(':userid', $id);
  $result-&gt;execute();
  for($i=0; $row = $result-&gt;fetch(); $i++){
  ?&gt;
  &lt;form action="edit.php" method="POST"&gt;
  &lt;input type="hidden" name="memids" value="&lt;?php echo $id; ?&gt;" /&gt;
  &lt;br&gt;
  &lt;input type="hidden" name="fname" value="&lt;?php echo $row['fname']; ?&gt;" /&gt;&lt;br&gt;
  Update Day Info&lt;br&gt;
  &lt;input type="text" name="lname" value="&lt;?php echo $row['lname']; ?&gt;" /&gt;&lt;br&gt;
  Hours This Day&lt;br&gt;
  &lt;input class="record" type="tel" name="age" value="&lt;?php echo $row['age']; ?&gt;" /&gt;
  &lt;br&gt;&lt;br&gt;
  &lt;button class="edit-info-button" type="submit" value="Save"&gt;Save&lt;/button&gt;
  &lt;/form&gt;
  &lt;?php
  }
  ?&gt;
  &lt;script&gt;
  $(document).ready(function(){
  
      //iterate through each textboxes and add keyup
      //handler to trigger sum event
      $(".txt").each(function() {
  
          $(this).keyup(function(){
              calculateSum();
          });
      }); 
  }); 
  function calculateSum() { 
      var sum = 0;
      //iterate through each textboxes and add the values
      $(".txt").each(function() {
  
          //add only if the value is number
          if(!isNaN(this.value) &amp;&amp; this.value.length!=0) {
              sum += parseFloat(this.value); } 
      });
      //.toFixed() method will roundoff the final sum to 2 decimal places
      $("#sum").html(sum.toFixed(2));
  }
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>