i have plus/minus button , users cannot select on 20 not know how working. tried using min="1" max="5 attributes did not work. here code , link fiddle. https://jsfiddle.net/6n9298gp/
<form id='myform' method='post' action='#' class="numbo"> <input type='button' value='-' class='qtyminus' field='quantity' style="font-weight: bold;" /> <input type='text' name='quantity' value='1' class='qty' style="margin-bottom: 0px !important" onkeypress='return event.charcode >= 48 && event.charcode <= 57'/> <input type='button' value='+' class='qtyplus' field='quantity' style="font-weight: bold;" /> </form> <script type="text/javascript"> jquery(document).ready(function(){ // button increment value $('.qtyplus').click(function(e){ // stop acting button e.preventdefault(); // field name fieldname = $(this).attr('field'); // current value var currentval = parseint($('input[name='+fieldname+']').val()); // if not undefined if (!isnan(currentval)) { // increment $('input[name='+fieldname+']').val(currentval + 1); $('.qtyminus').val("-").removeattr('style') } else { // otherwise put 0 there $('input[name='+fieldname+']').val(1); } }); // button decrement value till 0 $(".qtyminus").click(function(e) { // stop acting button e.preventdefault(); // field name fieldname = $(this).attr('field'); // current value var currentval = parseint($('input[name='+fieldname+']').val()); // if isn't undefined or greater 0 if (!isnan(currentval) && currentval > 1) { // decrement 1 $('input[name='+fieldname+']').val(currentval - 1); } else { // otherwise put 0 there $('input[name='+fieldname+']').val(1); $('.qtyminus').val("-").css('color','#aaa'); $('.qtyminus').val("-").css('cursor','not-allowed'); } }); }); </script>
i have updated jsfiddle here : https://jsfiddle.net/6n9298gp/5/
basically added block check current value lower 20 allow increment otherwise show "not allowed" icon :
if (currentval < 20) { $('input[name='+fieldname+']').val(currentval + 1); $('.qtyminus').val("-").removeattr('style'); } else { $('.qtyplus').val("+").css('color','#aaa'); $('.qtyplus').val("+").css('cursor','not-allowed'); } also added line remove cursor not allowed once decrement :
// decrement 1 if value > 1 $('input[name='+fieldname+']').val(currentval - 1); $('.qtyplus').val("+").removeattr('style'); 