Skip to content

Instantly share code, notes, and snippets.

@shakyShane

shakyShane/html5-number-polyfill.html

Created November 7, 2012 19:23
Show Gist options
  • Save shakyShane/4033782 to your computer and use it in GitHub Desktop.
Save shakyShane/4033782 to your computer and use it in GitHub Desktop.
Download ZIP
Increment/Decrement an 'amount' input.
Raw
html5-number-polyfill.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
</head>
<body>
<h1>Increment / Decrement an 'amount' input.</h1>
<input type="number" id="amount-1" value="1" min="1" max="300">
<div class="cart-plus-minus" data-target="amount-1">
<button class="btn cart-minus-1">-</button>
<button class="btn cart-plus-1">+</button>
</div>
<pre>
(function($){
var cartButtons = $('.cart-plus-minus').find('button');
$(cartButtons).on('click', function(e){
e.preventDefault();
var $this = $(this);
var target = $this.parent().data('target');
var target = $('#'+target);
var current = parseFloat($(target).val());
if ($this.hasClass('cart-plus-1'))
target.val(current + 1 );
else {
(current < 2 ) ? null : target.val(current - 1);
}
});
}(jQuery));
</pre>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>
(function($){
var cartButtons = $('.cart-plus-minus').find('button');
$(cartButtons).on('click', function(e){
e.preventDefault();
var $this = $(this);
var target = $this.parent().data('target');
var target = $('#'+target);
var current = parseFloat($(target).val());
if ($this.hasClass('cart-plus-1'))
target.val(current + 1 );
else {
(current < 2 ) ? null : target.val(current - 1);
}
});
}(jQuery));
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment