Question

说我有一个带有以下内容的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>

现在我想附加＆＃34; .si-content＆＃34;当我点击＆＃34;＃si-btn＆＃34;我在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
})

现在问题在于我添加了一个新的＆＃34; si-content＆＃34; DIV。但是当我发送数据时，它只发送第一个div的内容。有人能告诉我在这种情况下添加数据的最佳方法是什么？

Answer 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
})

将动态表单数据添加到ajax post请求

1 个答案: