提交多個動態添加的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表單

回答

相關問題