如何从具有相同类名的输入元素中获取特定输入值[关闭]

Basically I'm running a php while loop which returns a container for for every row the statement is true.

The container contains input fields, and as you can imagine they all have the same class names in all the containing divs

On user keyup/input I want to get the that specific elements value and parent container using JavaScript/ JQuery

My JavaScript looks like this:

     $(document).ready(function() {
    function delay(fn, ms) {
        let timer = 0;
        return function(...args) {
            clearTimeout(timer)
            timer = setTimeout(fn.bind(this, ...args), ms || 0)
        }
    }
   $(".quantity").on('keyup input',delay(function(e) {
    console.log('Time elapsed!', this.value);
  var a = parseInt(document.getElementById('quantity').value);
  var b = parseInt(document.getElementById('price').value);
  var Qprice = a * b;
    $.ajax({
        url: 'cartFx.php',
        type: 'post',
        data: { Qprice: Qprice},
        success: function(response) {
            document.getElementById('Qprice').innerHTML = Qprice;
            alert(Qprice);
        }
});
},500));
});

The PHP code

$i = 0;
                while($i < mysqli_num_rows($cart_products)) {
                    $meta = mysqli_fetch_assoc($cart_products);
                    $Pname = $meta['Pname'];
                    $inCartId = $meta['id'];
                    $price = $meta['price'];
                    $Bname = $meta['FromBusiness'];
                    $image = $meta['image'];
                    $code = $meta['code'];

?>
        <div class='cart_body'>
            <input id ='price' name='price' value='<?php echo $price?>'></input>
            <input class="quantity" id ='quantity' type="number" name='quantity' value='<?php 
             echo $quantity?>'></input>
             <p id="Qprice"></p>

        </div>
<?php           
$i= $i + 1;
                }

    }else
    {
?>
        ....
<?php
    }
}
?>

In your js, you have this $(".quantity").on('keyup input',delay(function(e) { which says that there is an element with class quantity. Yet, in your php code, quantity is an id and not a class. Not sure how it is working on the first element but change that id="quantity" to class="quantity" and it should work

Ok, I found a solution that seems to work. I introduced a function that uses the jQuery closest() method.

   $(".quantity").bind().on('keyup input',function(event) {
    editTask(event.target);
   });
   function editTask(node) { 
  var a = $(node).closest('.cart_body');

  var price  = a.find('.price').val();
  var quantity = a.find('.quantity').val();
  var Qprice = price * quantity;

    $.ajax({
        url: 'cartFx.php',
        type: 'post',
        data: { Qprice: Qprice},
        success: function(response) {
            a.find('.Qprice').text(Qprice);
            alert(Qprice);
        }
});
   }

I also removed all id attributes and only used classe as a selector

<div class='cart_body'>
   <input class ='price' name='price' value='<?php echo $price?>'></input>
   <input class="quantity"name='quantity' value='<?php echo $quantity?>'></input>
   <p class="Qprice"></p>
</div>

it sounds like you have multiple instances of the same id and therefore when you try and target by id, it is only referencing the first instance of it.

as mentioned in the comments, id’s must be unique:

<div id=“unique_a” class=“shared”>div 01</div>

<div id=“unique_b” class=“shared”>div 02</div>

code demonstrating a way to reference element’s values on keyup.

code demonstrating why id’s must be unique.

you must choose a solution that uniquely identifies the element you want to target, eg by unique id or data attribute or eq() of class or, as I just saw you have tried, a jQuery method that traverses the DOM from a particular element until it finds a particular element.