2

Here is my initial code: Where I can add textbox by clicking the add button.

<script type="text/javascript">

function addRow(tableID) {

        var table = document.getElementById(tableID);

        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);

        var cell1 = row.insertCell(0);
        var element1 = document.createElement("input");
        element1.type = "text";
        element1.name = "txt1box[]";
        element1.id = "txt1Box[]";
        element1.size = "5";

        cell1.appendChild(element1);
        cell1.innerHTML = rowCount - 1 + 1;


        var cell2 = row.insertCell(1);
        var element2 = document.createElement("input");
        element2.type = "text";
        element2.name = "txt2box[]";
        element2.id = "txt2Box[]";
        element2.size = "68";
        cell2.appendChild(element2);

        //cell2.innerHTML = rowCount + 1;

        var cell3 = row.insertCell(2);
        var element3 = document.createElement("input");
        element3.type = "text";
        element3.name = "txt3box[]";
        element3.id = "txt3Box[]";
        cell3.appendChild(element3);

        var cell4 = row.insertCell(3);
        var element4 = document.createElement("input");
        element4.type = "text";
        element4.name = "txt4box[]";
        element4.id = "txt4Box[]";
        cell4.appendChild(element4);

        var cell5 = row.insertCell(4);
        var element5 = document.createElement("input");
        element5.type = "text";
        element5.name = "txt5box[]";
        element5.id = "txt5Box[]";
        element5.class = "txt5Box[]";
        cell5.appendChild(element5);


    }
        </script> 

The problem is, it can't get the value from the added textbox only the 1st available textbox. How can i get the value from the added textbox?

here is the first row that is already available.

<tr>
            <td width="10%">1</td>
            <td><input type="text" name="details[]" size="68"></td>
            <td><input type="text" name="qty[]"></td>
            <td><input type="text" name="unitprice[]"></td>
            <td><input class ="txt" type="text" name="totalamount[]"></td>
           </tr>

And here is my script for getting and sum up the value from the textbox.

<script>

      $(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) && this.value.length!=0) {
                  sum += parseFloat(this.value);
              }

          });
          //.toFixed() method will roundoff the final sum to 2 decimal places
          $("#sum").html(sum.toFixed(2));
      }
  </script>

Thanks in advance!

RobG
  • 142,382
  • 31
  • 172
  • 209
Eunji
  • 21
  • 1

0 Answers0