提交多個動態添加的html表單

Question

我正在構建一個可以動態添加表單的功能。 不是表單字段，而是整個單獨的HTML表單。

我使用JS添加它們。

add_email_template

$('#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

$('#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。

Answer 1

您可以使用一個i變量，該變量將針對每種形式遞增。 通過使用i您可以為表單中的每個字段生成唯一的名稱。

然后通過使用$('form').serialize()可以生成一個可以傳遞給服務器的字符串。

Answer 2

我目前無法對其進行測試，但是我認為您可以在click button事件中使用類似的方法：

$("#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
});