1
\$\begingroup\$

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

\$\endgroup\$
1
\$\begingroup\$

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 (++).

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.