如果所有字段都填写在 jQuery 中而不使用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">