jQuery - on key up go to next input field

Question

I'm currently busy with 13 input fields that's results get merged into a variable, I have to split it into 13 for I need to add a block effect such as you will find on many forms in the real world. the limit to each block is one, I need to find away so that when you insert a digit, it goes to the next field until all fields have been filled then a validation function will fire off.

Heres the html:

<div id="error"></div>

<form id="idCheck">
<input class="id" id="idnumber1" maxlength="1" />
<input class="id" id="idnumber2" maxlength="1"  />
<input class="id" id="idnumber3" maxlength="1"  />
<input class="id" id="idnumber4" maxlength="1"  />
<input class="id" id="idnumber5" maxlength="1"  />
<input class="id" id="idnumber6" maxlength="1"  />
<input class="id" id="idnumber7" maxlength="1"  />
<input class="id" id="idnumber8" maxlength="1"  />
<input class="id" id="idnumber9" maxlength="1"  />
<input class="id" id="idnumber10" maxlength="1"  />
<input class="id" id="idnumber11" maxlength="1"  />
<input class="id" id="idnumber12"  maxlength="1" />
<input class="id" id="idnumber13" maxlength="1"  /><span id="status"></span>
<p> <input type="submit" id="check" value="Check" /> </p>
 </form>

<div id="result"> </div>

and heres the javascript:

function Validate() {
   jQuery('#error p').remove();
   var error = jQuery('#error');
  var p1 = jQuery('#idnumber1').val();
  var p2 = jQuery('#idnumber2').val();
  var p3 = jQuery('#idnumber3').val();
  var p4 = jQuery('#idnumber4').val();
  var p5 = jQuery('#idnumber5').val();
  var p6 = jQuery('#idnumber6').val();
  var p7 = jQuery('#idnumber7').val();
  var p8 = jQuery('#idnumber8').val();
  var p9 = jQuery('#idnumber9').val();
  var p10 = jQuery('#idnumber10').val();
  var p11 = jQuery('#idnumber11').val();
  var p12 = jQuery('#idnumber12').val();
  var p13 = jQuery('#idnumber13').val();


  var idNumber = p1 + p2 + p3 + p4 + p5 + p6 +p7 + p8 + p9 + p10 + p11 + p12 + p13;
  };

any help greatly appreciated.

score 5 · Accepted Answer · answered Dec 05 '12 at 08:55

You can use keyup and next methods:

$('input.id').on('keyup', function(){
    if (this.value.match(/\d+/)) {
        var $this = $(this);
        if ($this.next('input').length) {
          $this.next().focus();
        } else {
          Validate()
        }  
    }
})

function Validate() {
   jQuery('#error p').remove();
   var error = jQuery('#error');
   var idNumber = $('input.id').map(function(){
                      return this.value
                  }).get().join(''); 
}

http://jsfiddle.net/7838f/

perfect, is it pushing it to request a way to let it backspace to the fields as well? — , Dec 05 '12 at 09:00

score 1 · Answer 2 · edited May 23 '17 at 12:30

1

you could try this:

$('#myInput').focus(function(){
    $(this).next('input').focus();
})

or

$("input").change(function() {
  var inputs = $(this).closest('form').find(':input');
  inputs.eq( inputs.index(this)+ 1 ).focus();
});

both is taken from here.

edited May 23 '17 at 12:30

Community

1
1

answered Dec 05 '12 at 08:54

interested

324
1
9

score 1 · Answer 3 · edited Dec 05 '12 at 09:12

1

try with below method

jQuery('.id').bind({keyup:function(){$(this).next().focus()}});

Update: jsFiddle Example

edited Dec 05 '12 at 09:12

Chandra Sekhar

16,256
10
67
90

answered Dec 05 '12 at 09:04

Wang Wei Qiang

66
2

jQuery - on key up go to next input field

3 Answers3