jquery input number

Question

Possible Duplicate:
Is it possible to customize an input field for amounts with +- buttons?

how to make + (plus) and - (minus) value buttons for

<input type="number" class="numbertype" value="10"> ?

I think it's possible to do with jQuery or maybe simple javascipt, but i don't know how..

I want do something like this :

Input tyoe number with + and -

when you push on + button, value will be bigger for 1 (0,12,3,4,5,6.... 10000)

when you push on - button, value will be smaller for 1 (10,9,8,7,6,5,4... 0)

hunter · Accepted Answer · 2012-02-02T13:51:43.757

7

$("#minus,#plus").click(function(){
    var value = parseInt($(".numbertype").val(), 10);
    $(".numbertype").val(value + $(this).is("#minus") ? -1 : 1);
});

I just wanted to see how to do it myself. Here's a toggle that will keep going on mouse down:

var i = null;
var d = 0;
var $numbertype = null;

function ToggleValue() {
    $numbertype.val(parseInt($numbertype.val(), 10) + d);
}

$(function() {
    $numbertype = $(".numbertype");

    $("#minus,#plus").mousedown(function() {
        d = $(this).is("#minus") ? -1 : 1;
        i = setInterval(ToggleValue, 100);
    });

    $("#minus,#plus").on("mouseup mouseout", function() {
        clearInterval(i);
    });
});

working example: http://jsfiddle.net/M4BAt/5/

edited Feb 02 '12 at 13:51

answered Feb 02 '12 at 13:18

hunter

62,308
19
113
113

don't forget to pass the radix! i fixed that for you hunter! – Daniel A. White Feb 02 '12 at 13:23
actually that is wrong. You'd have to use the operators "++" and "--" before the variable: `$("numbertype").val(++value)` – ub1k Feb 02 '12 at 13:29
yeah, caught that before you posted – hunter Feb 02 '12 at 13:30

score 1 · Answer 2 · answered Feb 02 '12 at 13:23

1

$('#plus_but').click(function(){

        var val = $('.numbertype').val();

        var new_val = parseInt($('.numbertype').val(),10) + 1 ;

       $('.numbertype').val(new_val); 

});


$('#minus_but').click(function(){

        var val = $('.numbertype').val();

        var new_val = parseInt($('.numbertype').val(),10) - 1 ;

       $('.numbertype').val(new_val); 

});

answered Feb 02 '12 at 13:23

Kanishka Panamaldeniya

17,302
31
123
193

@Daniel you're like the Johnny Appleseed of parseInt() radix parameters – hunter Feb 02 '12 at 13:29

jfriend00 · Answer 3 · 2012-02-02T14:08:53.140

1

If you substitute the images you want for the plus/minus buttons, this would work:

<span class="plusminusunit">
    <span class="minus">-</span> 
    <input type="number" class="numbertype" value="10">
    <span class="plus">+</span>
</span>

$(".plus").click(function() {
    var item = $(this).closest(".plusminusunit").find("input");
    item.val(Number(item.val()) + 1); 
});
$(".minus").click(function() {
    var item = $(this).closest(".plusminusunit").find("input");
    item.val(Number(item.val()) - 1); 
});

Working example: http://jsfiddle.net/jfriend00/FxEv3/

With images, the HTML would look like this (using your image URLs):

<span class="plusminusunit">
    <img class="minus" src="http://lt.tonybet.com/assets/shared/mikro_tv-50ee396d59d5c38f979ad3fd93578f4f.png"> 
    <input type="number" class="numbertype" value="10">
    <img class="plus" src="http://lt.tonybet.com/assets/shared/mikro_tv-50ee396d59d5c38f979ad3fd93578f4f.png">
</span>

edited Feb 02 '12 at 14:08

answered Feb 02 '12 at 13:24

jfriend00

683,504
96
985
979

1

i tryed this, but it's nor working.. – robpal Feb 02 '12 at 13:44
@RobertasPalinskis - What did you try because it works fine in the jsFiddle? – jfriend00 Feb 02 '12 at 13:52
look here http://pastebin.com/58T4Mw5b – robpal Feb 02 '12 at 14:00
Putting the image inside a span made the `.parent()` reference get the wrong parent. You can either change the HTML to not have the img inside the extra span or you can change to what I've edited my answer to now that puts a class on the container and uses `.closest()` instead of `.parent()` to get the top of the container regardless of whether there is an extra span or not. I've offered both choices in my edited answer. – jfriend00 Feb 02 '12 at 14:12
i don't know, why, but i jsfiddle it's working, but in my html not.. – robpal Feb 02 '12 at 14:19
@RobertasPalinskis - You will also need to move your jQuery code inside a `$(document).ready()` function because you are trying to set the event handlers before the DOM has been loaded. The jsFiddle does that for you automatically. – jfriend00 Feb 02 '12 at 14:28

score 0 · Answer 4 · answered Feb 02 '12 at 13:18

0

You can use the kendo.iu it has predefined control satisfying your wishes even more.It is very easy to implement and works great. I have already used it. No complains.

http://demos.kendoui.com/web/numerictextbox/index.html

answered Feb 02 '12 at 13:18

Hristo Petev

309
3
13

jquery input number

4 Answers4

Linked