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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
.center{
width: 150px;
margin: 40px auto;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
//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() {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

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

rjcoutinho () - 10 years ago - Reply -1


versão do JS? hahhaahaahahahha OMG

Ze Pissus () - 10 years ago - Reply 0


Doesn't let me input numeric values using shift on Czech keyboard. Instead it allows special characters placed on these keys (+Ä›šÄÅ™Å¾ýáíé)

panfanky () - 5 years ago - Reply 0


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

Sunitha Siddhalingaiah () - 7 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 () - 9 years ago - Reply 0


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

Giorgi Lagvilava () - 9 years ago - Reply 0


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

Gilbert () - 10 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.

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


show de bola!

Victor Magalhaes () - 10 years ago - Reply 0