JavaScript - 如何在所有 html 行中运行 javascript

Question

I am creating invoice form, I have written a Java Script to calculate Tax and Discount price as the user the value, But it is just working in one row how can I enable it to work on all the rows

Javascript to calculate discount and tax

Html form

Answer 1

The better option is to do this calculation in PHP itself but if you want to do this in Javascript the you can do something like this:

Try creating a JS function that takes in all the values and the id of output input field and make sure that the id of output field is distinct.

JS Code

function calculate(unit_price, quantity, discount, tax, output_id) {
    var subtotal = "do subtotal calc here";
    document.getElementById(output_id).value = subtotal;
}

PHP/HTML Code

<?php
    // mySQL Code goes here
    while($row = mysql_fetch_array($result, MYSAL_ASSOC))
?>
<div class="centered">
    <table border="1">
    <tr>
        <form id = "invoiceform" action="final.php" method="post">
        <td><input type="text" id="Sl_no" value="<?php echo $s; ?>"></td> <!-- DO NOT INCREASE $S HERE YET-->
        <td><input type="text" id="partno" value="<?php echo $p[$j]; ?>"></td>
        <td><input type="text" id="description" value="<?php $row['Description']; ?>"></td>
        <td><input type="text" id="unit_price" value="<?php echo $row['Unit_Price']; ?>"></td>
        <td><input type="text" id="quantity" value=""></td>
        <td><input type="text" id="discount" value=""></td>
        <td><input type="text" id="tax" value=""></td>
        <td><input type="text" id="<?php echo 'subtotal_'.$s;?>" value=""></td>
        <script>
        calculate(<?php echo $row['Unit_Price']; ?>, <?php echo $row['Quantity']; ?>, <?php echo $row['Discount']; ?>, <?php echo $row['Tax']; ?>, <?php echo 'subtotal_'.$s; s++;?>);
        </script>
    </tr>
    </table>
</div>

PS Try making all the field ids distinct the way i made subtotal id distinct because a HTML page is supposed to have distinct IDs on elements