Add this on plus-minus quantity html inputs via jQuery, We have created a code that results in a input box, this box has a plus and minus sign on either side. These buttons can be used to add new items or minus the extra items from your customer’s list. It determines the quantity that your customer requires. The code of this easy to use to the tool is FREE! The language used for its creation is jQuery. It simplifies the user experience on your website or webpage. This also will enable customers to visit your website and shop more! All resulting in increased productivity.
Table of Contents
How to use :
Add jQuery Library in header section.
<script src="jquery/1.11.1/jquery.min.js""></script>
Add Html Form with input box.
<form id='myform' method='POST' action='#'>
<input type='button' value='-' class='qtyminus' field='quantity' />
<input type='text' name='quantity' value='0' class='qty' />
<input type='button' value='+' class='qtyplus' field='quantity' />
</form>
<form id='myform2' method='POST' action='#'>
<input type='button' value='-' class='qtyminus' field='quantity' />
<input type='text' name='quantity' value='0' class='qty' />
<input type='button' value='+' class='qtyplus' field='quantity' />
</form>
Add CSS for better styling.
#myform {
text-align: center;
padding: 5px;
border: 1px dotted #ccc;
margin: 2%;
}
.qty {
width: 40px;
height: 25px;
text-align: center;
}
input.qtyplus {
width: 25px;
height: 25px;
}
input.qtyminus {
width: 25px;
height: 25px;
}
Add Input Qty jQuery Script in footer Section.
jQuery(document).ready(function() {
// This button will increment the value
$('.qtyplus').click(function(e) {
// Stop acting like a button
e.preventDefault();
// Get the field name
fieldName = $(this).attr('field');
// Get its current value
var currentVal = parseInt($(this).siblings('input[name=' + fieldName + ']').val());
// If is not undefined
if (!isNaN(currentVal)) {
// Increment
$(this).siblings('input[name=' + fieldName + ']').val(currentVal + 1);
} else {
// Otherwise put a 0 there
$(this).siblings('input[name=' + fieldName + ']').val(0);
}
});
// This button will decrement the value till 0
$(".qtyminus").click(function(e) {
// Stop acting like a button
e.preventDefault();
// Get the field name
fieldName = $(this).attr('field');
// Get its current value
var currentVal = parseInt($(this).siblings('input[name=' + fieldName + ']').val());
// If it isn't undefined or its greater than 0
if (!isNaN(currentVal) && currentVal > 0) {
// Decrement one
$(this).siblings('input[name=' + fieldName + ']').val(currentVal - 1);
} else {
// Otherwise put a 0 there
$(this).siblings('input[name=' + fieldName + ']').val(0);
}
});
});
Done
Thanks for make jQuery plugin is developed by puJ6G For more Helpfull for users, please check the demo page or visit the official website.
