将动态表单数据添加到 ajax 发布请求答案

【问题标题】：Adding dynamic form data to ajax post request将动态表单数据添加到 ajax 发布请求
【发布时间】：2015-11-17 16:52:01
【问题描述】：

假设我有一个包含以下内容的 html 表单

<form>
    <div id="si-main">
        <button id="si-btn">Add new content</button>
        <div class="si-content">
            <input type="text" class="si-input" name="content"> 
        </div>
    </div>

    <input type="submit" id="si-submit" value="Submit">
</form>

现在我想在单击“#si-btn”时附加“.si-content” div，我在 JS 中使用此脚本来执行此操作

$('#si-btn').click(function() {
    $('#si-main').append('<div class="si-content"><input type="text" class="si-input" name="content"></div>')
})

然后我在 JS 中提交这样的表单

$('form #si-submit').click(function() {
    var data_to_send = {}
    $('form').find('.si-input').each(function() {
        if ($(this).hasClass('si-input')) {
            data_to_send[$(this).attr('name')] = $(this).val()      
        }
    })
    //NEXT I SEND THE AJAX REQUEST AND HANDLE THE RESPONSE
})

现在的问题是每个我附加它都会添加一个新的“si-content”div。但是当我发送数据时，它只发送第一个 div 的内容。有人能告诉我在这种情况下添加数据的最佳方法是什么吗？

【问题讨论】：

使用$('form').serialize()
您必须为每个 input 框提供唯一的 name，否则 data_to_send[] 将只保存一条记录。每次追加时尝试为每个动态输入框赋予不同的名称。
<input type="text" class="si-input" name="content"> 没有value 属性？

标签： javascript jquery html ajax

【解决方案1】：

尝试：

 $('#si-main').append('<div class="si-content"><input type="text" class="si-input" name="content[]"></div>');

$('form #si-submit').click(function() {
    var data_to_send =  $(this).parent('form').serialize();

    //NEXT SEND THE AJAX REQUEST AND HANDLE THE RESPONSE
})

【讨论】：