when I click the pulse button, take the value at the input field and increase the value and show it in there but if I add more than one item (like the image shows https://i.stack.imgur.com/P3aDp.jpg ) then I click the pulse button second or another row the value increase on first-row input field NOT that relevant clicked row input field value (I'm adding that row using a .appent the reason when I click right side product it will add to the left side table) how can I solve it pls see blow I attached my code
//increase product quantity function pluse() { let qnty = +$('#qnty').val(); let price = parseFloat($('#price').val()); qnty = qnty + 1; let subtotal = price * qnty; $('#qnty').val(qnty); $('#subtotal').val(subtotal.toFixed(2)); } //decrease product quantity function minus() { let qnty = +$('#qnty').val(); let price = +$('#price').val(); if (qnty > 1) { let newQnty = qnty - 1; let NewSubtotal = newQnty * price; $('#qnty').val(newQnty); $('#subtotal').val(NewSubtotal.toFixed(2)); } }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <tr> <td><input type="text" class="form-control-plaintext" name="product[]" value="<?php echo $row['product_name'];?>"></td> <td> <div class="input-group mb-3"> <div class="input-group-prepend"> <button type="button" class="input-group-text pluse" data-target="qnty" onclick="pluse(this)"><i class="fal fa-plus">+</i></button> </div> <div class="custom-file" style="width:100px"> <input type="text" class="form-control qnty " value="1" id="qnty" name="qnty[]"> </div> <div class="input-group-prepend"> <button type="button" class="input-group-text minus" onclick="minus()"><i class="far fa-minus"></i></button> </div> </div> </td> <td><input type="text" class="form-control-plaintext .price" name="price[]" id="price" value="1500.00"></td> <td><input type="text" class="form-control-plaintext" name="subtotal[]" id="subtotal" value="1500.00"></td> <td><a href="" class="btn text-danger">✗</a></td> </tr>
You need to rewrite your functions to accept an objet by parameter like this:
function pluse(ObjectClicked)
also you need to send the object to the function like this:
onclick="minus(this)"
you need learn about Jquery selections like "closest" , "find" etc
I rewrite your code, and I hope this code help you to understand:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Font Awesome 4.7-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Hello, world!</title>
</head>
<body>
<div class="container" >
<!--question HTML CODE-->
<tr>
<td>
<div class="input-group mb-3" >
<div class="input-group-prepend">
<button type="button" class="input-group-text pluse" data-target="qnty" onclick="pluse(this)"><i class="fa fa-plus"></i></button>
</div>
<div class="custom-file" style="width:100px">
<input type="text" class="form-control qnty " value="5" id="qnty" name="qnty[]">
</div>
<div class="input-group-prepend">
<button type="button" class="input-group-text minus" onclick="minus(this)"><i class="fa fa-minus"></i></button>
</div>
</div>
<div class="input-group mb-3" >
<div class="input-group-prepend">
<button type="button" class="input-group-text pluse" data-target="qnty" onclick="pluse(this)"><i class="fa fa-plus"></i></button>
</div>
<div class="custom-file" style="width:100px">
<input type="text" class="form-control qnty " value="6" id="qnty" name="qnty[]">
</div>
<div class="input-group-prepend">
<button type="button" class="input-group-text minus" onclick="minus(this)"><i class="fa fa-minus"></i></button>
</div>
</div>
<div class="input-group mb-3" >
<div class="input-group-prepend">
<button type="button" class="input-group-text pluse" data-target="qnty" onclick="pluse(this)"><i class="fa fa-plus"></i></button>
</div>
<div class="custom-file" style="width:100px">
<input type="text" class="form-control qnty " value="6" id="qnty" name="qnty[]">
</div>
<div class="input-group-prepend">
<button type="button" class="input-group-text minus" onclick="minus(this)"><i class="fa fa-minus"></i></button>
</div>
</div>
<!-- Add the div class="input-group mb-3" that you need -->
</td>
</tr>
<!---->
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- Question Script-->
<script>
//increase product quantity
function pluse(ObjectClicked){
// create new value adding 1
var newQuantity= parseInt( $(ObjectClicked).closest('.input-group').find("input").val() ) + 1;
//set the value to the closest input
$(ObjectClicked).closest('.input-group').find("input").val(newQuantity);
//maybe you need to redefine the formulas for sub and total
}
//decrease product quantity
function minus(ObjectClicked){
// verfify the actual value
var Quantity= parseInt( $(ObjectClicked).closest('.input-group').find("input").val() );
//verfique the quantity
if (Quantity>0)
{
// create new value substractig 1
var newQuantity= parseInt( $(ObjectClicked).closest('.input-group').find("input").val() ) - 1;
//set the value to the closest input
$(ObjectClicked).closest('.input-group').find("input").val(newQuantity);
}
//maybe you need to redefine the formulas for sub and total
}
</script>
<!-- -->
</body>
</html>
You can add new lines manually or using Jquery
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.