Question

当我发布表单时，我需要“vsc”和“vscitems”之间的某种关联 - （金额）！[在此处输入图像说明] [1] 这两个部分都可以克隆，并且ui按预期工作，但是我需要在数据库中获取这些项目，并且无法弄清楚如何更改输入名称以便我可以在帖子上捕获它。

基本上，我无法弄清楚如何将子行具有相同的名称。我需要遍历表单的两个部分。

@Html.TextBoxFor

Answer 1

当您进行克隆时，您可以将输入分组到数组中，因此输入的名称看起来像

<input name="vcs[0][vscpayrate]" ...
<input name="vcs[0][vscpenetration]" ...

每次克隆字段集后，[0]之后会增加，这将使您的发布请求发送一个数组（vcs），您可以迭代以获取所有字段集

也许是这样的

   <div id="nest-clone"class="vscrow">
<div id="toclone" data-clone_count="0" class=" well vsc">
    <div class="row">
        <div class="col-sm-5">
            <div class="form-group">
                <input type="text" id="vsc" name="vsc[0][desc]" class="form-control clonable vscdesc" required ></input>
            </div>
        </div>
    </div>
    <div class="row vscitems">
        <div class="nest-clone inner-wrap">
            <div class="row toclone">
                <div class="col-sm-1 col-sm-offset-1">
                    <div class="form-group">
                        <input type="number" id="vscpenetration" name="vsc[0][penetration]" value="" class="form-control clonable text-right"/>
                    </div>
                </div>
                <div class="col-sm-2">
                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-addon">$</div>
                            <input type="number" id="vscpayrate" name="vsc[0][payrate]" value="" class="form-control clonable text-right"/>
                            <div class="input-group-addon">.00</div>
                        </div>
                    </div>
                </div>  
            </div>
        </div>
    </div>  
</div>
</div>
 <a href="#" id="add" class=" btn btn-default">add</a>

和jQuery

$('#add').click(function() {

    //keeping count of clones 
    $('#toclone').data('clone_count', $('#toclone').data('clone_count') + 1);
    var count = $('#toclone').data('clone_count'),
        newclone = $('#toclone').clone();
    var removebtn = $('<button/>', {
        class: "btn remove btn-default",
        type: 'button',
        html: 'remove'
    })
        .click(function() {
            newclone.remove()
        });
    newclone.find('.clonable').each(function() {
        var name = $(this).attr('name');
        name = name.replace(/(vsc\[)(\d+)(\])/, '$1' + count + '$3')
        $(this).attr('name', name)
    });
    newclone.attr('id', 'clone-' + count).append(removebtn)
        .appendTo('#nest-clone');
});

您可以测试并使用它来调整它https://jsfiddle.net/xxeLm8j4/

如何使用关联命名嵌套表单输入

1 个答案: