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

Adding dynamic form data to ajax post request

本文关键字：动态 表单 数据 添加 请求 ajax post      更新时间：2023-09-26

假设我有一个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的内容。有人能告诉我在这种情况下添加数据的最佳方式是什么吗？

try:

 $('#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
})
相关文章：