Can someone please help me this code work

function addProductRow() {

    var table = document.getElementById("product-table");

    var newRow = table.insertRow(-1);

    newRow.classList.add("product-row");

    var nameCell = newRow.insertCell(0);

    var quantityCell = newRow.insertCell(1);

    var priceCell = newRow.insertCell(2);

    var totalCell = newRow.insertCell(3);

    var deleteCell = newRow.insertCell(4);

    nameCell.innerHTML = '<select class="form-control select2" name="product_name[]" onchange="getProductDetails(this)">' +

                     '<option value="">Select Product</option>' +

                     '<'+'+?php while ('+'$product_row = mysqli_fetch_assoc($product_result)) { ?>' +

                         '<option value="<'+'?php echo $product_row['+'id'+']; ?>"><'+'?php echo $product_row['+'acc'+']; ?></option>' +

                     '<'+'?php } ?>' +

                 '</select>';

    quantityCell.innerHTML = '<input type="number" name="product-quantity[]" id="quantity' + table.rows.length + '" onchange="calculateTotal(' + table.rows.length + ')" min="" value="">';

    priceCell.innerHTML = '<input type="number" name="product-price[]" id="price' + table.rows.length + '" onchange="calculateTotal(' + table.rows.length + ')" min="" step="" value="">';

    totalCell.innerHTML = '<input type="number" name="product-total[]" class="total" id="total' + table.rows.length + '" readonly value="">';

    deleteCell.innerHTML = '<button type="button" onclick="deleteProductRow(this)">Delete</button>';

    calculateGrandTotal();

  }

Php code is executed on a web server when the page is requested. Putting markup, that looks like php code into a table cell, in the browser, is meaningless and doesn’t do anything.

Writing out bespoke javascript to create a table row, each table cell, and put form field markup into each table cell, is a waste of typing, that must be changed every time you do something different. Instead, just output the markup for a complete table row inside <template></template> tags, which will let you produce the <option></option> markup using php code, then inside the addProductRow() javascript function you can clone the content inside the <template> tags and append it to the table.

Sponsor our Newsletter | Privacy Policy | Terms of Service