Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jquery input number [duplicate]

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)

like image 434
robpal Avatar asked Feb 02 '12 13:02

robpal


2 Answers

$("#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/

like image 150
hunter Avatar answered Nov 05 '22 04:11

hunter


$('#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); 

});
like image 1
Kanishka Panamaldeniya Avatar answered Nov 05 '22 06:11

Kanishka Panamaldeniya