Flask-WTForms 使用 jQuery 移动到下一个表单字段

Question

I have a jQuery script that auto-moves the focus down a column of input fields.

<script>
$(".input").keyup(function() {
  if (this.value.length > 0) {
    $('.input').eq($('.input').index(this) + 1).focus();
  }
});
</script>

and it works with this simple HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="split4">
  <input type="tell" class="input" maxlength="1">
</div>
<div class="split4">
  <input type="tell" class="input" maxlength="1">
</div>
<h4>text</h4>
<div class="split4">
  <input type="tell" class="input" maxlength="1">
</div>
<div class="split4">
  <input type="tell" class="input" maxlength="1">
</div>

However, I am trying to apply it to a form rendered with WTForms like so and it doesn't work

<form action="" method="post" novalidate>
                    <div style="text-align: center">
                        <h3>
                        {{ render_field(form.star, class="input", required=true, size=55, autofocus=true) }}
                        </h3> <br>
                        <h3>
                        {{ render_field(form.serial, class="input", required=true, size=55) }}
                        </h3> <br>
                        <h3>
                        {{ render_field(form.weight, class="input", required=true, size=55, onchange="submit()") }}
                        </h3> <br>
                    </div>
                </form>

I came across this answer but don't understand how to implement it. If there is a simpler way of connecting HTML form inputs with Flask so that I can add to my local database, please let me know as well.

Thank you!

Answer 1

Turns out, the script has to be inside the same block content as the form...Everything works now!