Change just one input field with javascript

Question

I have code like this:

<script>
(function() {

  window.inputNumber = function(el) {
    var min = el.attr('min') || false;
    var max = el.attr('max') || false;

    var els = {};

    els.dec = el.prev();
    els.inc = el.next();

    el.each(function() {
      init($(this));
    });

    function init(el) {

      els.dec.on('click', decrement);
      els.inc.on('click', increment);

      function decrement() {
        var value = el[0].value;
        value--;
        (value<1) ? value=1 : '';
        if(!min || value >= min) {
          el[0].value = value;
        }
      }

      function increment() {
        var value = el[0].value;
        value++;
        if(!max || value <= max) {
          el[0].value = value++;
        }
      }
    }
  };
})();

inputNumber($('.input-number'));
</script>

but this will change every input field when I click on one decrement or increment... But I need to be separated and dynamic, here is html:

<div class="quantity">
    <span class="input-number-decrement" style="margin-right: 15px;"><i class="fa fa-angle-left"></i></span><input type="text" step="4" min="" max="" name="" value="0"  class="input-number" size="4" />
<span class="input-number-increment" style="margin-left: 10px;"><i class="fa fa-angle-right"></i></span>
</div>

I can have more then one input field, and all need to work separately... Any solution?

You can use name attribute of input HTML tag in your function to change value of a particular field — Hassan Naqvi
– Hassan Naqvi, Commented Mar 5, 2016 at 14:25

Andreas · Accepted Answer · 2016-03-05 14:25:55Z

The problem is here

els.dec = el.prev();
els.inc = el.next();

.prev() and .next() will get all the preceding and following elements of the matched elements in el.

Remove this step completely and use

function init(el) {
  el.prev().on('click', decrement);
  el.next().on('click', increment);
  // ...

instead.

(function() {
  window.inputNumber = function(el) {
    var min = el.attr('min') || false;
    var max = el.attr('max') || false;

    el.each(function() {
      init($(this));
    });

    function init(el) {
      el.prev().on('click', decrement);
      el.next().on('click', increment);

      function decrement() {
        var value = el[0].value;
        value--;
        (value < 1) ? value = 1: '';
        if (!min || value >= min) {
          el[0].value = value;
        }
      }

      function increment() {
        var value = el[0].value;
        value++;
        if (!max || value <= max) {
          el[0].value = value++;
        }
      }
    }
  };
})();

inputNumber($('.input-number'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="quantity">
  <span class="input-number-decrement" style="margin-right: 15px;"><i class="fa fa-angle-left">-</i></span>
  <input type="text" step="4" min="" max="" name="" value="0" class="input-number" size="4" />
  <span class="input-number-increment" style="margin-left: 10px;"><i class="fa fa-angle-right">+</i></span>
</div>
<div class="quantity">
  <span class="input-number-decrement" style="margin-right: 15px;"><i class="fa fa-angle-left">-</i></span>
  <input type="text" step="4" min="" max="" name="" value="0" class="input-number" size="4" />
  <span class="input-number-increment" style="margin-left: 10px;"><i class="fa fa-angle-right">+</i></span>
</div>
<div class="quantity">
  <span class="input-number-decrement" style="margin-right: 15px;"><i class="fa fa-angle-left">-</i></span>
  <input type="text" step="4" min="" max="" name="" value="0" class="input-number" size="4" />
  <span class="input-number-increment" style="margin-left: 10px;"><i class="fa fa-angle-right">+</i></span>
</div>

cl3m · Accepted Answer · 2016-03-05 14:27:33Z

1

You should initialize your code like that:

$('.input-number').each(function(){
    inputNumber($(this));
})

instead of:

inputNumber($('.input-number'));

See JS fiddle

answered Mar 5, 2016 at 14:27

cl3m

2,80121 silver badges21 bronze badges

Collectives™ on Stack Overflow

Change just one input field with javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related