How do i access dynamic row values in table in javascript

Question

My Aim is to get multiple row data (product_id and its product_qnty) that is filled by the user in invoice, so i could deduct those quantities from the existing product quantities using php. Here i am trying to get each cells data and store it in json format to pass it in controller (Laravel) php.

Here is the code;

Javascript :

function InvoiceDataProcess()
{

    //gets table
    var oTable = document.getElementById('rowData');

    //gets rows of table
    var rowLength = oTable.rows.length;

    //loops through rows
    for (var i = 0; i < rowLength; i++){

        //gets cells of current row
        var oCells = oTable.rows.item(i).cells;

        //gets amount of cells of current row
        var cellLength = oCells.length;

        //loops through each cell in current row
        for(var j = 0; j < cellLength; j++){

            // get your cell info here
            // var cellVal = oCells.item(j).innerHTML;


 cellVal = oCells[j].querySelector("input").value || oCells[j].querySelector("select").value || 0;

            console.log(cellVal);

        }
    }

    getData();

}

function getData()
{

    const arr = [document.querySelectorAll("#rowData [name=product_id]")] // cast to array to use forEach
        .map(ele => ({ "product_id": ele.value, "product_qnty": ele.closest("tr").querySelector("[name^=product_qnty]").value }));
    console.log(arr)

}

HTML :

<tbody class="text-center" id="rowData">

        <tr class="items" id="item1">
         <td>1</td>
         <td class="d-none d-print-none"><input type="hidden" id="product_id" name="product_id"></td>
         <td><input type="text" id="product_sku"></td>
          <td><select id="products">
              <option>Select Product</option>
              </select>
          </td>
 <td class="d-print-none"><input type="number" id="total_qnty" disabled></td>
         <td><input type="number" id="product_sp" step=".01" required></td>
         <td><input type="number" id="product_qnty" name="product_qnty" required></td>
         <td><input type="number" id="gst_perc" step=".01" min="0" max="100"></td>
          <td><input type="number" id="tax_perc" step=".01" min="0" max="100"></td>
          <td><input type="number" id="disc_perc" step=".01" min="0" max="100"></td>
          <td><input type="number" id="final_price" step=".01" required></td>
      </tr>
</tbody>
</table>

Inspect Element (After adding 3 rows in invoice):

    <tr class="items" id="item1">
       <td>1</td>
       <td class="d-none d-print-none"><input type="hidden" id="product_id" name="product_id" value="8"></td>
       <td><input type="text" id="product_sku"></td>
       <td><select id="products">
            <option>Select Product</option>
            <option value="Apple Watch Series 3 - Purple">Apple Watch Series 3 - Purple</option>
    <option value="Apple Watch Series 6 - Black">Apple Watch Series 6 - Black</option>
    <option value="Color check - Blue">Color check - Blue</option>
    <option value="Gucci sport Bag pro plus new demo - Grey">Gucci sport Bag pro plus new demo - Grey</option>
    <option value="iPad 5 - White">iPad 5 - White</option>
    <option value="Iphone 12 Mini - Blue">Iphone 12 Mini - Blue</option><option value="Iphone 12 Pro - Green">Iphone 12 Pro - Green</option>
    <option value="Iphone 12 Pro - -">Iphone 12 Pro - -</option>
    <option value="Nike Sport Plus - Yellow">Nike Sport Plus - Yellow</option>
    <option value="Puma Shoes - Brown">Puma Shoes - Brown</option>
    <option value="smart watch - -">smart watch - -</option>
    </select>
    </td>
    <td class="d-print-none"><input type="number" id="total_qnty" disabled=""></td>
    <td><input type="number" id="product_sp" step=".01" required=""></td>
    <td><input type="number" id="product_qnty" name="product_qnty" required="" max="2" min="1"></td>
    <td><input type="number" id="gst_perc" step=".01" min="0" max="100"></td>
   <td><input type="number" id="tax_perc" step=".01" min="0" max="100"></td>
    <td><input type="number" id="disc_perc" step=".01" min="0" max="100"></td>
   <td><input type="number" id="final_price" step=".01" required=""></td>
  </tr>

<!-- SECOND ROW OF INVOICE ---->

<tr class="items" id="item1">
<td>2</td>
<td class="d-none d-print-none"><input type="hidden" id="product_id2" name="product_id" value="7" class="product-id"></td>
 <td><input type="text" id="product_sku2"></td>
 <td><select id="products2" class="product-selector">
     <option>Select Product</option>
     <option value="Apple Watch Series 3 - Purple">Apple Watch Series 3 - Purple</option>
    <option value="Apple Watch Series 6 - Black">Apple Watch Series 6 - Black</option>
   <option value="Color check - Blue">Color check - Blue</option> 
   <option value="Gucci sport Bag pro plus new demo - Grey">Gucci sport Bag pro plus new demo - Grey</option>
  <option value="Iphone 12 Mini - Blue">Iphone 12 Mini - Blue</option> 
  <option value="Iphone 12 Pro - Green">Iphone 12 Pro - Green</option> 
 <option value="Iphone 12 Pro - -">Iphone 12 Pro - -</option>
  <option value="Nike Sport Plus - Yellow">Nike Sport Plus - Yellow</option>
  <option value="Puma Shoes - Brown">Puma Shoes - Brown</option><option value="smart watch - -">smart watch - -</option></select>
   </td>
   <td class="d-print-none"><input type="number" id="total_qnty2" disabled=""></td>
    <td><input type="number" id="product_sp2" step=".01" required="" class="product-price"></td>
     <td><input type="number" id="product_qnty2" name="product_qnty" required="" max="38" min="1" class="product-qnty"></td>
     <td><input type="number" id="gst_perc2" step=".01" min="0" max="100" class="product-gst"></td>
      <td><input type="number" id="tax_perc2" step=".01" min="0" max="100" class="product-tax"></td>
       <td><input type="number" id="disc_perc2" step=".01" min="0" max="100" class="product-disc"></td>
      <td><input type="number" id="final_price2" step=".01" required="" class="product-total"></td>
      </tr>

<!---THIRD ROW OF INVOICE --->

<tr class="items" id="item1">
  <td>3</td>
  <td class="d-none d-print-none"><input type="hidden" id="product_id3" name="product_id" value="35" class="product-id"></td>
  <td><input type="text" id="product_sku3"></td>
  <td><select id="products3" class="product-selector">
      <option>Select Product</option>
      <option value="Apple Watch Series 3 - Purple">Apple Watch Series 3 - Purple</option>
      <option value="Apple Watch Series 6 - Black">Apple Watch Series 6 - Black</option>
    <option value="Color check - Blue">Color check - Blue</option> 
     <option value="Gucci sport Bag pro plus new demo - Grey">Gucci sport Bag pro plus new demo - Grey</option>
    <option value="Iphone 12 Mini - Blue">Iphone 12 Mini - Blue</option> 
      <option value="Iphone 12 Pro - Green">Iphone 12 Pro - Green</option>
    <option value="Nike Sport Plus - Yellow">Nike Sport Plus - Yellow</option>
   <option value="Puma Shoes - Brown">Puma Shoes - Brown</option><option value="smart watch - -">smart watch - -</option>
</select>
    </td>
    <td class="d-print-none"><input type="number" id="total_qnty3" disabled=""></td>
   <td><input type="number" id="product_sp3" step=".01" required="" class="product-price"></td>
    <td><input type="number" id="product_qnty3" name="product_qnty" required="" max="3" min="1" class="product-qnty"></td>
    <td><input type="number" id="gst_perc3" step=".01" min="0" max="100" class="product-gst"></td>
     <td><input type="number" id="tax_perc3" step=".01" min="0" max="100" class="product-tax"></td>
     <td><input type="number" id="disc_perc3" step=".01" min="0" max="100" class="product-disc"></td>
     <td><input type="number" id="final_price3" step=".01" required="" class="product-total"></td>
     </tr>
          

How do i get values and store it in JSON format ?

Answer 1

To get an array of productIDs and their quantities, you can use jQuery as follows

 $(function() { $("#print_invoice").on("click", function(e) { e.preventDefault(); // stop submission const arr = $("#rowData [id^=product_id]") .map(function() { const $qnty = $(this).closest("tr").find("[id^=product_qnty]") return ({ [$(this).attr("id")]: $(this).val(), [$qnty.attr("id")]: $qnty.val() }) }) .get(); console.log(arr) }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" /> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"></script> <form id="invoice_data_process"> <div class="row pt-1 px-2 py-2 border border-top-0"> <div class="table-responsive px-2" style="overflow-x: hidden"> <table class="table table-striped table-sm table-bordered animated animatedFadeInRight fadeInRight" id="mainTable"> <thead class="text-center" style="background-color: lightgrey"> <tr> <th>Sr.</th> <th class="d-print-none d-none">id</th> <th>ID/SKU</th> <th>Product Name</th> <th class="d-print-none">Total Qty</th> <th>Price (₹)</th> <th>Qnty</th> <th>GST%</th> <th>Tax%</th> <th>Disc%</th> <th>Total (₹)</th> </tr> </thead> <tbody class="text-center" id="rowData"> <tr class="items" id="item1"> <td>1</td> <td class="d-none d-print-none"><input type="hidden" id="product_id" name="product_id" value="8"></td> <td><input type="text" id="product_sku"></td> <td> <select id="products"> <option>Select Product</option> <option value="Apple Watch Series 3 - Purple">Apple Watch Series 3 - Purple</option> <option value="Apple Watch Series 6 - Black">Apple Watch Series 6 - Black</option> <option value="Color check - Blue">Color check - Blue</option> <option value="Gucci sport Bag pro plus new demo - Grey">Gucci sport Bag pro plus new demo - Grey</option> <option value="iPad 5 - White">iPad 5 - White</option> <option value="Iphone 12 Mini - Blue">Iphone 12 Mini - Blue</option> <option value="Iphone 12 Pro - Green">Iphone 12 Pro - Green</option> <option value="Iphone 12 Pro - -">Iphone 12 Pro - -</option> <option value="Nike Sport Plus - Yellow">Nike Sport Plus - Yellow</option> <option value="Puma Shoes - Brown">Puma Shoes - Brown</option> <option value="smart watch - -">smart watch - -</option> </select> </td> <td class="d-print-none"><input type="number" id="total_qnty" disabled=""></td> <td><input type="number" id="product_sp" step=".01" required=""></td> <td><input type="number" id="product_qnty" name="product_qnty" required="" max="2" min="1"></td> <td><input type="number" id="gst_perc" step=".01" min="0" max="100"></td> <td><input type="number" id="tax_perc" step=".01" min="0" max="100"></td> <td><input type="number" id="disc_perc" step=".01" min="0" max="100"></td> <td><input type="number" id="final_price" step=".01" required=""></td> </tr> <!-- SECOND ROW OF INVOICE ----> <tr class="items" id="item1"> <td>2</td> <td class="d-none d-print-none"><input type="hidden" id="product_id2" name="product_id" value="7" class="product-id"></td> <td><input type="text" id="product_sku2"></td> <td> <select id="products2" class="product-selector"> <option>Select Product</option> <option value="Apple Watch Series 3 - Purple">Apple Watch Series 3 - Purple</option> <option value="Apple Watch Series 6 - Black">Apple Watch Series 6 - Black</option> <option value="Color check - Blue">Color check - Blue</option> <option value="Gucci sport Bag pro plus new demo - Grey">Gucci sport Bag pro plus new demo - Grey</option> <option value="Iphone 12 Mini - Blue">Iphone 12 Mini - Blue</option> <option value="Iphone 12 Pro - Green">Iphone 12 Pro - Green</option> <option value="Iphone 12 Pro - -">Iphone 12 Pro - -</option> <option value="Nike Sport Plus - Yellow">Nike Sport Plus - Yellow</option> <option value="Puma Shoes - Brown">Puma Shoes - Brown</option> <option value="smart watch - -">smart watch - -</option> </select> </td> <td class="d-print-none"><input type="number" id="total_qnty2" disabled=""></td> <td><input type="number" id="product_sp2" step=".01" required="" class="product-price"></td> <td><input type="number" id="product_qnty2" name="product_qnty" required="" max="38" min="1" class="product-qnty"></td> <td><input type="number" id="gst_perc2" step=".01" min="0" max="100" class="product-gst"></td> <td><input type="number" id="tax_perc2" step=".01" min="0" max="100" class="product-tax"></td> <td><input type="number" id="disc_perc2" step=".01" min="0" max="100" class="product-disc"></td> <td><input type="number" id="final_price2" step=".01" required="" class="product-total"></td> </tr> <!---THIRD ROW OF INVOICE ---> <tr class="items" id="item1"> <td>3</td> <td class="d-none d-print-none"><input type="hidden" id="product_id3" name="product_id" value="35" class="product-id"></td> <td><input type="text" id="product_sku3"></td> <td> <select id="products3" class="product-selector"> <option>Select Product</option> <option value="Apple Watch Series 3 - Purple">Apple Watch Series 3 - Purple</option> <option value="Apple Watch Series 6 - Black">Apple Watch Series 6 - Black</option> <option value="Color check - Blue">Color check - Blue</option> <option value="Gucci sport Bag pro plus new demo - Grey">Gucci sport Bag pro plus new demo - Grey</option> <option value="Iphone 12 Mini - Blue">Iphone 12 Mini - Blue</option> <option value="Iphone 12 Pro - Green">Iphone 12 Pro - Green</option> <option value="Nike Sport Plus - Yellow">Nike Sport Plus - Yellow</option> <option value="Puma Shoes - Brown">Puma Shoes - Brown</option> <option value="smart watch - -">smart watch - -</option> </select> </td> <td class="d-print-none"><input type="number" id="total_qnty3" disabled=""></td> <td><input type="number" id="product_sp3" step=".01" required="" class="product-price"></td> <td><input type="number" id="product_qnty3" name="product_qnty" required="" max="3" min="1" class="product-qnty"></td> <td><input type="number" id="gst_perc3" step=".01" min="0" max="100" class="product-gst"></td> <td><input type="number" id="tax_perc3" step=".01" min="0" max="100" class="product-tax"></td> <td><input type="number" id="disc_perc3" step=".01" min="0" max="100" class="product-disc"></td> <td><input type="number" id="final_price3" step=".01" required="" class="product-total"></td> </tr> </tbody> </table> </div> </div> </div> </div> <div class="text-center"> <input type="checkbox" id="checkInvoice" value="1" class="d-print-none" /> <label for="checkInvoice" class="text-danger d-print-none"><small>I have reviewed & checked the Invoice data for printing</small></label> </div> <div class="row justify-content-center"> <button class="btn btn-primary btn-sm d-print-none" type="submit" id="print_invoice">Process & Print Invoice</button> </div> </form>

Answer 2

There have been vast improvements over the years to how JavaScript can manage and update the DOM, and in your case, fetch form values .

Here I select the table with querySelector , and then I use that element to select the input, select, and textarea elements with querySelectorAll (you can add more form elements to that list if you need to).

You can then map over those elements and return their values.

 // Get the table const table = document.querySelector('table'); // Now find all the form elements within the table const elements = table.querySelectorAll('input, select, textarea'); // Handle the form submission const button = document.querySelector('button'); button.addEventListener('click', handleClick, false); function handleClick() { // We can't use `map` directly on a nodelist from querySelectorAll // so we need to change it to a proper array // Here we're iterating over the elements and creating a new // array of objects with the element name as the key, // and the value as, well, the value const data = Array.from(elements).map(el => ({ [el.name]: el.value })); // Stringify the data! console.log(JSON.stringify(data)); }

 <table> <tbody> <tr> <td><input name="name" placeholder="Some text" type="text" /></td></tr> <tr><td> <select name="products"> <option selected disabled>Select Product</option> <option>Bob</option> <option>Steve</option> <option>Doris</option> </select> </td></tr> <tr><td><input name="number" type="number" /></td></tr> <tr><td><textarea name="area"></textarea></td></tr> </tbody> </table> <button>Click me</button>