javascript - 如何使用 Javascript 使用单个提交按钮提交多个动态生成的表单？ 【部分进展】

Question

我在处理一些代码时遇到了一些麻烦。我正在尝试提交多个表格。第一个表单立即可见，当用户单击“添加另一个表单”按钮时可以将第二个表单添加到页面(将其想象成用户可以添加多个推荐的推荐系统)。

到目前为止，我能够提交一个 表单并在页面上显示多个表单，但是提交比第一个可见表单更多的表单是一个挑战。到目前为止，这是我的代码:

形式(所有形式都是克隆):

<form action="www.example.com/submission.php" name="contactform" method="POST" class="biggerForm">
    <input id="name" type="text">
    <input id="phone_number" type="text">
    <input id="addanother" type="button" class="formBtn lrgBtn addanother" value="Add Another Form" >
    <input type="hidden" name="retURL" value="https://www.example.com/thank-you/">
    <input type="button" value="Submit Now" class="loopStarter multiRefHide formBtn" onclick="submitFormLoop()">
</form>

用于表单提交的 JavaScript(SubmitFormLoop 函数):

var formCounter = 0;
var ellipsesCount = 0;
function submitFormLoop(){
    if(typeof document.forms[formCounter]!= 'undefined'){
        if($('.error:visible').length>0){
            return false;
        }
        document.forms[formCounter].mySubmit.click()
        if($('.error:visible').length>0) return false;

        $('#submitting').show();
        $('#supportCase').hide();
        document.getElementById('submittingText').innerHTML = "Submitting your form(s)."
        setInterval(function(){
        ellipsesCount++;
        var dots = new Array(ellipsesCount % 8).join('.');
        document.getElementById('submittingText').innerHTML = "Submitting your form(s)" + dots;
        }, 300);

        setTimeout(function(){submitFormLoop()},1500)
        formCounter++
    }else{
        window.location = "https://example.com/thank-you";
        $('input[type="submit"],.addanother').hide()
        formCounter = 0;
    }
}

同样，我可以让第一个提交，但我似乎无法让函数循环。非常欢迎关于此事的任何建议，无论是小调整还是完全废弃我的代码的建议。

非常感谢大家

Answer 1

您不能提交多个 form 来自同一页面的元素。

但是您可以通过两种方式获得您想要的行为:

1. 使用 AJAX(使用 XMLHttpRequest 或 jQuery 等辅助库)提交表单。
2. 重新格式化您的输入以使用单个 form元素。

---

要完成后者，PHP 程序员¹ 通常使用语法:

<form action="www.example.com/submission.php" name="contactform" method="POST" class="biggerForm">
    <input name="contacts[0][name]" type="text">
    <input name="contacts[0][phone_number]" type="text">
    <input name="contacts[1][name]" type="text">
    <input name="contacts[1][phone_number]" type="text">
    <input name="contacts[2][name]" type="text">
    <input name="contacts[2][phone_number]" type="text">
</form>

注意 [<integer>]在语法中。在 PHP 中，$_POST变量将包含像这样的数据作为索引数组。

然后您的按钮可以添加额外的 input相同格式的元素:

<input name="contacts[3][name]" type="text">
<input name="contacts[3][phone_number]" type="text">

在提交表单时，您可以像这样检索这些字段:

foreach($_POST['contacts'] as $person){
    echo $person['name'];
    echo $person['phone_number'];
}

---

¹ 我假设您使用的是 PHP，因为您的表单端点是 submission.php .