Блог

Я хочу добавить несколько продуктов в таблицу из динамически сгенерированного списка, где у каждого элемента есть кнопка для добавления его в таблицу. Сейчас это не работает, потому что, когда я нажимаю на продукт, он добавляет его в таблицу, а затем, если я нажимаю на другой элемент в списке, он просто заменяет первый элемент в списке. Этот список генерируется динамически, поскольку он поступает из базы данных.

HTML:

 <form action="insert.php" method= "POST" name = "productsForm">
            <table>
                <tr>
                    <th><label>Customer Name:</label></th>
                    <th><label>Phone:</label></th>
                    <th><label>Email:</label></th>
                    <th><label>RO | PO:</label></th>
                    <th><label>Address:</label></th>
                    
                </tr>
                <tr>
                    <td><input type="text" name="txtCustomerName" id = "txtCustomerName"></td>
                    <td><input type="text" name="txtPhone" id = "txtPhone"></td>
                    <td><input type="text" name="txtEmail" id= "txtEmail"></td>
                    <td><input type="text" name="txtRopo" id= "txtRopo"></td>
                    <td><input type="text" name="txtAddress" id= "txtAddress"></td>
                    
                </tr>
                <tr>
                    <th><label>SKU:</label></th>
                    <th><label>Product Name:</label></th>
                    <th><label>Quantity:</label></th>
                    <th><label>Retail Price:</label></th>
                    <th><label>List Price:</label></th>
                </tr>
                <tr>
                    <td><input type="text" name="txtSKU" id = "txtSKU"></td>
                    <td><input type="text" name="txtProductName" id= "txtProductName"></td>
                    <td><input type="text" name="txtQuantity" id= "txtQuantity"></td>
                    <td><input type="text" name="txtRetailPrice" id= "txtRetailPrice"></td>
                    <td><input type="text" name="txtListPrice" id= "txtListPrice"></td>
                </tr>
                <tr>
                    <td><input type="text" name="txtSKU1" id = "txtSKU1"></td>
                    <td><input type="text" name="txtProductName1" id= "txtProductName1"></td>
                    <td><input type="text" name="txtQuantity1" id= "txtQuantity1"></td>
                    <td><input type="text" name="txtRetailPrice1" id= "txtRetailPrice1"></td>
                    <td><input type="text" name="txtListPrice1" id= "txtListPrice1"></td>
                </tr>
                <tfoot>
                    <th><label id = "lblTotal">Total:</label><input type="text" name="txtTotal" id = "txtTotal"><input type="button" value= "Add" id = "addTotals"></button> </th>
                    
                </tfoot>
                    
                
                                   
            
            </table>    
            <button type="submit" name="submitOrder">Submit</button>                
        </form>
  

JavaScript — эта функция создает список:

 function populateProductList(jsonArr){                
    
    var html = "";

    html  = `<ol id="myULProducts">`;
            
    for(var x = 0; x < jsonArr.length; x  ){
                                
        html  = `
        <li SKU = "${jsonArr[x].SKU}">
        <a href="#" class="products">                
            <strong>Product SKU:</strong> ${jsonArr[x].SKU} 
            <br><strong>Product Name:</strong> ${jsonArr[x].product_name} 
            <br><strong>Retail Price:</strong> ${jsonArr[x].retail_price}
            <br><strong>List Price:</strong> ${jsonArr[x].list_price}
                    <br><br></a>
                    <button type="button" class="btnAddProductToOrder">Add to Order</button>    
                </li>
        </div>`
    }
    html  = `</ol>`;
    var ul = document.createElement("ul");
    ul.innerHTML = html;

    var tableContainer = document.getElementById("product-list-container");
    tableContainer.innerHTML = "";
    tableContainer.appendChild(ul);

    tableContainer.addEventListener("click", function(evt){
    //populateCardGroupList();
    var target = evt.target;
    //if statement to see if the classList has a button edit
        if(target.classList.contains("btnAddProductToOrder")){
            //get the id of the card group clicked
            var selectedId = target.closest("li").getAttribute("SKU");
            //get the card group attached to that id and pass it the rest of the json Array of objects
            var selectedProduct = getProductId(selectedId, jsonArr);
            populateOrderFormProducts(selectedProduct);                

        }
        
        
    });
    
    
}
  

JavaScript — эта функция добавляет выбранный элемент в списке в таблицу продуктов ниже

 function populateOrderFormProducts(jsonArr){        
    document.getElementById("txtSKU").value = jsonArr.SKU;
    document.getElementById("txtProductName").value = jsonArr.product_name;
    document.getElementById("txtQuantity").value = 1;
    document.getElementById("txtRetailPrice").value = jsonArr.retail_price;
    document.getElementById("txtListPrice").value = parseFloat(jsonArr.list_price);
}