Focusing on next input not working and how to submit the form when user on last input field

Question

I have 6 text field and each has maxlength=1. I used the script, the Only user can enter the number. After entering the number cursor will go to next field and the same condition happens with other fields but when cursor on the last filed then, I have to call the AJAX to submit data.

I am facing two issues here

1) How to set autofocus on next input field?

2) How to submit form when user enter the Last field

I tried belwo code

/*max filed value  is only 1 and it will redirect on next field*/
$(".child").keyup(function() {
  if (this.value.length == this.maxLength) {
    $(this).next('.child').focus();
  }
});

/*Below script is use for stop the letter and can only use number in the field*/
$(function() {
  $('.confirm-field').on('keydown', '.child', function(e) {
    -1 !== $.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) || /65|67|86|88/.test(e.keyCode) && (!0 === e.ctrlKey || !0 === e.metaKey) || 35 <= e.keyCode && 40 >= e.keyCode || (e.shiftKey || 48 > e.keyCode || 57 < e.keyCode) && (96 > e.keyCode || 105 < e.keyCode) && e.preventDefault()
  });
})

/*ajax calling*/
$(function() {
  $('form[name="user-confirmation-code"]').on('submit', function(e) {
    e.preventDefault();
    $.ajax({
      type: 'post',
      url: 'demo2.php',
      data: $('form[name="user-confirmation-code"]').serialize(),
      success: function() {
        alert('form was submitted');
      }
    });
  });
});

.confirmation-box {
  display: flex;
}

.confirmation-code {
  display: inline-flex;
}

.confirmation-code input[type="text"] {
  width: 30px;
  height: 30px;
}

.confirmation-code-dash {
  display: table-cell;
  font-weight: 700;
  font-size: 2rem;
  text-align: center;
  padding: 0 .5rem;
  width: 2rem;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<form action="#" method="post" name="user-confirmation-code">
  <div class="confirmation-box">
    <div class="confirmation-code">
      <div class="confirm-field">
        <input type="text" name="" maxlength="1" class="child" autofocus>
      </div>
      <div class="confirm-field">
        <input type="text" name="" maxlength="1" class="child">
      </div>
      <div class="confirm-field">
        <input type="text" name="" maxlength="1" class="child">
      </div>
    </div>
    <div class="confirmation-code-dash">-</div>
    <div class="confirmation-code">
      <div class="confirm-field">
        <input type="text" name="" maxlength="1" class="child">
      </div>
      <div class="confirm-field">
        <input type="text" name="" maxlength="1" class="child">
      </div>
      <div class="confirm-field">
        <input type="text" name="" maxlength="1" class="child">
      </div>
    </div>
  </div>
  <!--confirmation-box-->
</form>

Without parent class is working autofocus

$(".inputs").keyup(function () {
    if (this.value.length == this.maxLength) {
      $(this).next('.inputs').focus();
    }
});

input { width: 30px; margin: 5px;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input class="inputs" type="text" maxlength="1" />
<input class="inputs" type="text" maxlength="1" />
<input class="inputs" type="text" maxlength="1"/>
<input class="inputs" type="text" maxlength="1"/>
<input class="inputs" type="text" maxlength="1"/>

Answer 1

jquery next only checks current parent, so you must use it at correct location. check this code:

/*max filed value  is only 1 and it will redirect on next field*/
$(".child").keyup(function () {
 if (this.value.length == this.maxLength) {
     var nextField = $(this).parent().next('.confirm-field');
    if (nextField.length==0) {
        nextField = $(this).parent().parent().next('.confirmation-code-dash').next('.confirmation-code').children('.confirm-field').first();
        if (nextField.length!=0) {
              nextField.children('.child')[0].focus();
        } else {
            // it is last field in the form so submit the form
            $("form[name='user-confirmation-code']").submit();
        }
    } else {
       $(this).parent().next('.confirm-field').children('.child')[0].focus();
    }
}
});

	/*Below script is use for stop the letter and can only use number in the field*/
$(function() {
  $('.confirm-field').on('keydown', '.child', function(e){-1!==$.inArray(e.keyCode,[46,8,9,27,13,110,190])||/65|67|86|88/.test(e.keyCode)&&(!0===e.ctrlKey||!0===e.metaKey)||35<=e.keyCode&&40>=e.keyCode||(e.shiftKey||48>e.keyCode||57<e.keyCode)&&(96>e.keyCode||105<e.keyCode)&&e.preventDefault()});
})

/*ajax calling*/
$(function () {
$('form[name="user-confirmation-code"]').on('submit', function (e) {
e.preventDefault();
 $.ajax({
type: 'post',
  url: 'demo2.php',
 data: $('form[name="user-confirmation-code"]').serialize(),
success: function () {
alert('form was submitted');
            }
          });
 
        });
 
      });

    .confirmation-box{
  display: flex;
}
.confirmation-code{
display: inline-flex;
  }
.confirmation-code input[type="text"]
  {
 width: 30px;
 height: 30px;
 }
    .confirmation-code-dash{
    display: table-cell;
    font-weight: 700;
    font-size: 2rem;
    text-align: center;
    padding: 0 .5rem;
    width: 2rem;
    		}

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  
  <form action="#" method="post" name="user-confirmation-code">
	<div class="confirmation-box">
<div class="confirmation-code">

<div class="confirm-field">
<input type="text" name="" maxlength="1" class="child" autofocus>
</div>

<div class="confirm-field">
<input type="text" name="" maxlength="1" class="child">
</div>

<div class="confirm-field">
<input type="text" name="" maxlength="1" class="child">
</div>
</div>

<div class="confirmation-code-dash">-</div>
<div class="confirmation-code">
<div class="confirm-field">
<input type="text" name="" maxlength="1" class="child">
</div>

<div class="confirm-field">
<input type="text" name="" maxlength="1" class="child">
</div>

<div class="confirm-field">
<input type="text" name="" maxlength="1" class="child">
</div>
</div>
</div><!--confirmation-box-->
</form>