I have a feature on my current site that increments and decrements a value when you click the plus button or the minus button. Since it's on an emerce site as an order quantity, it doesn't make a whole lot of sense to have an option for the value to be negative. I was trying to add some logic to my jquery that would prevent the value from being negative but my nested logic wasn't working for some reason. Any help would be much appreciated!

JQuery

$(document).ready(function(e) {

$('.up').on('click',function(){
            var num = $(this).parent().find('.input-quantity').val();
            $(this).parent().find('.input-quantity').val(parseInt(num)+1);
        });
        $('.down').on('click',function(){
              var num = $(this).parent().find('.input-quantity').val();
            $(this).parent().find('.input-quantity').val(parseInt(num) -1);
        }); 

});

HTML

 <div class="quantity clearfix">
    <span>quantity:</span>  
           <div  class="incre">
        <em class="down">-</em ><input type="text"  value="1" class="input1 input-quantity "><em class="up">+</em ><br>

</div>  
      <div class="clear"></div>  

   </div>

CSS

.quantity                        {margin: 30px 0 0 0;max-width:242px;border: solid 1px #d3d2d2;padding: 3px 0 6px 11px;border-radius: 4px;}
.quantity  span                 {display:inline-block;float:left;font-family:Arial, Helvetica, sans-serif;font-size: 14px;line-height: 20px;padding: 6px 0 0 0;color: #333333;}
.incre                  {display:inline-block;float:right;margin: 0;width: 39%;}
.incre  em                  {display: inline-block;font-size: 26px;line-height: 31px;width: 29px;height: 29px;background: #cccccc;border-radius: 100%;color: #fff;padding: 0;float: left;text-align: center;margin: 0; cursor:pointer;}
.incre  .input1             {outline:none;border:0;display: inline-block;float: left;width: 20px;text-align: center;margin: 0 7px 0 3px;padding: 3px 0 0 0;font-size: 19px;height: 28px;line-height: 19px;color: #000;}
.quantity  small                {display:block;font-size: 18px;line-height: 20px;color: #000;padding: 0 12px 0 9px;}

What I've tried:

I've tried changing the functionality for the 'down' button in my jQuery to say that if the value equals zero when the function is executed, make the value equal to one and decrement the value. This hack would prevent the value from ever going negative.

    $('.down').on('click',function(){
          var num = $(this).parent().find('.input-quantity').val();
     if(num = 0){num = 1}
        $(this).parent().find('.input-quantity').val(parseInt(num) -1);
    }); 

I also tried:

if(num === "0"){num === "1"}

before the statement that decrements the value since it seemed like the integer may have been returning as a string.

Anyways, any help would be very appreciated!

I have a feature on my current site that increments and decrements a value when you click the plus button or the minus button. Since it's on an emerce site as an order quantity, it doesn't make a whole lot of sense to have an option for the value to be negative. I was trying to add some logic to my jquery that would prevent the value from being negative but my nested logic wasn't working for some reason. Any help would be much appreciated!

JQuery

$(document).ready(function(e) {

$('.up').on('click',function(){
            var num = $(this).parent().find('.input-quantity').val();
            $(this).parent().find('.input-quantity').val(parseInt(num)+1);
        });
        $('.down').on('click',function(){
              var num = $(this).parent().find('.input-quantity').val();
            $(this).parent().find('.input-quantity').val(parseInt(num) -1);
        }); 

});

HTML

 <div class="quantity clearfix">
    <span>quantity:</span>  
           <div  class="incre">
        <em class="down">-</em ><input type="text"  value="1" class="input1 input-quantity "><em class="up">+</em ><br>

</div>  
      <div class="clear"></div>  

   </div>

CSS

.quantity                        {margin: 30px 0 0 0;max-width:242px;border: solid 1px #d3d2d2;padding: 3px 0 6px 11px;border-radius: 4px;}
.quantity  span                 {display:inline-block;float:left;font-family:Arial, Helvetica, sans-serif;font-size: 14px;line-height: 20px;padding: 6px 0 0 0;color: #333333;}
.incre                  {display:inline-block;float:right;margin: 0;width: 39%;}
.incre  em                  {display: inline-block;font-size: 26px;line-height: 31px;width: 29px;height: 29px;background: #cccccc;border-radius: 100%;color: #fff;padding: 0;float: left;text-align: center;margin: 0; cursor:pointer;}
.incre  .input1             {outline:none;border:0;display: inline-block;float: left;width: 20px;text-align: center;margin: 0 7px 0 3px;padding: 3px 0 0 0;font-size: 19px;height: 28px;line-height: 19px;color: #000;}
.quantity  small                {display:block;font-size: 18px;line-height: 20px;color: #000;padding: 0 12px 0 9px;}

What I've tried:

I've tried changing the functionality for the 'down' button in my jQuery to say that if the value equals zero when the function is executed, make the value equal to one and decrement the value. This hack would prevent the value from ever going negative.

    $('.down').on('click',function(){
          var num = $(this).parent().find('.input-quantity').val();
     if(num = 0){num = 1}
        $(this).parent().find('.input-quantity').val(parseInt(num) -1);
    }); 

I also tried:

if(num === "0"){num === "1"}

before the statement that decrements the value since it seemed like the integer may have been returning as a string.

Anyways, any help would be very appreciated!

• javascript
• jquery

Share Improve this question Follow asked Sep 5, 2017 at 13:09 SDHSDH 39133 silver badges1818 bronze badges 2

• you can use <input type= 'number'> – Azad Commented Sep 5, 2017 at 13:11
• 3 <input type="number" min="0"> – StudioTime Commented Sep 5, 2017 at 13:12

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Use an input type=number, then set a minimum

<input type="number" min="0">

It should be

if(num == 0) {
  num = 1;
}

instead of num = 0