Customize Input QTY (plus/minus) With jQuery

Form
Multiple Input Qty Box with Sibling In jQuery
File Size: 1.01 KB
Views Total: 2203 views
Last Update:March 25, 2023
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

Thanks for make jQuery plugin is developed by puJ6G For more Helpfull for users, please check the demo page or visit the official website.

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.