I have a shopping cart and I want to implement an update quantities per item.. Let me show you that code maybe it will be easier to explain.

HTML:

<div class="custom-quantity-input">
  <input type="text" name="quantity" class="" value="<?php echo $items['qty']; ?>">
     <a href="#" onclick="return false;" class="quantity-btn quantity-input-up"><i class="fa fa-angle-up"></i></a>
     <a href="#" onclick="return false;" class="quantity-btn quantity-input-down"><i class="fa fa-angle-down"></i></a>
</div>

I want that when user click on the link add-one to increase the amount on the input field and when they click #decrease to reduce by one the amount on the input field just visually no AJAX or anything.

I don't know much of JavaScript that's why I seek your help.

I have a shopping cart and I want to implement an update quantities per item.. Let me show you that code maybe it will be easier to explain.

HTML:

<div class="custom-quantity-input">
  <input type="text" name="quantity" class="" value="<?php echo $items['qty']; ?>">
     <a href="#" onclick="return false;" class="quantity-btn quantity-input-up"><i class="fa fa-angle-up"></i></a>
     <a href="#" onclick="return false;" class="quantity-btn quantity-input-down"><i class="fa fa-angle-down"></i></a>
</div>

I want that when user click on the link add-one to increase the amount on the input field and when they click #decrease to reduce by one the amount on the input field just visually no AJAX or anything.

I don't know much of JavaScript that's why I seek your help.

• javascript
• jquery

Share Improve this question Follow edited Sep 2, 2016 at 2:55 j08691 208k3232 gold badges269269 silver badges280280 bronze badges asked Sep 1, 2016 at 16:31 AL DIAL DI 56077 silver badges2424 bronze badges 1

• Please next time show a minimal effort to answer your own question posting the code you had issues with! – Roko C. Buljan Commented Sep 2, 2016 at 9:50

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

$(function(){
  $(".quantity-input-up").click(function(){
    var inpt = $(this).parents(".custom-quantity-input").find("[name=quantity]");
    var val = parseInt(inpt.val());
    if ( val < 0 ) inpt.val(val=0);
    inpt.val(val+1);
  });
  $(".quantity-input-down").click(function(){
    var inpt = $(this).parents(".custom-quantity-input").find("[name=quantity]");
    var val = parseInt(inpt.val());
    if ( val < 0 ) inpt.val(val=0);
    if ( val == 0 ) return;
    inpt.val(val-1);
  });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="custom-quantity-input">
  <input type="number" min="0" name="quantity" class="" value="5">
     <a href="#" class="quantity-btn quantity-input-up"><i class="fa fa-angle-up">+</i></a>
     <a href="#" class="quantity-btn quantity-input-down"><i class="fa fa-angle-down">-</i></a>
</div>

<div class="custom-quantity-input">
  <input type="number" min="0" name="quantity" class="" value="9">
     <a href="#" class="quantity-btn quantity-input-up"><i class="fa fa-angle-up">+</i></a>
     <a href="#" class="quantity-btn quantity-input-down"><i class="fa fa-angle-down">-</i></a>
</div>

<div class="custom-quantity-input">
  <input type="number" min="0" name="quantity" class="" value="200">
     <a href="#" class="quantity-btn quantity-input-up"><i class="fa fa-angle-up">+</i></a>
     <a href="#" class="quantity-btn quantity-input-down"><i class="fa fa-angle-down">-</i></a>
</div>

I hope this helps:

$( "#more" ).click(function() {
  var qtt = parseInt($('#quantity').val(), 10);
  $('#quantity').val(qtt+1);
});

$( "#less" ).click(function() {
  var qtt = parseInt($('#quantity').val(), 10);
  if (qtt > 0) { //does not allow negative values
    $('#quantity').val(qtt-1);
  }
});

<script src="https://code.jquery./jquery-3.1.0.min.js"></script>

<input type="text" id="quantity" value="5">
<button id="more" type="button">+</button>
<button id="less" type="button">-</button>

Do not forget to include the jQuery project.

Here's a nicer and more portable solution that accounts for multiple inputs on a page:

jQuery(function($) {

  $(".quantity-btn").on("click", function(e) {
    e.preventDefault();                               // Don't scroll top.
    var $inp = $(this).closest("div").find("input"),  // Get input
        isUp = $(this).is(".quantity-input-up"),      // Is up clicked? (Boolean)
        currVal = parseInt($inp.val(), 10);           // Get curr val
    $inp.val(Math.max(0, currVal += isUp ? 1 : -1));  // Assign new val
  });

  // Other DOM ready code here
  
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="custom-quantity-input">
  <input type="text" name="quantity" class="" value="0">
  <a href="#" class="quantity-btn quantity-input-up">&#9650;</a>
  <a href="#" class="quantity-btn quantity-input-down">&#9660;</a>
</div>

<div class="custom-quantity-input">
  <input type="text" name="quantity" class="" value="2">
  <a href="#" class="quantity-btn quantity-input-up">&#9650;</a>
  <a href="#" class="quantity-btn quantity-input-down">&#9660;</a>
</div>

the event.preventDefault() is just to make sure your browser does not scroll to top on anchor click.

Quick way:

function initCartCounter(input, upBtn, downBtn) {
  upBtn.onclick = () => input.value++;
  downBtn.onclick = () => input.value--;
}

//No matter which way you get these elements
initCartCounter(
  document.getElementById('val'),
  document.links[0],
  document.links[1]
);

<input id="val" type="number" value="0"/>
<a href="javascript:;">Add</a>
<a href="javascript:;" >Sub</a>

A bit cleaner and scalable:

!function() {
document.querySelectorAll('.cart')
.forEach(cart => {
  let input = cart.querySelector('.cart-number');
  cart.querySelector('.cart-number-inc')
    .addEventListener('click', () => input.innerText = (input.innerText|0)+1);
  cart.querySelector('.cart-number-dec')
    .addEventListener('click', () => input.innerText = (input.innerText|0)-1);
})  
}();

.pointer {cursor: pointer;}

<div class="cart">
  <span class="cart-number">0</span>
  <span class="cart-number-inc pointer">Add</span>
  <span class="cart-number-dec pointer">Dec</span>
</div>

---

Best way, imo, is to use native input[type=number]:

<input type="number" value="0"/>