How to populate a textbox in a table on the 'onblur' event of a different textbox in the same table?

Question

I have a table as below. I have to populate the Amount field using the Buy Quantity and Market Price field. Amount = Buy Quantity*Market Price. I am doing something as -

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"     "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Buy Stocks</title>

<script>
(function(){

var table = document.getElementById("mytable");
var tbody = table.getElementsByTagName("tbody")[0];
var rows = tbody.getElementsByTagName("tr");
function populateRow(index, addBlurEvent){
    var row = rows[index];
var cells = row.getElementsByTagName("td")
    var textboxes = row.getElementsByTagName("input");
var amountTextbox = textboxes[0];
    var totalTextbox = textboxes[1];
    var costCell = cells[2];
    var amount = amountTextbox.value.length>0 ? parseFloat(amountTextbox.value) : 0;
    var cost = parseFloat(costCell.innerHTML);
var total = amount * cost;
    totalTextbox.value = total;
if (addBlurEvent) {
        amountTextbox.onblur = function(){ populateRow(index,false); };
    }
}
for(i=0;i<rows.length;i++){
    populateRow(i,true);    
}
})();


</script>
</head>
<body>
<center>

<h5>Buy Stocks Here</h5>
    <form >
   <table border="1" cellpadding="5" id="mytable">
    <thead>
      <tr>
        <th>Stock Name</th>
        <th>Buy Quantity</th>
        <th>Market Price</th>
        <th>Amount</th>
      </tr>
    </thead>
    <tbody>
<tr>
        <td>Stock Name</td>
        <td><input type="text" name="quantity" ></td>
        <td>122</td>
        <td><input type="text" name="amount"></td>
      </tr>

      <tr>
        <td>Stock Name</td>
        <td><input type="text" name="quantity" ></td>
        <td>111</td>
        <td><input type="text" name="amount"></td>
      </tr>

    </tbody>
  </table>
 </form>
</center>

The above html's javascript function is supposed to work perfectly, I am not able to handle the 'onblur' event. How and where should I do that? Please suggest an answer which does not modify the script. Thanks.

Image for reference :

enter image description here

What do you mean by _"I am not able to handle the 'onblur' event"_? — Jim Garrison, Sep 27 '12 at 05:58
@jim - I meant that I was unaware of how to handle the self invoking function and then attach onblur to it. — Nihal Sharma, Sep 27 '12 at 06:16
@NihalSharma - you are using a self-invoking function which runs before the html parses, therefore no handlers are added to your code. Add the javascript before the closing body tag. — web-nomad, Sep 27 '12 at 06:18

web-nomad · Accepted Answer · 2012-09-27T06:34:48.243

See this: http://jsfiddle.net/picklespy/cxUz9/

If you want to use your code only and not the jquery one that i gave above, please use this:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"     "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Buy Stocks</title>
</head>
<body>
<center>

<h5>Buy Stocks Here</h5>
    <form >
   <table border="1" cellpadding="5" id="mytable">
    <thead>
      <tr>
        <th>Stock Name</th>
        <th>Buy Quantity</th>
        <th>Market Price</th>
        <th>Amount</th>
      </tr>
    </thead>
    <tbody>
<tr>
        <td>Stock Name</td>
        <td><input type="text" name="quantity" ></td>
        <td>122</td>
        <td><input type="text" name="amount"></td>
      </tr>

      <tr>
        <td>Stock Name</td>
        <td><input type="text" name="quantity" ></td>
        <td>111</td>
        <td><input type="text" name="amount"></td>
      </tr>

    </tbody>
  </table>
 </form>
</center>
<script type="text/javascript">
(function(){

var table = document.getElementById("mytable");
var tbody = table.getElementsByTagName("tbody")[0];
var rows = tbody.getElementsByTagName("tr");
function populateRow(index, addBlurEvent){
    var row = rows[index];
var cells = row.getElementsByTagName("td")
    var textboxes = row.getElementsByTagName("input");
var amountTextbox = textboxes[0];
    var totalTextbox = textboxes[1];
    var costCell = cells[2];
    var amount = amountTextbox.value.length>0 ? parseFloat(amountTextbox.value) : 0;
    var cost = parseFloat(costCell.innerHTML);
var total = amount * cost;
    totalTextbox.value = total;
if (addBlurEvent) {
        amountTextbox.onblur = function(){ populateRow(index,false); };
    }
}
for(i=0;i<rows.length;i++){
    populateRow(i,true);    
}
})();
</script>
</body>
</html>

How to populate a textbox in a table on the 'onblur' event of a different textbox in the same table?

1 Answers1