Javascript 数量验证多个输入

Question

I'm new to programming and still learn. I just want to ask how to make code validation for more than one input? I have data table item. I want to run validation input for each row.

My Code below is only run for the first row, and cannot running in the second row.

<tr>
  <td><input id="stock" type="number" name="stock" value="<?php echo $row->stock; ?>" readonly></td>
  <td><input id="qty" onInput="calc();" type="number" name="qty"></td>
</tr>
<script type="text/javascript">
    function calc(){
        var stock = document.getElementById("stock").value;
        var qty = document.getElementById("qty").value;

        if(qty > stock){
            alert("Qty More Than Stock!");
            document.getElementById("qty").value = 1;
        }

    }
    </script>

Answer 1

You can use querySelectorAll with an data-attribute for select all inputs then forEach it and check the value like:

 document.querySelectorAll('input[data-check]').forEach(el => { el.addEventListener('change', () => { if (parseInt(el.value) > parseInt(el.parentElement.previousElementSibling.children[0].value)) { alert("Qty More Than Stock!"); el.value = 0; } }); });

 <table> <tr> <td>Stock</td> <td>Qty</td> </tr> <tr> <td><input id="stock" type="number" name="stock" value="2" readonly></td> <td><input data-check type="number" name="qty"></td> </tr> <tr> <td><input id="stock" type="number" name="stock" value="3" readonly></td> <td><input data-check type="number" name="qty"></td> </tr> </table>

PS. Remember to use always a structure like my example else my code probably doesn't work.
in fact el.parentElement.previousElementSibling.children[0].value it's like say: element - parent of element (td) - previous element (other td) - the first children of the previus element (input).

---

Another option is use another data-attribute for select the stock value like:

 document.querySelectorAll('input[data-check]').forEach(el => { el.addEventListener('change', () => { let stock = document.querySelector('input[data-index="'+el.dataset.stock+'"]'); if (parseInt(el.value) > parseInt(stock.value)) { alert("Qty More Than Stock!"); el.value = 0; } }); });

 <table> <tr> <td>Stock</td> <td>Qty</td> </tr> <tr> <td><input data-index='0' type="number" name="stock" value="2" readonly></td> <td><input data-check data-stock='0' type="number" name="qty"></td> </tr> <tr> <td><input data-index='1' type="number" name="stock" value="25" readonly></td> <td><input data-check data-stock='1' type="number" name="qty"></td> </tr> </table>