title: Calculate two input values of fetched data using jquery
body: <p>The code below displays a table of data in input box based on drop down selection. Then I want to multiply row1 and row2 values and should display in row3. But the calculation between row1 and row2 is not working using jQuery. Need help!</p>
  
  <p><strong>display.php</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;link href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" /&gt;
  &lt;script src="//code.jquery.com/jquery-1.11.0.min.js"&gt;&lt;/script&gt;
  &lt;script src="//code.jquery.com/ui/1.11.2/jquery-ui.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
  function showUser(str) {
      if (str == "") {
          document.getElementById("txtHint").innerHTML = "";
          return;
      } else {
          if (window.XMLHttpRequest) {
              // code for IE7+, Firefox, Chrome, Opera, Safari
              xmlhttp = new XMLHttpRequest();
          } else {
              // code for IE6, IE5
              xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
          }
          xmlhttp.onreadystatechange = function() {
              if (xmlhttp.readyState == 4 &amp;&amp; xmlhttp.status == 200) {
                  document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
              }
          }
          xmlhttp.open("GET","ajax.php?q="+str,true);
          xmlhttp.send();
      }
  }
  $(document).ready(function() {
      $('#form').on('keyup', '.test1', calcTotal) ;
      $('#form').on('keyup', '.test2', calcTotal) ;
      function calcTotal() {
          var $row2 = $(this).closest('tr'),
          test_row  = $row2.find('.test1').val(),
          test_row2 = $row2.find('.test2').val(), 
          total     = test_row * test_row2;
          $row2.find('.test3').val(total);
      }
  });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;form name="form_name" method="post" id="form_name" action="" &gt;
  &lt;select name="select_name" id="select_name" onchange="showUser(this.value)"&gt;
  &lt;option value="22"&gt;22&lt;/option&gt;&lt;option value="33"&gt;33&lt;/option&gt;&lt;/select&gt;
  &lt;div id="txtHint"&gt;&lt;/div&gt;
  &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>ajax.php</strong></p>
  
  <pre><code>&lt;?php
  $q = $_GET['q'];
  include('connection.php');
  $sql="SELECT * from clients where value='".$q."' ";
  $result = mysql_query($sql);
  echo "&lt;table id='form'&gt;
  &lt;tr&gt;
  &lt;th&gt;row1&lt;/th&gt;
  &lt;th&gt;row2&lt;/th&gt;
  &lt;th&gt;row3&lt;/th&gt;
  &lt;/tr&gt;";
  while($row = mysql_fetch_array($result)) {
      $row1=$row['row1'];
      $row2=$row['row2'];
      $row3=$row['row3'];
      echo "&lt;tr&gt;";
      echo "&lt;td&gt;&lt;input type='text' name='test1[]' class='test1' value='$row1' /&gt;&lt;/td&gt;";
      echo "&lt;td&gt;&lt;input type='text' name='test2[]' class='test2' value='$row2' /&gt;&lt;/td&gt;";
      echo "&lt;td&gt;&lt;input type='text' name='test3[]' class='test3' value='$row3'/&gt;&lt;/td&gt;";
      echo "&lt;/tr&gt;";
  } 
  echo "&lt;/table&gt;";
  ?&gt;
  </code></pre>