10

How can i create a increment/decrement text box in HTML Page using jquery or Javascript.... The image are given below

and also i want to set maximum and minimum values....

How to i achieve this?

Manikandan Sethuraju
  • 2,873
  • 10
  • 29
  • 48
  • What do you mean by `increment/decrement text box or list box`? Do you want to increment value in that box or do you want to increase/decrease number of such boxes? And what do you mean by `list box`? Do you mean `select` element? – AdityaParab Aug 31 '12 at 05:49
  • Hi @Maverick.. It's not `select` control.. i need a html textbox with 2 arrow img buttons... when click *up arrow* want to increment the integer value & when click *down arrow* want to decrement that integer value.... – Manikandan Sethuraju Aug 31 '12 at 05:56
  • 1
    Oh! In that case `input type="number"` is what you are looking for. – AdityaParab Aug 31 '12 at 06:10
  • Yes... But i am not using HTML5.. so `input type="number"` is not there in html... – Manikandan Sethuraju Aug 31 '12 at 06:11
  • Check the answer I posted a few mins back – AdityaParab Aug 31 '12 at 06:19
  • answered here... [enter link description here](http://stackoverflow.com/a/43876534/525495) – EddieB May 09 '17 at 17:45

10 Answers10

12

Simple :)

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);
    });

});
AdityaParab
  • 7,024
  • 3
  • 27
  • 40
  • Hi @Maverick... Thanks for your answer... i need a textbox like above image (in my question).. dont want to use any buttons.... – Manikandan Sethuraju Aug 31 '12 at 06:57
  • Replace those buttons with images. – AdityaParab Aug 31 '12 at 07:06
  • As Maverick has pointed out, you can achieve what's required using his code in combination with images and imaginative CSS. Place your textbox, increment image and decrement image inside a div. Remove the border from the textbox and instead apply the border to the div in the fashion of your desired textbox look. This will create the illusion that the increment and decrement images are inside the textbox when in actuality, the textbox and images are inside a div that simply looks like a textbox. This is a literal case of thinking outside of the box :-) – Dominor Novus Apr 22 '13 at 03:01
  • 1
    @Maverick: Based on the above code, I'd like to know how to stop decrementing at 0. – Dominor Novus Apr 22 '13 at 03:03
  • 2
    @Maverick: I launched a separate question and arrived at an answer here: http://stackoverflow.com/questions/16139247/jquery-stop-decrementing-textbox-value-if-value-equals-0 – Dominor Novus Apr 22 '13 at 07:13
  • When clicking the decreasing button, it goes down two points every time. How to make it so it reduces only 1? Txs, @AdityaParab – Peanuts Jun 01 '20 at 03:18
9

did you try input type="number"?

Spudley
  • 166,037
  • 39
  • 233
  • 307
simoncereska
  • 3,035
  • 17
  • 24
4

Just try

<input type="number" name="points" step="1">

that's it. In the step, you can enter any value you want. And the arrows will move that many steps on clicking.

Shubhankar Kumar
  • 55
  • 4
2

Have a look here. I have also used it.

numeric-up-down-input-jquery

Pang
  • 9,564
  • 146
  • 81
  • 122
rahul
  • 7,573
  • 7
  • 39
  • 53
1

I think you can use jquery ui spinner . For a demo take a look at the link here

Prabhuram
  • 1,268
  • 9
  • 15
1

Try this Spinner Control. hope this will help you.

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

janitheshan
  • 325
  • 2
  • 11
  • 25
1

JavaScript (JQuery) of increment and decrement 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>
Diana
  • 21
  • 4
0
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;
    });
Manish
  • 43
  • 1
  • 6
0

Start of arrow keyup and keydown by JavaScript (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));
    }
});
Diana
  • 21
  • 4
0

JavaScript

function forKeyUp(value,e){
e = e || window.event;
 if (e.keyCode == '38' || e.keyCode == '104') {
if(parseInt(value)<1000){
value=(parseInt(value) + 1);
var id = $(e.target).attr('id');
$("#"+id).val(value);
}
}
else if (e.keyCode == '40' || e.keyCode == '98') {
if(parseInt(value)>0){
value=(parseInt(value) - 1);
var id = $(e.target).attr('id');
$("#"+id).val(value);
}
}}

//Call function

$("#amount")..on('keydown', function (event) {
forKeyUp($(this).val(),event);
});
Community
  • 1
  • 1
Diana
  • 21
  • 4