Add (+/-) Button Number Incrementers

Avatar of Chris Coyier
Chris Coyier on (Updated on )

Text inputs on forms can be used to submit numbers. A common use would be a “quantity” input on an eCommerce site. Changing the quantity value, from the user’s perspective entails tabbing or clicking to the input, deleting it’s current content, and typing in a new value. Expected behavior that nobody is going to yell at you for, but these number inputs could be a little friendlier. Through use of JavaScript (yes, jQuery), let’s do just that.

Clean HTML

Here the form markup. Nothing extra added, just clean HTML. Without JavaScript, this form will function perfectly well and not have anything extraneous.

<form method="post" action="">
    <div>
        <label for="name">French Hens</label>
        <input type="text" name="french-hens" id="french-hens" value="3">
    </div>
    <div>
        <label for="name">Turtle Doves</label>
        <input type="text" name="turtle-doves" id="turtle-doves" value="2">
    </div>
    <div>
        <label for="name">Partridges</label>
        <input type="text" name="partridge" id="partridge" value="1">
    </div>
    
    <input type="submit" value="Submit" id="submit">
</form>

The CSS…

isn’t very interesting. Maybe a few things to note. Everything is floated left and the DIV’s have overflow hidden to clear the floats. The labels are display block and text-align right to get the grid thing going. Pixel adjustments are made here and there to get things lining up right. I didn’t spend much time on this, so you may see some cross-browser differences.

Make Some Buttons

Photoshop up a couple of buttons. Might as well use a sprite eh? I’ll include the PSD in the download just in case you want to use these.

Appending Increment Buttons

We need to append these buttons to each input. You’ll notice in the markup that each label/input pair is wrapped in a DIV. This is good practice so that label inputs get broken onto their own line (better readability) for when CSS is turned off. It’s also required for validation with some DOCTYPES. AND, it’s the perfect little hook we can target for appending these buttons.

$(function() {

    $("form div").append('<div class="inc button">+</div><div class="dec button">-</div>');

});

Two classes each, one generic “button” class which will be 90% of the styling and the class we’ll use to bind the click event. The other unique class to adjust the background position and utilize the sprite.

Make Them Work

The “plain English”:

  1. Cache the selector
  2. Save the “old” value of the input (value at time of clicking)
  3. If the “plus” button is clicked…
  4. …increment value up one
  5. Else if the “minus” button is clicked…
  6. …decrement the value down one
  7. Drop the new value into the input
$(".button").on("click", function() {

  var $button = $(this);
  var oldValue = $button.parent().find("input").val();

  if ($button.text() == "+") {
	  var newVal = parseFloat(oldValue) + 1;
	} else {
   // Don't allow decrementing below zero
    if (oldValue > 0) {
      var newVal = parseFloat(oldValue) - 1;
    } else {
      newVal = 0;
    }
  }

  $button.parent().find("input").val(newVal);

});

The above code does everything we described, with a little extra logic. Before it decrements the value, it makes sure the number is at least a value of 1 or higher. This prevents the value from ever going negative (at least through using these buttons). This is a no-brainer for “quanity” style inputs, but if your use doesn’t need this just remove that “if” wrapper.

There are also a couple of commented lines about AJAX saving. If your application is all dynamic-cool-like that, you might wish to save the value automatically after a button is pressed, making it feel a little more desktop-application-y.

If you were to do that, you could put some code like this (perhaps):

var id = $button.attr("id");
$.ajax({
  type: "POST",
  url: "dosomething.php?id=" + id + "&newvalue=" + newVal,
  success: function() {
    $button.parent().find("input").val(newVal);
  }
});

You’d probably remove the bottom line of the click function where it updates the value and leave that in the “success” sub function above. That way the number doesn’t get visually updated unless the AJAX save was successful.

Check it

View DemoDownload Files

MooTools

And as always, David Walsh with a port to MooTools.