How to get dynamic added row data in array

Question

I am doing add multiple item pass thorugh API. Im not sure how to get the dynamic added row data. I know I need to use for loop to specific each of the row like row[0], row[1], row[2] to differentiate them and get the count for array. Anyone have idea on how to get the dynamic row data and pass the array to ajax. Js.Fiddle

<table>
  <thead>
    <tr>
      <th>Action</th>
      <th>Description</th>
      <th>Qty</th>
      <th>Unit Price</th>
      <th>Amount</th>
    </tr>
  </thead>
  <tbody class="items_table">
    <tr class="item-row">
      <td><button id="delete" href="javascript:;" onclick="deleteRow(this)" title="Remove row">Delete</button></td>
      <td><input class="form-control row-desc" id="desc" rows="1"></td>
      <td><input class="form-control tx-right row-qty" type="text" id="qty" onkeyup="calc()" value="0"></td>
      <td><input class="form-control tx-right row-unitprice" type="text" id="unitprice" value="0"></td>
      <td><input class="form-control tx-right row-amount" type="text" id="amount" disabled></td>
    </tr>
    <tr class="item-row">
      <td></td>
      <td colspan="2"></td>
      <td class="tx-right">Tax:</td>
      <td>
        <input class="form-control tx-right" type="text" id="amounttax"></td>
    </tr>
  </tbody>
  <tr id="hiderow">
    <td colspan="7" class="tx-center tx-15"><b><a id="addrow" href="javascript:;" title="Add a row"><i class="fe fe-plus-circle"></i>Add an Item</a></b></td>
  </tr>
</table>

<script>
        $(document).ready(function() {
          AddItem();
          $('#addrow').click(function() {
            addItem();
          });
          $('.delete-row').click(function() {
            deleteRow(btn);
          });
        });

        function deleteRow(btn) {
          var row = btn.parentNode.parentNode;
          var next = row.parentNode.rows[row.rowIndex + 0];
          row.parentNode.removeChild(next);
          row.parentNode.removeChild(row);
        }

        function addItem() {

          var itemRow =
            '<tr class="item-row">' +
            '<td><button class="delete-row" href="javascript:; "onclick = "deleteRow(this)">Delete</button></td>' +
            '<td><textarea class="form-control row-desc" id="desc" rows="1"></textarea></td>' +
            '<td><input class="form-control tx-right row-qty" type="text" id="qty" onkeyup="calc()" value="0"></td>' +
            '<td><input class="form-control tx-right row-unitprice" type="text" id="unitprice" value="0"></td>' +
            '<td><input class="form-control tx-right row-amount" type="text" id="amount" disabled></td>' +
            '</tr>' +
            '<tr class="item-row">' +
            '<td></td>' +
            '<td colspan="2"></td>' +
            '<td class="tx-right">Tax:</td>' +
            '<td><input class="form-control tx-right" type="text" id="amounttax"></td>'
          '</tr>';

          $(".items_table").append(itemRow);

        }

        function AddItem() {
          $("#btnAddItem").click(function(e) {
            //arrayItem
            var arrayItem = [];
            var sArrayItem = "";

            var item = {
              ItemDesc: $("desc").val(),
              ItemUnitPrice: $("unitprice").val(),
              ItemQty: $("qty").val(),
              TaxAmount: $("amounttax").val(),
              ItemTotalAmount: $("amount").val()
            }

            arrayItem.push(item)
            // at here, I only able to get the row 1 data, the following added row item didnt get it.
            //byright here should give me array of item, but now I only able get the first row.

            sArrayItem = JSON.stringify(arrayItem);

            $.ajax({
              type: "POST",
              url: "AddItem",
              data: JSON.stringify({
                sArrayItem
              }),
              contentType: "application/json; charset=utf-8",
              dataType: "json",
              success: function(result) {

                if (result.d.indexOf(".aspx") != -1)
                  window.location.href = result.d;
                else
                  showPopup(result);
              },
              failure: function(response) {
                alert(response.d);
              }
            });
          });
        };
<script>

Kannan · Accepted Answer · 2021-02-23 15:02:33Z

If you are trying to build an array(with the row data) when you click on a button try out the below CodePen code.

I have slightly modified the HTML structure if that is ok for you.

We need to loop through each row to fetch the entered data.

    let arrayItem = [];
    $.each($(".items_table .item-row"),function(index,value){
      let desc = $(this).find(".row-desc").val()
      let qty = $(this).find(".row-qty").val()
      let unitprice = $(this).find(".row-unitprice").val()
      let amount = $(this).find(".row-amount").val()
      let tax = $(this).find(".row-tax").val()
      let item = {
              ItemDesc: desc,
              ItemUnitPrice:unitprice,
              ItemQty: qty,
              TaxAmount: tax,
              ItemTotalAmount: amount,
            }
      arrayItem.push(item)
   });
   console.log(arrayItem);

Check out the code here -> https://codepen.io/askannan/pen/jOVamvJ

Collectives™ on Stack Overflow

How to get dynamic added row data in array

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related