<!-- Change the `data-field` of buttons and `name` of input field's for multiple plus minus buttons--><divclass="input-group plus-minus-input"><divclass="input-group-button"><buttontype="button"class="button hollow circle"data-quantity="minus"data-field="quantity"><iclass="fa fa-minus"aria-hidden="true"></i></button></div><inputclass="input-group-field"type="number"name="quantity"value="0"><divclass="input-group-button"><buttontype="button"class="button hollow circle"data-quantity="plus"data-field="quantity"><iclass="fa fa-plus"aria-hidden="true"></i></button></div></div>
jQuery(document).ready(function(){
// This button will increment the value
$('[data-quantity="plus"]').click(function(e){
// Stop acting like a button
e.preventDefault();
// Get the field name
fieldName = $(this).attr('data-field');
// Get its current valuevar currentVal = parseInt($('input[name='+fieldName+']').val());
// If is not undefinedif (!isNaN(currentVal)) {
// Increment
$('input[name='+fieldName+']').val(currentVal + 1);
} else {
// Otherwise put a 0 there
$('input[name='+fieldName+']').val(0);
}
});
// This button will decrement the value till 0
$('[data-quantity="minus"]').click(function(e) {
// Stop acting like a button
e.preventDefault();
// Get the field name
fieldName = $(this).attr('data-field');
// Get its current valuevar currentVal = parseInt($('input[name='+fieldName+']').val());
// If it isn't undefined or its greater than 0if (!isNaN(currentVal) && currentVal > 0) {
// Decrement one
$('input[name='+fieldName+']').val(currentVal - 1);
} else {
// Otherwise put a 0 there
$('input[name='+fieldName+']').val(0);
}
});
});
By
Harry Manchanda
