Increase or decrease a value for inputs using jquery – onlinecode
In this post we will give you information about Increase or decrease a value for inputs using jquery – onlinecode. Hear we will give you detail about Increase or decrease a value for inputs using jquery – onlinecodeAnd how to use it also give you demo for it if it is necessary.
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 - onlinecode</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 >
<div >
<div >
<label for="qty">Quntity:</label>
</div>
</div>
<div >
<div >
<span >-</span>
<input type="text" name="qty" id="qty" value="0">
<span >+</span>
</div>
</div>
</div>
</body>
</html>
If you like this article then You can see, comment and share this article demo
Show Demo
Hope this code and post will helped you for implement Increase or decrease a value for inputs using jquery – onlinecode. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs