JQuery Plus / Minus Incrementer

Question

I want to have a Plus / Minus system on the client side where the user can click on plus, and the value increases by 1, minus, and the value decreases by 1, the value should never drop to zero and should start at 0 Is there a way to do this simply in jquery? All jquery plugins look at the OTT bit for this operation.

Any help is appreciated, ta.

Answer 1

something like that:

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 2

 var currentValue = 0; $(document).ready(function() { $('#up').click(function() { currentValue++; }); $('#down').click(function() { if (currentValue > 0) { currentValue--; } }); }); 

Putting currentValue into a text box or other element will be trivial.

Answer 3

Of course you can, for example:

 <span id="minus"> - </span> <span id="value"> 0 </span> <span id="plus"> + </span> <script type="text/javascript"> $(function() { var value = parseInt($('#value').text(value)); $('#minus').click(function() { if (value == 0) return; value--; $('#value').text(value); } $('#plus').click(function() { value++; $('#value').text(value); } }); </script> 

Answer 4

It is actually built into jQuery - http://jqueryui.com/spinner/

Answer 5

 <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 6

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 html part

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

Answer 7

A very easy 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)'> 

Answer 8

Here is my rather complicated version, you just 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 used bootstrap icons for buttons, but you can also make hardcode - and + like that! ;-) Hope this helps others!

Answer 9

If someone wants to have more than 1 magnifying input field on the page. Checks to see if .plus or .minus is clicked, and then change the value of the input word for sibling so that you can have as many fields as you want.

 <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.js"></script> <div> <a class="minus increment" href="#">-</a> <input type="text" id="adults" size="10" value="0"> <a class="plus increment" href="#">+</a> </div> <div> <a class="minus increment" href="#">-</a> <input type="text" id="children" size="10" value="0"> <a class="plus increment" href="#">+</a> </div> <script type="text/javascript"> $(function(){ $('.increment').click(function() { var valueElement = $('#'+$(this).siblings('input').attr('id')); if($(this).hasClass('plus')) { valueElement.val(Math.max(parseInt(valueElement.val()) + 1)); } else if (valueElement.val() > 0) // Stops the value going into negatives { valueElement.val(Math.max(parseInt(valueElement.val()) - 1)); } return false; }); }); </script>