Customize Input QTY (plus/minus) With jQuery

Form
File Size: 1.01 KB
Views Total: 671 views
Last Update:October 21, 2021
Publish Date: October 19, 2021
Official Website: Go to website
License: MIT
Plugin Author: puJ6G
Demo    Download

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.

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


Mady

Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.