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
}
}
?>
