javascript - JS-一键提交多个表单

Question

我正在尝试提交超过 1 个表单，并决定使用 JS 来完成此操作。 (至少提交部分)所以我有这个简单的形式:

<form action="test/submit.php" method="post" id="submit_template">
    <center>
        <input type="hidden" id="payment" name="DB_Table" value="payment">
            <div id="template" class="collapse.toggle">
                <input type="text" placeholder="Full Name" name="Full_Name">
                <input type="text" placeholder="Full Name" name="Full_Name">
            </div>
    </center>
</form>

我创建了一个 JS 来更改该表单 ID 的 ID - 例如“submit_template1...2...”等该按钮如下所示:

<button id="submit" type="button" name="submit" value="submit" class="button=1" onclick="submitForms()">Submit</button>

我尝试创建一个 JS 来提交所有表单，代码如下所示:

submitForms = function()
{
    for(i = 0 ; i < document.getElementsByTagName("form").length ; i++)
    {
        document.getElementById("submit_template" + i).submit();
    }
}

当我有超过 1 个表单时，会出现以下错误:Uncought TypeError:无法读取 null 的属性“提交”在提交表格(:106)在 HTMLButtonElement.onclick

有趣的是，如果我进入 F12 控制台并执行以下操作:变量我 = 1document.getelementbyid("submit_template"+ i).id

它工作得很好...

有什么想法吗？

提前致谢。

Answer 1

当您提交表单时，浏览器会向表单的 action 发出 HTTP 请求。并导航到它。

正常情况下，您无法同时导航到多个页面:您只有一个视口(viewport)。

当您尝试时，它会取消之前的表单提交。

如果您想同时导航到多个位置，那么您需要多个视口(viewport)。实现这一目标的一种方法是拥有 <iframe>对于每个 <form>并设置target每个属性。这样，表单提交就不会触发离开表单所在页面的导航。

另一种方法是根本不提交表单，而是使用 JavaScript 发出所有 HTTP 请求(例如 fetch 或 XMLHttpRequest )，这样就根本没有导航。

您还可以重新设计表单，以便拥有一个可以一次性提交所有数据的单一表单。