Question

我有一个带有add row按钮的2个字段的表单。单击此按钮时，它只是克隆行并添加另一行，包含2个表单域。如何在我的ajax帖子中保存这些新添加的字段？现在，它只保存表格中的最后一行。

<form action="." method="post">
    <table class="table table-condensed" id="pa">
        <thead>
            <tr>
                <th class="col-xs-2">Description</th>
                <th class="col-xs-2">Expected %</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <div class="form-group">
                        <input class="text-box single-line" data-val="true" data-val-required="The Description field is required." id="Description" name="Description" value="" type="text">
                    </div>
                </td>
                <td>
                    <div class="form-group">
                        <div class="input-group">
                            <input class="text-box single-line" data-val="true" data-val-number="The field Expected must be a number." id="Expected" name="Expected" value="100" type="number">
                        </div>
                    </div>
                </td>
                <td class="vert-align"> <a class="btn btn-danger btn-xs remove-row-pa">x</a>

                </td>
            </tr>
        </tbody>
    </table>
    <div class="pull-right">
        <p> <a href="#" id="add-pa-row" class="btn btn-success btn-xs">
                        <i class="fa fa-plus-circle"></i> Add row
                    </a>

        </p>
    </div>
    <div class="form-group">
        <p>
            <input value="Save" class="btn btn-success" type="submit">
        </p>
    </div>
</form>

function Qs2Dict(qs) {
    var pairs = qs.split('&');
    var dict = {};
    pairs.forEach(function (pair) {
        var kv = pair.split('=');
        dict[kv[0]] = decodeURIComponent(kv[1].replace(/\+/g, "%20"));
    });
    return dict;
}

// Add row 
$("#add-row").click(function () {
    $('#pa tbody>tr:last').clone(true).insertAfter('#pa tbody>tr:last');
    $('#pa tbody>tr:last #Description').val('');
    $('#pa tbody>tr:last #Expected').val('');
    return false;
});


$('#modal').click(function (e) {
    e.preventDefault();
    var url = $(this).data('url');
    var data = $('form').serialize();
    var dict = Qs2Dict(data);


    $.ajax({
        type: "POST",
        url: url,
        data: {
            "Description": dict.Description,
                "EffectiveDate": dict.EffectiveDate,
                "Expected": dict.Expected,
        },
        success: function (result) {},
    });
});

Answer 1

更改其名称属性，因为它定义/枚举要保存的字段。如果它们是相同的，如果你克隆它们就是它们，只有最后一个被采用。

或使用数组，即name="Expected[]"

编辑：更具体地说：我认为他们会失败＆＃34;由于上述原因$('form').serialize();

使用jQuery保存多行

1 个答案: