.next() (Jquery) wont target nor focus next item in group

May 7, 2023

I am trying to develop a number field range specified for 14 digits. I am stumbling on the jumping to the next input field (like a pin number system)

<div class="input-group single-digits GTIN">
    <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
    <span class="input-group-glue"></span>
    <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
    <span class="input-group-glue"></span>
    <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
    <span class="input-group-glue"></span>
    <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
    <span class="input-group-glue"></span>
    <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
    <span class="input-group-glue"></span>
    <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
    <span class="input-group-glue"></span>
    <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
    <span class="input-group-glue"></span>
    <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
    <span class="input-group-glue"></span>
    <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
    <span class="input-group-glue"></span>
    <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
    <span class="input-group-glue"></span>
    <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
    <span class="input-group-glue"></span>
    <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
    <span class="input-group-glue"></span>
    <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
    <span class="input-group-glue"></span>
    <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
    <span class="input-group-glue"></span>
    <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
    <span class="input-group-glue"></span>
    <div class="input-group-btn">
        <button type="button" id="generate-ean-from-list" class="btn btn-default" data-action="assign-result-ean">
            <span class="fa fa-dice font-size-16" aria-hidden="true"></span>
        </button>
        <button rel="tooltip" class="btn btn-default" data-toggle="tooltip" data-trigger="hover" data-placement="left" title="Global Trade Item Number, an unique 14 digit number, that can be applied to all products. More info at GS1">
            <span class="fa fa-question-circle font-size-16" aria-hidden="true"></span>
        </button>
        <button type="button" class="btn btn-default lock-field" data-action="lock-field" data-fieldname="GTIN" data-status="unlocked">
            <span class="fa fa-unlock font-size-16" aria-hidden="true"></span>
        </button>
    </div>
</div>

and it’s javascript is as following (running on jquery)

$('body').on('input', '.single-digit', function(){
    if($(this).val().length==$(this).attr("maxlength")){
        $(this).next('.single-digit').focus();
    }
});

but for some reason i cant figure out, I cant get it to work, I know it gets into the if statement, but yet doesn’t seem to process on finding the next .single-digit class and make it jump to it. Does this have to do with the spans in the group? I figured I could, since it’s all siblings of each other jump to the next .single-digit class.

A JSfiddle to here to see the problem. https://jsfiddle.net/Ltdqgp40/1/

>Solution :

The problem is that next(selector) works differently than you expected, but is working as designed.

next('.single-digit')

will select the next element if it matches the supplied selector, which – as the <span> is the next element – it obviously can’t.

Instead, you could use:

// this is mostly as you wrote it originally, binding
// the anonymous function of the on() method as the
// event-handler for the 'input' event when triggered
// on a .single-digit element:
$('body').on('input', '.single-digit', function(){

    // here we check the value entered into the
    // specific element that triggered the event-
    // handler, comparing it against the 'maxlength'
    // attribute-value:
    if($(this).val().length==$(this).attr("maxlength")){
      // here we navigate from the 'this' node:
      $(this)
        // select all subsequent siblings that
        // match the supplied selector:
        .nextAll('.single-digit')
        // retrieve the first matching element from
        // that collection:
        .first()
        // and focus that element:
        .focus();
    }
});

As below:

$('body').on('input', '.single-digit', function() {
  if ($(this).val().length == $(this).attr("maxlength")) {
    $(this).nextAll('.single-digit').first().focus();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-group single-digits GTIN">
  <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
  <span class="input-group-glue"></span>
  <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
  <span class="input-group-glue"></span>
  <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
  <span class="input-group-glue"></span>
  <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
  <span class="input-group-glue"></span>
  <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
  <span class="input-group-glue"></span>
  <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
  <span class="input-group-glue"></span>
  <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
  <span class="input-group-glue"></span>
  <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
  <span class="input-group-glue"></span>
  <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
  <span class="input-group-glue"></span>
  <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
  <span class="input-group-glue"></span>
  <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
  <span class="input-group-glue"></span>
  <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
  <span class="input-group-glue"></span>
  <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
  <span class="input-group-glue"></span>
  <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
  <span class="input-group-glue"></span>
  <input name="GTIN[]" maxlength="1" class="form-control no-spin input-sm single-digit" />
  <span class="input-group-glue"></span>
  <div class="input-group-btn">
    <button type="button" id="generate-ean-from-list" class="btn btn-default" data-action="assign-result-ean">
            <span class="fa fa-dice font-size-16" aria-hidden="true"></span>
        </button>
    <button rel="tooltip" class="btn btn-default" data-toggle="tooltip" data-trigger="hover" data-placement="left" title="Global Trade Item Number, an unique 14 digit number, that can be applied to all products. More info at GS1">
            <span class="fa fa-question-circle font-size-16" aria-hidden="true"></span>
        </button>
    <button type="button" class="btn btn-default lock-field" data-action="lock-field" data-fieldname="GTIN" data-status="unlocked">
            <span class="fa fa-unlock font-size-16" aria-hidden="true"></span>
        </button>
  </div>
</div>

JS Fiddle demo.

References: