Multiple plus and minus buttons

buttons minus and plus in input bootstrap 4
react plus minus button
increment/decrement value on button click
jquery onclick increment value and decrement
jquery increment value on click
quantity increment decrement in javascript
cart plus minus
customize appearance of up/down arrows in html number inputs

I am using - and + buttons to change the number of the text box, I am having troubles dealing with different text fields, here is my code:

var unit = 0;
var total;
// if user changes value in field
$('.field').change(function() {
  unit = this.value;
});
$('.add').click(function() {
  unit++;
  var $input = $(this).prevUntil('.sub');
  $input.val(unit);
  unit = unit;
});
$('.sub').click(function() {
  if (unit > 0) {
    unit--;
    var $input = $(this).nextUntil('.add');
    $input.val(unit);
  }
});
button {
  margin: 4px;
  cursor: pointer;
}
input {
  text-align: center;
  width: 40px;
  margin: 4px;
  color: salmon;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id=field1>
  field 1
  <button type="button" id="sub" class=sub>-</button>
  <input type="text" id="1" value=0 class=field>
  <button type="button" id="add" class=add>+</button>
</div>
<div id=field2>
  field 2
  <button type="button" id="sub2" class=sub>-</button>
  <input type="text" id="2" value=0 class=field>
  <button type="button" id="add2" class=add>+</button>
</div>

This should be all you need:

$('.add').click(function () {
    $(this).prev().val(+$(this).prev().val() + 1);
});
$('.sub').click(function () {
    if ($(this).next().val() > 0) $(this).next().val(+$(this).next().val() - 1);
});

By using the unit variable you were tying both inputs together. And the plus in +$(this) is a shorthand way to take the string value from the input and convert it to a number.

jsFiddle example

Multiple plus/minus input fields, <input type="button" value="-" class="qty-minus">. 3. <input type="number" value​="1" class="qty">. 4. <input type="button" value="+" class="qty-plus">. 5. </div>. Hi there, I'm looking to use plus (+) and minus (-) buttons to update the cart quantity rather than the standard number text input with an update button. Any tips on how to do this will be massively appreciated.

You're using the same variable to hold the values of your two inputs. One simple option would be to use two variables instead of one:

var unit_1 = 0;
$('#add1').click(function() {
   unit_1++;
   var $input = $(this).prev();
   $input.val(unit_1);
});
/* Same idea for sub1 */

var unit_2 = 0;
$('#add2').click(function() {
   unit_2++;
   var $input = $(this).prev();
   $input.val(unit_2);
});
/* Same idea for sub2 */

and unit = unit just assigns the value of unit to itself, so that's no very useful and you can certainly leave it out.

Plus Minus Buttons, HTML. Copy. <!-- Change the `data-field` of buttons and `name` of input field's for multiple plus minus buttons--> <div class="input-group plus-minus-input"> <div  Plus/Minus buttons? Thread starter ryleepowell; Start date Mar 14, 2017; R. ryleepowell New Member. Joined Nov 8, 2016 Messages 2. Mar 14, 2017 #1 Hello,

An alternative approach is to use data attributes and have each element store its own value. Edit: it already stores its own value. Just access it.

var total;
// if user changes value in field
$('.field').change(function() {
  // maybe update the total here?
}).trigger('change');

$('.add').click(function() {
  var target = $('.field', this.parentNode)[0];
  target.value = +target.value + 1;
});

$('.sub').click(function() {
  var target = $('.field', this.parentNode)[0];
  if (target.value > 0) {
    target.value = +target.value - 1;
  }
});
button {
  margin: 4px;
  cursor: pointer;
}
input {
  text-align: center;
  width: 40px;
  margin: 4px;
  color: salmon;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id=field1>
  field 1
  <button type="button" id="sub" class=sub>-</button>
  <input type="text" id="1" value=0 class=field>
  <button type="button" id="add" class=add>+</button>
</div>
<div id=field2>
  field 2
  <button type="button" id="sub2" class=sub>-</button>
  <input type="text" id="2" value=0 class=field>
  <button type="button" id="add2" class=add>+</button>
</div>

Add (+/-) Button Number Incrementers, Cache the selector; Save the “old” value of the input (value at time of clicking); If the “plus” button is clicked… …increment value up one; Else if the “minus” button​  There are two keyboard shortcuts – that should be noted –. To add grouping you select the range and. press Shift + Alt + right arrow. To remove grouping select the range and. press Shift + Alt + left arrow. Video attached here as below on youtube – How to hide columns or rows with plus and minus button in Excel.

Bootstrap Snippet Buttons minus and plus in input using HTML CSS , Bootstrap example of Buttons minus and plus in input using HTML, Javascript, jQuery, and CSS. Snippet by davidsantanacosta. Have you ever seen the plus / minus button that hides or displays rows or columns? Table with hide/unhide button can look like this: Select all columns you want to group and go to the menu Data >> Group. That’s all J The hide button will be displayed next to the last column above. It’s the same as columns.

How to use plus (+) and minus (-) buttons to updat, Hi there, I'm looking to use plus (+) and minus (-) buttons to update the cart quantity rather than the standard number text input with an update  1. Select the entire rows or columns you need to hide or unhide with plus or minus sign, then click Group in the Outline group under Data tab. See screenshot: 2. Then the minus sign is displayed on the left of selected rows, or displayed at the top of the selected columns. Click the minus sign, the selected rows or column are hidden immediately.

Shopping cart, minus and plus buttons, and the event.preventDefault , In online shopping carts, minus (-) and plus (+) buttons are an additional However, it ended up being reproducible on multiple devices and  A good walk-through, thanks. I’d rather not see this too often, though, like kongondo says, typing in a number is my preference too. Maybe useful for mobile apps, though, and for cases where typing in the number isn’t the point as much as “more” and “less” on a scale, but then why not just click along the range ( ie with star ratings ).

Comments
  • What's this in var id = $(this).attr('id'); supposed to refer to? Where is id being used?
  • Oh, I didn't use that, and i forgot to erase it, thank you
  • I tried your method for adding and subtracting 0.1 I found out that after some operations the value had the decimal digits like 1.000000000001 and so on. What I can do?
  • @Daniele Post a new question with your details and a minimal reproducible example