Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<script language="javascript" type="text/javascript">
var i=2;
function addRow()
{
      var tbl = document.getElementById('customersAdd');
      var lastRow = tbl.rows.length;
      var iteration = lastRow - 1;
      var row = tbl.insertRow(lastRow);
​
      var firstCell = row.insertCell(0);
      var el = document.createElement('input');
      el.placeholder = 'Quantity';
      el.type = 'text';
      el.name = 'quantity' + i;
      el.id = 'quantity' + i;
      firstCell.appendChild(el);
​
      var secondCell = row.insertCell(1);
      var el2 = document.createElement('input');
      el2.placeholder = 'Description';
      el2.type = 'text';
      el2.name = 'description' + i;
      el2.id = 'description' + i;
      secondCell.appendChild(el2);
​
      var thirdCell = row.insertCell(2);
      var el3 = document.createElement('input');
      el3.placeholder = 'Rate';
      el3.type = 'text';
      el3.name = 'rate' + i;
      el3.id = 'rate' + i;
      thirdCell.appendChild(el3);
      
      var forthCell = row.insertCell(3);
      var el4 = document.createElement('input');
      el4.placeholder = 'Amount';
      el4.type = 'text';
      el4.name = 'amount' + i;
      el4.id = 'amount' + i;
            forthCell.appendChild(el4);
     // alert(i);
      i++;
    
    //  alert(i);
}
function startCalc(){
  interval = setInterval("calc()",1);
}
function calc(){
    one = document.main.quantity1.value;
  two = document.main.rate1.value; 
  document.main.amount1.value = (one * 1) * (two * 1);
  
}
function stopCalc(){
  clearInterval(interval);
}
</script>
</head>
​
<body><form action="submit.php" name="main" method="post">
<table style="border-collapse: collapse;" border="0" align="center" width="50%" class="horiz" id="customersAdd">
   <tr>
     
     <td align="center"><br/>
     <input class="text" style="width:100%" type="button" align="middle"value="Add Aditional Row" onClick="addRow()" /></td>
   </tr>
    <tr align="center">
    
     <td>
       <br />
       <input placeholder="Quantity" type="text" name="quantity1" id="quantity1" onFocus="startCalc();" onBlur="stopCalc();" />
       <br /></td>
     <td>
       <br />
       <input placeholder="Description" type="text" name="description1" id="description1"/>
       <br /></td>
     <td>
       <br />
       <input placeholder="Rate" type="text" name="rate1" id="rate1" onFocus="startCalc();" onBlur="stopCalc();"/>
       <br /></td>
     <td>
       <br />
       <input placeholder="Amount" type="text" name="amount1" id="amount1" onBlur="stopCalc();" onFocus="startCalc();" readonly="true" />
       <br /></td>
</tr>
​
 </table>
​
</body>
</html>
​
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers