How to calculate input Arrays in html into a 3rd input for total

General Web Dev
1 
            <table id="dataTable">

                <tbody>
                <tr id='row_0'>
                    <p>
                    <td id="tdLineNum">
                        <!--                            <input type="text" id="tdLineNum"  required="required" name="lineNum" readonly value="1">-->
                    </td>
                    <td>
                        <input type="checkbox" id="chkBx">
                    </td>
                    <td>
                        <input type="text" id="tdContractNum" name="contractNum[]"
                               placeholder="Contract Number">
                    </td>
                    <td>
                        <input type="text" id="tdDesc" required="required" name="desc[]" placeholder="Description">
                    </td>
                    <td>
                        <input type="text" id="tdQty" required="required" name="qty[]" placeholder="Quantity"
                               oninput="calculate('row_0')">
                    </td>
                    <td>
                        <input type="text" id="tdPriceEach" required="required" name="price[]" placeholder="Price"
                               oninput="calculate('row_0')">
                    </td>
                    <td>
                        <input type="text" class="tdPriceTotal" required="required" name="total[]" placeholder="Line Item Total"
                               onkeyup="calcGrandTot()">
                    </td>
                    </p>
                </tr>

                </tbody>
            </table>


            <table class="GrandTotalSet">
                <tbody>
                <tr id="grandTotalRow">
                    <td>
                        <label for="grandTotal">Grand Total: </label>
                        <input type="number" id="grandTotal" name="grandTotal[]" placeholder="Grand Total" >
                    </td>
                </tr>
                </tbody>
            </table>

            <!--End of items field set-->
        </fieldset>



    function calculate(elementID) {
        var mainRow = document.getElementById(elementID);
        var myBox1 = mainRow.querySelectorAll('[name=qty]')[0].value;
        var myBox2 = mainRow.querySelectorAll('[name=price]')[0].value;
        var total = mainRow.querySelectorAll('[name=total]')[0];
        var myResult1 = myBox1 * myBox2;
        total.value = myResult1.toFixed(2);

    }

Note: The javascript function works when the names aren't arrays. The html inputs have to be arrays because I'm using $_POST with php to add them into another form and database. I'm also adding rows dynamically using a button, which is why I'm using arrays.
2

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.