Geek Answers Handbook

HTML How to create increment / decment text box on HTML page?

How can I create an increment / decment text box in an HTML page using jquery or Javascript .... The image are given below

and also I want to set the maximum and minimum values ​​....

How to achieve this?

+7
source share
8 answers

Look at here. I also used it.

numeric-up-down-input-jquery

+2
source

Plain:)

HTML:

<div id="incdec"> <input type="text" value="0" /> <img src="up_arrow.jpeg" id="up" /> <img src="down_arrow.jpeg" id="down" /> </div>

Javascript (jQuery):

 $(document).ready(function(){ $("#up").on('click',function(){ $("#incdec input").val(parseInt($("#incdec input").val())+1); }); $("#down").on('click',function(){ $("#incdec input").val(parseInt($("#incdec input").val())-1); }); });
+9
source

Have you tried input type="number" ?

+6
source

I think you can use jquery ui spinner. See the link here for a demonstration.

+1
source

Try using Spinner Control. hope this helps you.

http://www.devcurry.com/2011/09/html-5-number-spinner-control.html

+1
source 
 function incerment(selector, maxvalue){ var value = selector.val() != undefined ? parseInt(selector.val()) : 0; var max_value = maxvalue != undefined ? parseInt(maxvalue) : 100; if(value >= max_value){ return false; } else { selector.val(++value); } } function decrement(selector, minvalue){ var value = selector.val() != undefined ? parseInt(selector.val()) : 0; var min_value = minvalue != undefined ? parseInt(minvalue) : 1; if(value <= min_value){ return false; } else { selector.val(--value); } } //MAXIMUM/MINIMUM QUANTITY $('#up').click(function(){ incerment($("#incdec input")); return false; }); $('#down').click(function(){ decrement($("#incdec input")); return false; });
0
source

Arrow Keyboard Start and JavaScript Substitution (JQuery)

 $("#amount").on('keydown', function (event) { //up-arrow if (event.which == 38 || event.which == 104) { $(this).val((parseInt($(this).val()) + 1)); //down-arrow } else if (event.which == 40 || event.which == 98) { $(this).val((parseInt($(this).val()) - 1)); } });
0
source

JavaScript (jQuery) to increase and decrease for both (- and +) ##

 $(document).ready(function () { $('#cost').w2form ({ name : 'cost', style : '', fields : [ { name : 'amount', type : 'int' } ] }); $("#amount").keydown(function (e) { var key = e.keyCode; if (key == 40) { if ( $(this).val() != "") { $(this).val(); } else { $(this).val("0"); w2ui['cost'].record[$(this).attr('name')] = "0"; w2ui['cost'].refresh(); } } }); }

HTML

 <html> <form> <label>Amount</label> <input type="text" id="amount" name="amount" style= "width: 140px"/> </form> </html>
0
source

More articles:


All Articles