複数の動的に追加された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

私は今それをテストすることはできませんが、私はあなたがクリックボタンのイベントでは、このようなものを使用することができると思う：あなたが複製する必要がありますので

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

Answer 2

i変数を使用して、フォームごとに増分することができます。 iを使用すると、フォームの各フィールドに固有の名前を生成できます。

$('form').serialize()を使用すると、サーバーに渡すことができる文字列を生成できます。