Input with plus/minus buttons
Simple numeric input with +/- buttons.
Configurable min/max, increase/decrease value etc.
Based on http://jsfiddle.net/laelitenetwork/puJ6G/ , but simpler and more generic.
HTML
<form id='myform' method='POST' action='#'>
Example 1, range 2..10, step 1:
<br/>
<input type='text' id='targetField1' name='targetField1' value='5' minValue='2' maxValue='10' class='qty' />
<input type='button' value='-' class='qtyChange' inc='-1' field='targetField1' />
<input type='button' value='+' class='qtyChange' inc='+1' field='targetField1' />
<br/> Example 2, No minimum (will assume 0), max 100, step 10
<br/>
<input type='text' id='targetField3' name='targetField2' value='50' maxValue='100' class='qty' />
<input type='button' value='-' class='qtyChange' inc='-10' field='targetField2' />
<input type='button' value='+' class='qtyChange' inc='+10' field='targetField2' />
<br/> Example 3, No minimum (will assume 0), No maximum, step 25
<br/>
<input type='text' id='targetField2' name='targetField3' value='200' class='qty' />
<input type='button' value='-' class='qtyChange' inc='-25' field='targetField3' />
<input type='button' value='+' class='qtyChange' inc='+25' field='targetField3' />
<br/>
</form>
CSS
#myform {
margin: 10px;
}
.qty {
width: 30px;
height: 25px;
text-align: center;
border-radius: 6px;
}
input.qtyChange {
width: 25px;
height: 25px;
}
JavaScript
// Based partially on http://jsfiddle.net/laelitenetwork/puJ6G/
jQuery(document).ready(function() {
$(".qtyChange").click(function(e) {
// Stop acting like a button
e.preventDefault();
// Get the field name
var fieldName = $(this).attr('field');
var inc = parseInt($(this).attr('inc'));
// Get its current value, min and max
var target = $('input[name=' + fieldName + ']');
var val = parseInt(target.val());
var min = parseInt(target.attr('minValue')) || 0;
var max = parseInt(target.attr('maxValue'));
val = val + inc;
if (val > max) val = max;
if (val < min) val = min;
target.val(val);
var valuke = $("#targetField3").val();
alert(valuke);
var valuke2 = $("#targetField1").val();
alert(valuke2);
});
});