Jquery Plus/Minus Incrementer

Question

I want to have a client side Plus / Minus system where a user can click the plus and a value is incremented by 1, minus and the value is decreased by 1, the value should nev

Answer 1

<span id="value">5</span>
<input type="button" id="plus" value="+" />
<input type="button" id="minus" value="-" />

$('#plus').click(function() { changeValue(1); });
$('#minus').click(function() { changeValue(-1); });

function changeValue(val) {
    var container = $('#value');
    var current = parseInt(container.html(), 10);

    container.html(Math.max(0, current + val).toString());
}

Answer 2

Here is my quite more complex version, you juste need to give the class "mkdminusplus" to your div: <div class="mkdminusplus" defaultval="50"></div> and then add

<script>
jQuery(function(){

  jQuery('.mkdminusplus').append('<span class="mkdminus"><i class="icon-minus-sign"></i></span><input class="mkdvalue" type="number" value=""><span class="mkdplus"><i class="icon-plus-sign"></i></span>');

  jQuery('.mkdminusplus').each(function(){
    if (jQuery(this).attr('defaultval') == undefined) jQuery(this).attr('defaultval','0');
    jQuery(this).find('.mkdvalue').val(jQuery(this).attr('defaultval'));
  });
  jQuery('.mkdminus').bind('click',  function() {
        valueElement=jQuery(this).parent().find('.mkdvalue');
        defaultval=(jQuery(this).parent().attr('defaultval') !== 'undefined' && jQuery(this).parent().attr('defaultval') !== 'false' )?jQuery(this).parent().attr('defaultval'):jQuery(this).parent().attr('defaultval','0');
        console.log(jQuery.isNumeric(parseInt(valueElement.val())))
        if (!jQuery.isNumeric(parseInt(valueElement.val()))) valueElement.val(defaultval);
        var increment=-1;
        valueElement.val(Math.max(parseInt(valueElement.val()) + increment, 0));
  });


   jQuery('.mkdplus').bind('click',  function() {
        valueElement=jQuery(this).parent().find('.mkdvalue');
        defaultval=(jQuery(this).parent().attr('defaultval') !== undefined && jQuery(this).parent().attr('defaultval') !== 'false' )?parseInt(jQuery(this).parent().attr('defaultval')):parseInt(jQuery(this).parent().attr('defaultval','0'));
        console.log(jQuery.isNumeric(parseInt(valueElement.val())))
        if (!jQuery.isNumeric(parseInt(valueElement.val()))) valueElement.val(defaultval);
        var increment=1;
        valueElement.val(Math.max(parseInt(valueElement.val()) + increment, 0));
  });

  jQuery('.mkdvalue').on('keyup', function () {
        jQuery(this).val(jQuery(this).val().replace(/[^0-9]/gi, ''));
  });

});

</script>

I've used bootstrap icons for the buttons but you can also hardcode - and + as it! ;-) Hope it will help others!

Answer 3

this is easy and dynamic way to incrment and decrement value

this is the html part

  <div class="input-group">
  <div class="input-group-prepend">
  <span class="input-group-text" onclick="decrement(this);"><i class="la la-minus- 
   circle"></i></span></div>
   <input type="text" class="form-control adults" value="0">
   <div class="input-group-append">
   <span class="input-group-text" onclick="increment(this);"><i class="la la-plus- 
   circle"></i></span></div></div>

this is the jquery part.

    function increment(obj)
    {
    var count = parseInt($(obj).parent().parent().find('input').val());
    $(obj).parent().parent().find('input').val(count+1);
   }

   function decrement(obj)
   {
    var count = parseInt($(obj).parent().parent().find('input').val());
    if(count != 0)
    {
       $(obj).parent().parent().find('input').val(count - 1);  
    }

}

Answer 4

The jquery part

// initialize counter
var counter = 0;

// set the + functionality
$('#plus').click( function(){$('#display').html( ++counter )} );
// set the - functionality
$('#minus').click( function(){$('#display').html( (counter-1<0)?counter:--counter )} );
// initialize display
$('#display').html( counter );

and the html part

<span id="plus">+</span>
<span id="minus">-</span>
<div id="display"></div>

Answer 5

something like this:

HTML:

<a id="minus" href="#">-</a>
<span id="value">0</span>
<a id="plus" href="#">+</a>

Javascript:

$(function(){

    var valueElement = $('#value');
    function incrementValue(e){
        valueElement.text(Math.max(parseInt(valueElement.text()) + e.data.increment, 0));
        return false;
    }

    $('#plus').bind('click', {increment: 1}, incrementValue);

    $('#minus').bind('click', {increment: -1}, incrementValue);

});

Answer 6

A very simple way to do this without JQuery...

<script language=javascript>
function process(v){
    var value = parseInt(document.getElementById('v').value);
    value+=v;
    document.getElementById('v').value = value;
}
</script>

<input type=button value='-' onclick='javascript:process(-1)'>
<input type=test size=10 id='v' name='v' value='0'>
<input type=button value='+' onclick='javascript:process(1)'>