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元素。

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

使用AJAX（使用XMLHttpRequest或jQuery等帮助程序库）提交表单。
重新格式化输入以使用单个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。

如何使用Javascript通过单个提交按钮提交多个动态生成的表单？ [部分进展]

1 个答案: