Number Incrementers

by danielzen

HTML

<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>

CSS

*                                    { margin: 0; padding: 0; }
body                                { font: 14px Helvetica, sans-serif; }
a                                   { text-decoration: none; border-bottom: 1px dotted #9bf9ff; }
a:hover                             { border-bottom-style: solid; }
#page-wrap                            { width: 500px; margin: 25px auto; }
h1                                  { font: 26px Georgia, Serif; margin: 0 0 10px 0; }
form                                { margin: 50px 0 0 0; }
label                               { font: bold 20px Helvetica, sans-serif; display: block; float: left; text-align: right; padding: 5px 10px 0 0; width: 140px; }
input[type=text]                    { float: left; width: 40px; font: bold 20px Helvetica, sans-serif; padding: 3px 0 0 0; text-align: center; }
form div                            { overflow: hidden; margin: 0 0 5px 0; }
.button                             { margin: 0 0 0 5px; cursor: pointer; width: 29px; height: 29px; float: left; text-align: center; background: url(../images/buttons.png) no-repeat; }
.inc   { background-position: 0 ; }

.dec                                { background-position: 0 -29px; }
#submit                             { margin: 15px 0 0 175px; font: 20px Helvetica, sans-serif; padding: 5px 10px 3px 10px; border: 1px solid black; background: #eee; }
#submit:hover                       { background: #ccc; }

JavaScript

$(function() {

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

});
$(".button").click(function() {
    var $button = $(this);
    var oldValue = $button.parent().find("input").val();

    if ($button.text() == "+") {
      var newVal = parseFloat(oldValue) + 1;
      // AJAX save would go here
    } else {
      // Don't allow decrementing below zero
      if (oldValue >= 1) {
          var newVal = parseFloat(oldValue) - 1;
          // AJAX save would go here
      }
    }
    $button.parent().find("input").val(newVal);
});