Bootstrap Snippet Anirudha Bhowmik product count using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
  <div class="countItem">                    
                            <span class="btn-minus"><span class="glyphicon glyphicon-minus"></span></span>
                            <input value="1" class="count">
                            <span class="btn-plus"><span class="glyphicon glyphicon-plus"></span></span>
                    </div><!--countItem--> 
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
/*start plus-minus*/
.btn-minus{
    cursor:pointer;
    padding:6px 7px;
    border:1px solid #c6c6c6;
    border-radius:50%;
    margin-right: 5px;
    font-size: 12px;
    color: #333333;
}
.btn-plus{
    cursor:pointer;
    padding:6px 7px;
    border:1px solid #c6c6c6;
    border-radius:50%;
    margin-left: 5px;
    font-size: 12px;
    color: #333333;
}
.count{
    font-size: 16px;
    width: 40px;
    text-align: center;
}
/*end plus-minus*/
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
  $(document).ready(function(){
            $(".btn-minus").on("click",function(){
                var now = $(".countItem input").val();
                if ($.isNumeric(now)){
                    if (parseInt(now) -1> 0)
                    { now--;}
                    $(".countItem input").val(now);
                }
            })            
            $(".btn-plus").on("click",function(){
                var now = $(".countItem input").val();
                if ($.isNumeric(now)){
                    $(".countItem input").val(parseInt(now)+1);
                }
            })                        
        })
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Anirudha Bhowmik product count"
Bootstrap 4.1.1 Snippet by anirudhabhowmik

Related: See More

Questions / Comments:

"Anirudha Bhowmik product count" Bootstrap 4.1.1 Snippet by anirudhabhowmik

Related: See More

Questions / Comments:

"Anirudha Bhowmik product count"
Bootstrap 4.1.1 Snippet by anirudhabhowmik