We will discuss about an increase or decrease value for inputs using jquery. normally we this use for cart page in e-commerce site. when clicking on the + and – buttons but it doesn’t to work. so we have created this article for a solution.
We will set the layout using the bootstrap, so you can follow the below example for layout. first, we have take left and the right classes for the -(decrease) and +(increase).
When we click on the -(decrease) button then we will get the input value and check it is greater than 0 if it is greater we will decrease it.
When we click on the +(increase) button then we will get the input value and check it is greater than 0 if it is greater we will decrease it.
<!DOCTYPE html>
<html lang="en">
<head>
<title>increase or decrease a value for inputs using jquery - XpertPhp</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('.left1').click(function(){
var qty_val1 = $(this).next().val();
if(qty_val1>0){
$('#qty').val(parseInt(qty_val1)-1);
}
});
$('.right1').click(function(){
if($("#qty").val()!=""){
var qty_val1 = $(this).prev().val();
$('#qty').val(parseInt(qty_val1)+1);
}
});
});
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<label for="qty">Quntity:</label>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<span class="btn btn-primary btn-sm left1">-</span>
<input type="text" class="qty" name="qty" id="qty" value="0">
<span class="btn btn-primary btn-sm right1">+</span>
</div>
</div>
</div>
</body>
</html>
If you like this article then You can see, comment and share this article demo