Loading
When increase in quantity results increase in price    
  •     

        
  •    
    • CSS:
    1. .center{  
    2. width: 150px;  
    3. margin: 40px auto;  
    4. }  
    JS:
    1. //plugin bootstrap minus and plus    
    2. //http://jsfiddle.net/laelitenetwork/puJ6G/    
    3. $('.btn-number').click(function(e){    
    4.     e.preventDefault();    
    5.         
    6.     fieldName = $(this).attr('data-field');    
    7.     type      = $(this).attr('data-type');    
    8.     var input = $("input[name='"+fieldName+"']");    
    9.     var currentVal = parseInt(input.val());    
    10.     if (!isNaN(currentVal)) {    
    11.         if(type == 'minus') {    
    12.                 
    13.             if(currentVal > input.attr('min')) {    
    14.                 input.val(currentVal - 1).change();    
    15.             }     
    16.             if(parseInt(input.val()) == input.attr('min')) {    
    17.                 $(this).attr('disabled', true);    
    18.             }    
    19.     
    20.         } else if(type == 'plus') {    
    21.     
    22.             if(currentVal < input.attr('max')) {    
    23.                 input.val(currentVal + 1).change();    
    24.             }    
    25.             if(parseInt(input.val()) == input.attr('max')) {    
    26.                 $(this).attr('disabled', true);    
    27.             }    
    28.     
    29.         }    
    30.     } else {    
    31.         input.val(0);    
    32.     }    
    33. });    
    34. $('.input-number').focusin(function(){    
    35.    $(this).data('oldValue', $(this).val());    
    36. });    
    37. $('.input-number').change(function() {    
    38.         
    39.     minValue =  parseInt($(this).attr('min'));    
    40.     maxValue =  parseInt($(this).attr('max'));    
    41.     valueCurrent = parseInt($(this).val());    
    42.         
    43.     name = $(this).attr('name');    
    44.     if(valueCurrent >= minValue) {    
    45.         $(".btn-number[data-type='minus'][data-field='"+name+"']").removeAttr('disabled')    
    46.     } else {    
    47.         alert('Sorry, the minimum value was reached');    
    48.         $(this).val($(this).data('oldValue'));    
    49.     }    
    50.     if(valueCurrent <= maxValue) {    
    51.         $(".btn-number[data-type='plus'][data-field='"+name+"']").removeAttr('disabled')    
    52.     } else {    
    53.         alert('Sorry, the maximum value was reached');    
    54.         $(this).val($(this).data('oldValue'));    
    55.     }    
    56.         
    57.         
    58. });    
    59. $(".input-number").keydown(function (e) {    
    60.         // Allow: backspace, delete, tab, escape, enter and .    
    61.         if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 190]) !== -1 ||    
    62.              // Allow: Ctrl+A    
    63.             (e.keyCode == 65 && e.ctrlKey === true) ||     
    64.              // Allow: home, end, left, right    
    65.             (e.keyCode >= 35 && e.keyCode <= 39)) {    
    66.                  // let it happen, don't do anything    
    67.                  return;    
    68.         }    
    69.         // Ensure that it is a number and stop the keypress    
    70.         if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {    
    71.             e.preventDefault();    
    72.         }    
    73. });  
    +1