CODEWITHSUNDEEP
jqueryhtmltwitter-bootstrap-3
Arun
Arun

Reputation: 142

input group button in bootstrap, click on plus add one, minus sub one

bootstrap 3 input group button, Two buttons between one text box, click on '+' button add one in textbox, click on '-' button sub one in textbox. using jquery. Can u pls help me how to do this?

<div class="input-group">
    <span class="input-group-btn">
        <button class="btn btn-white btn-minuse" type="button">-</button>
    </span>
    <input type="text" class="form-control no-padding add-color text-center height-25" maxlength="3" value="0">
    <span class="input-group-btn">
        <button class="btn btn-red btn-pluss" type="button">+</button>
    </span>
</div><!-- /input-group -->

http://jsfiddle.net/bsarunmca/kv0wvgex/

Pls don't add ID for button or text box because am appending this from jquery depends on how many img am getting from api.

Upvotes: 1

Views: 25162

Answers (3)

Jignesh Darji
Jignesh Darji

Reputation: 99

Please find code here with html and bootstrap to create numeric up down with plus and minus button

// Jquery
$(document).on('click', '.value-control', function () {
    var action = $(this).attr('data-action')
    var min = $(this).attr('data-min')
    var max = $(this).attr('data-max')
    var target = $(this).attr('data-target')
    var value = parseFloat($('[id="' + target + '"]').val());
    if (action == "plus") {
        if (value < max) {
            value++;
        } 
    }
    if (action == "minus") {
        if (value > min) {
            value--;
        } 
    }
    $('[id="' + target + '"]').val(value)
})

and html code for that

//Html Code
  <div class="input-group">
    <span class="input-group-btn"><button class="btn btn-default value-control" data-action="minus" data-min="0"  data-target="font-size"><span class="glyphicon glyphicon-minus"></span></button></span>
    <input type="text" value="1" class="form-control" id="font-size" />
    <span class="input-group-btn"><button class="btn btn-default value-control" data-action="plus" data-max="9" data-target="font-size"><span class="glyphicon glyphicon-plus"></span></button></span>
  </div>

Ref: http://bootsnipp.com/snippets/a288y

Upvotes: 0

S.Sreeram
S.Sreeram

Reputation: 225

Updated the fiddle. Putting below the required jQuery

$('.btn-minuse').on('click', function(){
        $(this).parent().siblings('input').val(parseInt($(this).parent().siblings('input').val()) - 1)
})

$('.btn-pluss').on('click', function(){
        $(this).parent().siblings('input').val(parseInt($(this).parent().siblings('input').val()) + 1)
})

Upvotes: 5

madalinivascu
madalinivascu

Reputation: 32354

here is the js:

$input = $('input[type="text"]');
//$input = $('.btn').parent().siblings('input');

$('.btn').on('click',function(){
     $val = $input.val();
    if ($(this).hasClass('btn-minuse')) {
     $input.val(parseInt($val)-1);
    } else
     //if ($(this).hasClass('btn-pluss'))
    {
    $input.val(parseInt($val)+1);
    }
});

jfidlle : http://jsfiddle.net/kv0wvgex/4/

Upvotes: 1

Related Questions