'multiple input text more than 50 how to get result from one ajax request?

    <?php include('db.php') ?>

<!DOCTYPE html>
<html lang="en">

<?php include('header.php') ?>

<body>


    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <table class="table table-bordered " id="invoiceItem">
                <!-- table-hover -->
                <tr>
                    <th width="2%"><input id="checkAll" class="formcontrol" type="checkbox"></th>
                    <th width="20%">ItemNo </th>
                    <th width="38%">ItemName</th>
                    <th width="10%">OnHand </th>
                    <th width="10%">Quantity</th>
                    <th width="10%">Price </th>
                    <th width="10%">Total </th>
                </tr>
                <?php
                $i = 1;

                while ($i < 51) {
                ?>
                    <tr>
                        <td><input class="itemRow" type="checkbox"></td>
                        <td><input type="text" class="form-control" name="productCode[]" id="productCode_<?php echo $i; ?>"></input></td>
                        <td><input readonly type="text" name="productName[]" id="productName_<?php echo $i; ?>" class="form-control" autocomplete="off"></td>
                        <td><input readonly type="number" name="productOnHand[]" id="productOnHand_<?php echo $i; ?>" class="form-control" autocomplete="off"></td>
                        <td><input type="number" min="0" name="quantity[]" id="quantity_<?php echo $i; ?>" class="form-control quantity" value="" autocomplete="off"></td>
                        <td><input readonly type="number" name="price[]" id="price_<?php echo $i; ?>" class="form-control price" autocomplete="off"></td>
                        <td><input readonly type="number" name="total[]" id="total_<?php echo $i; ?>" class="form-control total" readonly autocomplete="off"></td>

                    </tr>
                <?php
                    $i++;
                }
                ?>


            </table>
        </div>
    </div>




   <script>
        $(document).ready(function() {
            
   

            $("#productCode_1").focus();

           

            document.getElementById("productCode_1").addEventListener('change', () => {

                var PID = $("#productCode_1").val();
                getDataFromServer(PID);
                $("#productCode_2").focus();

            });


            document.getElementById("productCode_2").addEventListener('change', () => {

                var PID = $("#productCode_2").val();
                getDataFromServer2(PID);
                $("#productCode_3").focus();

            });

            document.getElementById("productCode_3").addEventListener('change', () => {

                var PID = $("#productCode_3").val();
                getDataFromServer3(PID);
                // $("#productCode_2").focus();

            });








            function getDataFromServer(PID) {

                $.ajax({
                    type: "POST",
                    url: "response.php",
                    data: {
                        pro_id: PID
                    },
                    success: function(response) {
                        const JSON_Obj = JSON.parse(response);
                        $('#productName_1').val(JSON_Obj.pro_name);
                        $('#productOnHand_1').val(JSON_Obj.pro_quantity);
                        $('#price_1').val(JSON_Obj.pro_price);
                        $("#quantity_1").val(1);
                        // calculateTotal();
                    }
                });
            }


            function getDataFromServer2(PID) {

                $.ajax({
                    type: "POST",
                    url: "response.php",
                    data: {
                        pro_id: PID
                    },
                    success: function(response) {
                        const JSON_Obj = JSON.parse(response);
                        $('#productName_2').val(JSON_Obj.pro_name);
                        $('#productOnHand_2').val(JSON_Obj.pro_quantity);
                        $('#price_2').val(JSON_Obj.pro_price);
                        $("#quantity_2").val(1);
                        // calculateTotal();
                    }
                });
            }

            function getDataFromServer3(PID) {

                $.ajax({
                    type: "POST",
                    url: "response.php",
                    data: {
                        pro_id: PID
                    },
                    success: function(response) {
                        const JSON_Obj = JSON.parse(response);
                        $('#productName_3').val(JSON_Obj.pro_name);
                        $('#productOnHand_3').val(JSON_Obj.pro_quantity);
                        $('#price_3').val(JSON_Obj.pro_price);
                        $("#quantity_3").val(1);
                        // calculateTotal();
                    }
                });
            }

          
        }); // document.ready
    </script>





</body>

</html>
phpajax


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions