Bootstrap Snippet Input Increases/Decreases using HTML Bootstrap Javascript

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="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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="container">
    
    <div class="row">
        <h2>Increases / Decreases - Aumenta e diminui valores inteiros</h2>
    </div>
    
    <div class="row">
    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
        <label>Qtd (Mínimo 1)</label>
        <div class="input-group input-sm">
            <span  id="menos" class="input-group-addon input-sm"><a href="#"><span class="glyphicon glyphicon-chevron-left text-danger"></span></a></span>            
            <input id="quantidade" name="quantidade" style="text-align:center;" type="number" value="1" class="form-control input-sm blue"> 
            <span  id="mais" class="input-group-addon input-sm"><a href="#"><span class="glyphicon glyphicon-chevron-right text-success"></span></a></span>
        </div>
    </div>
    
    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
        <label>Example 2</label>
        <div class="input-group input-sm">
            <span  id="menos" class="input-group-addon input-sm"><a href="#"><span class="glyphicon glyphicon-minus text-danger"></span></a></span>            
            <input id="quantidade" name="quantidade" style="text-align:center;" type="number" value="1" class="form-control input-sm blue"> 
            <span  id="mais" class="input-group-addon input-sm"><a href="#"><span class="glyphicon glyphicon-plus text-success"></span></a></span>
        </div>
    </div>
    
    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
        <label>Example 3</label>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
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
 $("#mais,#menos").click(function () {
                   
        var valor = verificaQuantidade();
            
        alternaQuantidade(valor,this.id);
        });
        
     $("#quantidade").blur(function () {
       
         var valor = verificaQuantidade();
         
         $("#quantidade").val(valor);
        
      });
        
      function verificaQuantidade(){
        
          var quantidade = parseInt($("#quantidade").val());
            
          var valor = ( Number.isNaN(quantidade) || quantidade < 1 ) ? 1 : quantidade;
          
          return valor;
        
      }
        
      function alternaQuantidade(valor, campo) {
        
          valor = (campo == "mais") ? (valor + 1):( (valor > 1) ? (valor - 1): valor);
               
          $("#quantidade").val(valor);
      }
      
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Input Increases/Decreases"
Bootstrap 3.3.0 Snippet by BrCodeSnippets

Related: See More

Questions / Comments:

"Input Increases/Decreases" Bootstrap 3.3.0 Snippet by BrCodeSnippets

Related: See More

Questions / Comments:

"Input Increases/Decreases"
Bootstrap 3.3.0 Snippet by BrCodeSnippets