提交多个动态添加的 html 表单答案

【问题标题】：Submit multiple, dynamically added html forms提交多个动态添加的 html 表单
【发布时间】：2017-04-18 14:37:35
【问题描述】：

我正在构建一个可以动态添加表单的功能。不是表单字段，而是一个完全独立的 HTML 表单。

我使用 JS 添加它们。

添加电子邮件模板

$('#add_email_template').on('click', function () {
var html =
        '<div class="panel panel-info">' +
            '<div class="panel-heading">' +
                '<h4 class="panel-title">Send Email</h4>' +
                '<span class="pull-right">' +
                    '<i class="glyphicon glyphicon-chevron-up showhide clickable"></i>' +
                    '<i class="glyphicon glyphicon-remove removepanel clickable"></i>' +
                '</span>' +
            '</div>' +
            '<div class="panel-body">' +
                '<div class="row">' +
                    '<div class="col-md-10">' +
                        '<form class="form-horizontal">' +
                            '<div class="form-group">' +
                                '<label for="send_to" class="col-sm-2 control-label">Send to</label>' +
                                '<div class="col-sm-5">' +
                                    '<select name="send_to" class="select2 sendToClass form-control">' +
                                        '<option></option>' +
                                        '<option value="agency">Agency</option>' +
                                        '<option value="contact">Contact</option>' +
                                        '<option value="owner">Owner</option>' +
                                    '</select>' +
                                '</div>' +
                            '</div>' +
                            '<div class="form-group">' +
                                '<label for="send_from" class="col-sm-2 control-label">Send from</label>' +
                                '<div class="col-sm-5">' +
                                    '<select name="send_from" class="select2 sendFromClass form-control">' +
                                        '<option></option>' +
                                        '<option value="agency">Agency</option>' +
                                        '<option value="contact">Contact</option>' +
                                        '<option value="owner">Owner</option>' +
                                    '</select>' +
                                '</div>' +
                            '</div>' +
                            '<div class="form-group">' +
                                '<label for="email_template" class="col-sm-2 control-label">Email template</label>' +
                                '<div class="col-sm-5">' +
                                    '<select name="email_template" class="select2 emailTemplateClass form-control">' +
                                        '<option></option>' +
                                        '<option value="1">Template 1</option>' +
                                        '<option value="2">Corporate</option>' +
                                        '<option value="3">Funky 1</option>' +
                                        '<option value="4">Funky 2</option>' +
                                        '<option value="5">Vibe 1</option>' +
                                        '<option value="6">Vibe 2</option>' +
                                    '</select>' +
                                '</div>' +
                            '</div>' +
                            '<div class="form-group">' +
                                '<label for="email_subject" class="col-sm-2 control-label">Subject</label>' +
                                '<div class="col-sm-8">' +
                                    '<input type="text" placeholder="Subject" name="email_subject" class="form-control"/>' +
                                '</div>' +
                            '</div>' +
                            '<div class="form-group">' +
                                '<label for="email_message" class="col-sm-2 control-label">Message</label>' +
                                '<div class="col-sm-8">' +
                                    '<textarea class="form-control" id="email_message_'+ ck_num +'"></textarea>' +
                                '</div>' +
                            '</div>' +
                        '</form>' +
                    '</div>' +
                '</div>' +
            '</div>' +
        '</div>';

$('#step-box').append(html);
$('.sendToClass').select2({
    placeholder: 'Send To'
});
$('.sendFromClass').select2({
    placeholder: 'Send From'
});
$('.emailTemplateClass').select2({
    placeholder: 'Select Email Template'
});

CKEDITOR.replace('email_message_' + ck_num++);
});

添加文本模板

$('#add_text_template').on('click', function () {
var html = 
    '<div class="panel panel-success">' +
        '<div class="panel-heading">' +
            '<h4 class="panel-title">Send Text</h4>' +
            '<span class="pull-right">' +
                '<i class="glyphicon glyphicon-chevron-up showhide clickable"></i>' +
                '<i class="glyphicon glyphicon-remove removepanel clickable"></i>' +
            '</span>' +
        '</div>' +
        '<div class="panel-body">' +
            '<div class="row">' +
                '<div class="col-md-10">' +
                    '<form class="form-horizontal">' +
                        '<div class="form-group">' +
                            '<label for="send_to" class="col-sm-2 control-label">Send to</label>' +
                            '<div class="col-sm-5">' +
                                '<select name="send_to" class="select2 sendToClass form-control">' +
                                    '<option></option>' +
                                    '<option value="agency">Agency</option>' +
                                    '<option value="contact">Contact</option>' +
                                    '<option value="owner">Owner</option>' +
                                '</select>' +
                            '</div>' +
                        '</div>' +
                        '<div class="form-group">' +
                            '<label for="send_to" class="col-sm-2 control-label">Message</label>' +
                            '<div class="col-sm-8">' +
                                '<input name="text_message" maxlength="160" placeholder="Message" type="text" data-id="' + ck_num + '" id="text_msg_' + ck_num + '" class="text_msg form-control"/>' +
                            '</div>' +
                        '</div>' +
                    '</form>' +
                '</div>' +
            '</div>' +
        '</div>' +
    '</div>';

$('#step-box').append(html);
});

可以添加很多表单，因此无法定义表单的数量。有 4 种不同类型的表单（但我这里只放了 2 种表单的代码）包含不同的字段。我想用一个提交 btn 来保存它们。我该怎么做？ JS 或 jQuery 不胜感激。

【问题讨论】：

首先，您只需要一个<form>，因此您只需复制input 和select。其次，尝试使用[] 添加所有表单名称。示例：<select name="send_to[]"></select>。第三，用jQuery序列化获取表单值。 $('#step-box').on('submit', '.form-horizontal', function (evt) { ... // your code })
@AlfredCrosby 还有其他种类的表格。有add_email_template、add_task_template。所以我不能只使用一种形式。

标签： javascript jquery html forms

【解决方案1】：

我现在不能测试它，但我认为你可以在点击按钮事件中使用这样的东西：

$("#button").on("click".function(e){
    $container = $('#step-box').find("form");

    $response = "";
    $container.each(function(i,form){
        $response += $(form).serialize();
    });

    $.post("URL",$response) // Use done, fail, always for process callbacks
});

【讨论】：

表单是同时提交还是一次提交？
@PaulRyan 只有一篇包含所有表单内容的帖子

【解决方案2】：

您可以使用i 变量，该变量将针对每个表单递增。通过使用i，您可以为表单中的每个字段生成唯一名称。

然后通过使用$('form').serialize()，您可以生成一个可以传递给服务器的字符串。

【讨论】：