Html表单在输入时如何自动提交

Question

我在工具栏中有这个html模板，类似于52个输入字段，我有一个focusnext()函数来关注下一个输入字段，不管它是否需要。

来自模板的html代码

<form action="/newclient/{{accountName}}" onsubmit="return checkUSerCredentials();" method="POST">
<div class="row">
     <h1 class="col s6" style="margin-top:4%;">NEW CLIENT</h1>
    <div style="float: right; margin-top:4.5%;">
        <button type="submit" id="save" class="waves-effect waves-light btn-large roundeed teal lighten-1">
            <i class="material-icons left">done_all</i>Create New Agreement
        </button>
    </div>
    </div>
    <div class="row"> 
    <div class="input-field col s4" onkeydown="focusNext(event)">
    <input id="ledger_num" name="ledger_num"type="text" class="validate" required>
    <label for="ledger_num"><b>Ledger Number</b></label>
    </div>
    <div class="input-field col s4" onkeydown="focusNext(event)">
    <input id="file_num" name="file_num" type="text" class="validate" required>
    <label for="file_num"><b>File Number</b></label>
    </div>
    <div class="input-field col s4" onkeydown="focusNext(event)">
        <input id="agereement_date" placeholder="Example : 31/12/2021" name="agereement_date" type="text" class="validate" required pattern="^(?:(?:31(\/|-|\.)(?:0?[13578]|1[02]))\1|(?:(?:29|30)(\/|-|\.)(?:0?[13-9]|1[0-2])\2))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:29(\/|-|\.)0?2\3(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1\d|2[0-8])(\/|-|\.)(?:(?:0?[1-9])|(?:1[0-2]))\4(?:(?:1[6-9]|[2-9]\d)?\d{2})$">
        <label for="agereement_date">Agereement Date</label>
    </div> 
    </div> 
    <div class="Row">
    <div class="input-field Column" onkeydown="focusNext(event)">
    <input id="client_name" name="client_name" type="text" class="validate" required>
    <label for="client_name">Client Name</label>
    </div>
    <div class="input-field Column" onkeydown="focusNext(event)">
        <input id="client_gaurdian" name="client_gaurdian" type="text" class="validate" >
        <label for="client_gaurdian">Parent/Guardian</label>
    </div>
    <div class="input-field Column" onkeydown="focusNext(event)">
        <input id="guarantor_name" name="guarantor_name" type="text" class="validate" >
        <label for="guarantor_name">Guarantor Name</label>
    </div>
    <div class="input-field Column" onkeydown="focusNext(event)">
        <input id="guarantor_gaurdian" name="guarantor_gaurdian" type="text" class="validate">
        <label for="guarantor_gaurdian">Parent/Guardian</label>
    </div>
.
.
.
.
.
.
</form>

这是我用来关注下一个输入字段的函数。

<script>
    const inputField_ID_array = ["ledger_num","file_num","agereement_date","client_name","client_gaurdian",
    "guarantor_name","guarantor_gaurdian".............]


    function focusNext (e) {
      try{
        for(var i = 0; i<textArray.length; i++) {

          if(e.keyCode === 13 && e.target.id === textArray[i]){  
            M.updateTextFields();
            document.querySelector(`#${textArray[i+1]}`).focus();
          }

        } 
      }catch(error){} 
    }
</script>

这是在脚本标记中的同一个模板文件中，所以问题是，当我预先输入而不是关注下一个输入字段时，我将如何转到下一个输入字段，如果从所有输入字段中删除 require 条件，它只会发送post请求(我不知道发生了什么)。

Answer 1

这是HTML表单的预期行为，您必须通过Javascript手动禁用这个特性，或者创建一个隐藏的提交按钮来防止这一点。

请把这个answer重放一遍