javascript - How to automatically submit a form if all fields are filled in jQuery without using each()?

Question

I have made a OTP form which I want to submit via AJAX if all it's input fields are filled in. Is it possible with using class selector $(".tp")?

$(document).ready(function() {
  $(".tp").keyup(function() {
    if (this.value.length == 1) {
    // this will automatically change the focus as soon as an input is done
      $(this).next().focus() 
    }
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="tel" class="tp" maxlength="1">
<input type="tel" class="tp" maxlength="1">
<input type="tel" class="tp" maxlength="1">
<input type="tel" class="tp" maxlength="1">

Answer 1

To achieve this without an explicit loop you can use filter() to find all fields which do not have a value. If there aren't any, then you know you are safe to make your AJAX request. Try this:

jQuery($ => {
  let $tp = $(".tp").on('input', e => {
    if (e.target.value.length == 1) {
      $(e.target).next().focus();
    }

    if ($tp.filter((i, el) => !el.value.trim()).length == 0) {
      console.log('AJAX call goes here...');
    }
  });
});

input {   
  width: 15px; 
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="tel" class="tp" maxlength="1">
<input type="tel" class="tp" maxlength="1">
<input type="tel" class="tp" maxlength="1">
<input type="tel" class="tp" maxlength="1">