Increase or decrease a value for inputs using jquery

June 29, 2019 XpertPhp Comments 0 Comment

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>

<!DOCTYPE html>

<head>

<title>increase or decrease a value for inputs using jquery - XpertPhp</title>

$(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>

<label for="qty">Quntity:</label>

</div>

</div>

</body>

</html>

If you like this article then You can see, comment and share this article demo

Show Demo

Please follow and like us:

Related posts: