CODEWITHSUNDEEP
javascriptjquerykeyup
Muhammad Rizwan
Muhammad Rizwan

Reputation: 13

Auto move to next tab when an input fills with 1 integer

How to move to next input field when filled up with 1 integer. When I enter an integer in input field, it doesn't move to next input field

jq = $

jq(".pc").keyup(function() {
  var nextItem = parseInt(this.id) + 1;
  console.log(nextItem);
  jq(this).next('.pc').focus();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-2">
  <input class="form-control pc" id="1" type="text" name="pc1" />
</div>
<div class="col-md-2">
  <input class="form-control pc" id="2" type="text" name="pc2" />
</div>
<div class="col-md-2">
  <input class="form-control pc" id="3" type="text" name="pc3" />
</div>

Upvotes: 0

Views: 967

Answers (2)

Mansour Alnasser
Mansour Alnasser

Reputation: 5040

this code will work event when changed the HTML I have created this function for you and used the onkeyup event.

this will allow you to disable this action on the last input.

advice: use a clean name on using objects or elements for example change pc to personalCode :P

this will help you in the future

function jumpToNextPcInput(currentIndex){
  currentIndex++;
  document.getElementById('pc'+currentIndex).focus();
 }
<div class="col-md-2">
  <input type="text" class="form-control pc" onkeyup="jumpToNextPcInput(1)" id="pc1" />
</div>
<div class="col-md-2">
  <input type="text" class="form-control pc" onkeyup="jumpToNextPcInput(2)" id="pc2" />
</div>
<div class="col-md-2">
  <input type="text" class="form-control pc" id="pc3" />
</div>

Upvotes: 1

dippas
dippas

Reputation: 60563

pc aren't siblings, you'll need to go up to parent then go to its sibling to find .pc

so you need to use $(this).parent().next().find('.pc').focus();

$(".pc").on('keyup', function() {
  const nextItem = parseInt(this.id) + 1;
  $(this).parent().next().find('.pc').focus();
  console.log(nextItem);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-2">
  <input class="form-control pc" id="1" type="text" name="pc1" />
</div>
<div class="col-md-2">
  <input class="form-control pc" id="2" type="text" name="pc2" />
</div>
<div class="col-md-2">
  <input class="form-control pc" id="3" type="text" name="pc3" />
</div>

Upvotes: 1

Related Questions