CODEWITHSUNDEEP
javascriptjquery
o-O
o-O

Reputation: 75

jQuery input number spinner

I have this code for jQuery spinner up-down number :

HTML: 

<div class="container">
  <div class="input-group spinner">
    <input type="text" class="form-control" value="42">
    <div class="input-group-btn-vertical">
      <div class="btn btn-default"><i class="fa fa-caret-up"></i></div>
      <div class="btn btn-default"><i class="fa fa-caret-down"></i></div>
    </div>
  </div>
</div>

JS: 

(function ($) {
  $('.spinner .btn:first-of-type').on('click', function() {
    $('.spinner input').val( parseInt($('.spinner input').val(), 10) + 1);
  });
  $('.spinner .btn:last-of-type').on('click', function() {
    $('.spinner input').val( parseInt($('.spinner input').val(), 10) - 1);
  });
})(jQuery);

This Worked But I need to add two option:

How do add this option?!

DEMO FIDDLE

Upvotes: 1

Views: 14527

Answers (5)

Antonio Delacruz
Antonio Delacruz

Reputation: 21

With this you can dynamically add as many spinners as you want that are cross browser compatible (even IE). Of course you have to have included the needed js and css files for jquery.

First you have to create your input. Keep note of the id as you will use that later. I always just put the same value for the id and name parameters in the input.

<input id="elementName" name="elementName">

Then put this in your head section.

    function createSpinner(elemName, elemVal, elemMin, elemMax, elemStep){
        var mySpinner = $( '#' + elemName ).spinner({
            min: elemMin,
            max: elemMax,
            step: elemStep,
            change: function( event, ui ) {
                var typedVal = $( '#' + elemName ).spinner( 'value' );
                if (typedVal < elemMin || typedVal > elemMax) { 
                    alert('Value must be between ' + elemMin + ' and ' + elemMax);
                    $('#' + elemName).spinner('value', elemVal);
                }
            }
        });    
        $('#' + elemName).spinner('value', elemVal);
    };

Then you just call the function, passing the needed parameters (the first parameter will be the value of the ID of your input).

createSpinner('elementName','0','0','10000','1');

Upvotes: 1

Jivanysh Sohoni
Jivanysh Sohoni

Reputation: 57

Assuming you have to send that data back to the server, setting the input readonly attribute and adding some limits to the input value its fairly easy. Here's the demo http://jsbin.com/yebawihune/7/

Upvotes: 1

Michael Smith
Michael Smith

Reputation: 665

To do this all with jQuery which i assume you want:

$(document).ready(function(){
    //Stop people from typing
    $('.spinner input').keydown(function(e){
        e.preventDefault();
        return false;
    });
    var minNumber = 1;
    var maxNumber = 10;
    $('.spinner .btn:first-of-type').on('click', function() {
        if($('.spinner input').val() == maxNumber){
            return false;
        }else{
            $('.spinner input').val( parseInt($('.spinner input').val(), 10) + 1);
        }
    });

    $('.spinner .btn:last-of-type').on('click', function() {
        if($('.spinner input').val() == minNumber){
            return false;
        }else{
            $('.spinner input').val( parseInt($('.spinner input').val(), 10) - 1);
        }
    });
});

I haven't check but should be pretty accurate

Working Fiddle: http://jsfiddle.net/7jtLa3py/3/

Upvotes: 3

ಠ_ಠ
ಠ_ಠ

Reputation: 1235

Better Ways :

bootstrap snipper worked easy:

HTML

<input type="text" class="aSpinEdit" />

Javascript

$('.aSpinEdit').spinedit({
    minimum: -10,
    maximum: 50,
    step: 1
});

Upvotes: 1

sebbzzz
sebbzzz

Reputation: 471

Change:

<input type="text" class="form-control" value="42">

To:

<input type="number" min="0" max="10" steps="1" class="form-control" value="5">

I didn't quite understand from your question if you wanted the user to be able to change the value or not, in the case that you don't want them to change the value, just add the readonly attribute to the input field, like this

<input type="number" min="0" max="10" steps="1" class="form-control" value="5" readonly>

Upvotes: 4

Related Questions