Submit multiple, dynamically added html forms

Question

I'm building a functionality where I can dynamically add forms. Not form fields, but a whole separate HTML form.

I add them using 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);
});

There can be a lot of forms added so the number of forms cannot be defined. There are 4 different kinds of forms (but I only put code for 2 forms here) containing different fields. I want to save them all with one submit btn. How do I go about this? JS or jQuery is appreciated.

Answer 1

You can use a i variable which will be getting incremented for each form. By using i you can generate unique name for each fields in the form.

Then by using $('form').serialize() you can generate a string which can be passed to server.

Answer 2

I can't test it right now, but i think you can use something like this in the click button event:

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