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种不同的形式（但我只在这里放两个表格的代码）包含不同的字段。我想用一个提交btn保存它们。我该怎么做？赞赏JS或jQuery。

Answer 1

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

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

Answer 2

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

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

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

2 个答案: