Select the correct input when using input group after pressing a button

Question

Introduction: I'm creating a form using bootstrap and I have different input groups with the same structure and functionality.

All of them have a '-' button on the left and a '+' button on the right of the input field and, when one of them is pressed, the input value has to change.

Problem: As the buttons are inside a div with class="input-group-btn" and they are not siblings of the input field, I don't know which is the best way to select it.

I have managed to make it work but I'm not sure if it's the best way to do it.

JavaScript and HTML

$(".increase").click(function() { var amount = parseInt($(this).parents('.input-group').children('input').val()); if (amount < 20) { $(this).parents('.input-group').children('input').val(amount + 1); } }); $(".decrease").click(function() { var amount = parseInt($(this).parents('.input-group').children('input').val()); if (amount > 0) { $(this).parents('.input-group').children('input').val(amount - 1); } });

<form class="form-inline"> <div class="form-group"> <div class="input-group"> <div class="input-group-btn"> <button type="button" class="btn btn-default decrease"><span class="glyphicon glyphicon-minus"></span> </button> </div> <input type="text" class="form-control" id="capacity" value="0" disabled=""> <div class="input-group-btn"> <button type="button" class="btn btn-default increase"><span class="glyphicon glyphicon-plus"></span> </button> </div> </div> </div> <div class="form-group"> <div class="input-group"> <div class="input-group-btn"> <button type="button" class="btn btn-default decrease"><span class="glyphicon glyphicon-minus"></span> </button> </div> <input type="text" class="form-control" id="rooms" value="0" disabled=""> <div class="input-group-btn"> <button type="button" class="btn btn-default increase"><span class="glyphicon glyphicon-plus"></span> </button> </div> </div> </div> </form>

Bootply: http://www.bootply.com/EA5a48SCdg

Answer 1

If the input group perhaps contains additional input elements this won't work. I think that you should bind the button to the input field by declaring a new attribute to the button which is connected to the input's id. Like so:

<button type="button" class="btn btn-default increase" data-bind="rooms"><span class="glyphicon glyphicon-plus"></span></button> 

It now contains the input ID which this button is connected to. Now in your JavaScript try something like this:

$(".increase").click(function() { var input = $('#' + $(this).data('bind')); input.val(input.val++); }); 

It will use the data-bind attribute to connect to the specific input element and increase this value by 1 (++).