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

我正在构建一个可以动态添加表单的功能。不是表单字段，而是一个完整的单独的HTML表单。提交多个动态添加的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是赞赏。

来源

2017-04-18 Paul Ryan

首先，你只需要只有一个''

@AlfredCrosby还有其他种类的表单。有add_email_template，add_task_template。所以我不能只使用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 
});

来源

2017-04-18 06:37:35 Diego

做表格同时提交或一次提交？ –

@PaulRyan只有一个帖子与所有表单内容 – Diego

您可以使用一个i变量，每个表格都会增加一个变量。通过使用i，您可以为表单中的每个字段生成唯一的名称。

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

来源

2017-04-18 03:23:25

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

回答

相关问题