"Buttons minus and plus in input "
Bootstrap 3.1.0 Snippet by davidsantanacosta

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="center"> <p> </p><div class="input-group"> <span class="input-group-btn"> <button type="button" class="btn btn-default btn-number" disabled="disabled" data-type="minus" data-field="quant[1]"> <span class="glyphicon glyphicon-minus"></span> </button> </span> <input type="text" name="quant[1]" class="form-control input-number" value="1" min="1" max="10"> <span class="input-group-btn"> <button type="button" class="btn btn-default btn-number" data-type="plus" data-field="quant[1]"> <span class="glyphicon glyphicon-plus"></span> </button> </span> </div> <p></p> <p> </p><div class="input-group"> <span class="input-group-btn"> <button type="button" class="btn btn-danger btn-number" data-type="minus" data-field="quant[2]"> <span class="glyphicon glyphicon-minus"></span> </button> </span> <input type="text" name="quant[2]" class="form-control input-number" value="10" min="1" max="100"> <span class="input-group-btn"> <button type="button" class="btn btn-success btn-number" data-type="plus" data-field="quant[2]"> <span class="glyphicon glyphicon-plus"></span> </button> </span> </div> <p></p> </div>
.center{ width: 150px; margin: 40px auto; }
//plugin bootstrap minus and plus //http://jsfiddle.net/laelitenetwork/puJ6G/ $('.btn-number').click(function(e){ e.preventDefault(); fieldName = $(this).attr('data-field'); type = $(this).attr('data-type'); var input = $("input[name='"+fieldName+"']"); var currentVal = parseInt(input.val()); if (!isNaN(currentVal)) { if(type == 'minus') { if(currentVal > input.attr('min')) { input.val(currentVal - 1).change(); } if(parseInt(input.val()) == input.attr('min')) { $(this).attr('disabled', true); } } else if(type == 'plus') { if(currentVal < input.attr('max')) { input.val(currentVal + 1).change(); } if(parseInt(input.val()) == input.attr('max')) { $(this).attr('disabled', true); } } } else { input.val(0); } }); $('.input-number').focusin(function(){ $(this).data('oldValue', $(this).val()); }); $('.input-number').change(function() { minValue = parseInt($(this).attr('min')); maxValue = parseInt($(this).attr('max')); valueCurrent = parseInt($(this).val()); name = $(this).attr('name'); if(valueCurrent >= minValue) { $(".btn-number[data-type='minus'][data-field='"+name+"']").removeAttr('disabled') } else { alert('Sorry, the minimum value was reached'); $(this).val($(this).data('oldValue')); } if(valueCurrent <= maxValue) { $(".btn-number[data-type='plus'][data-field='"+name+"']").removeAttr('disabled') } else { alert('Sorry, the maximum value was reached'); $(this).val($(this).data('oldValue')); } }); $(".input-number").keydown(function (e) { // Allow: backspace, delete, tab, escape, enter and . if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 190]) !== -1 || // Allow: Ctrl+A (e.keyCode == 65 && e.ctrlKey === true) || // Allow: home, end, left, right (e.keyCode >= 35 && e.keyCode <= 39)) { // let it happen, don't do anything return; } // Ensure that it is a number and stop the keypress if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) { e.preventDefault(); } });

Related: See More


Questions / Comments:

Doesn't let me input numeric values using shift on Czech keyboard. Instead it allows special characters placed on these keys (+ěščřžýáíé)

panfanky () - 6 months ago - Reply 0


Thanks for the script.. It made my day..

Sunitha Siddhalingaiah () - 2 years ago - Reply 0


when i add runat="server" to the input texbox the javascript does not work. HOw can i get around that?
I want to be able to access the data in code behind. Also if I don't put runat="server" the value goes back to 1 every-time there's a postback

Krisl () - 3 years ago - Reply 0


little bit better js code for this snippet from me http://www.bootply.com/zMZU...

Giorgi Lagvilava () - 4 years ago - Reply 0


how can i add words after the value? like value= "1 adult"

Gilbert () - 4 years ago - Reply 0


in jquery accordion <div> buttons breaks

If crate this snippet in jquery accordion tab buttons will broken. This bcs .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button font-size: 1em
We need set it to 14px ourself.

Гафаров Артур () - 5 years ago - Reply 0


No meu não funcionou, pode me ajudar? Qual versão do JS vc está usando?

rjcoutinho () - 5 years ago - Reply 0


versão do JS? hahhaahaahahahha OMG

Ze Pissus () - 4 years ago - Reply 0


show de bola!

Victor Magalhaes () - 5 years ago - Reply 0