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

Question

当我发布表格时，我需要在“vsc”和“vscitems”之间建立一些关联 - （金额） ![在此处输入图像描述][1] 这两个部分都可以克隆，并且用户界面按预期工作，但我需要在数据库中获取这些项目并且无法弄清楚如何更改输入名称以便我可以在帖子中捕获它。

基本上，我不知道如何使子行具有相同的名称。我需要遍历表单的两个部分。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="vscrow nest-clone">
<div class="toclone well vsc">
    <div class="row">
        <div class="col-sm-5">
            <div class="form-group">
                <input type="text" id="vsc" name="vsc" class="form-control vscdesc" required #readonly#>
            </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="vscpenetration" value="" class="form-control 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="vscpayrate" value="" class="form-control text-right">
                            <div class="input-group-addon">.00</div>
                        </div>
                    </div>
                </div>	<a href="#" class="clone btn btn-default"><i class="fa fa-plus"></i></a>
<a href="#" class="delete btn btn-default"><i class="fa fa-minus"></i></a>

            </div>
        </div>
    </div>	<a href="#" class="clone btn btn-default"><i class="fa fa-plus"></i></a>
<a href="#" class="delete btn btn-default"><i class="fa fa-minus"></i></a>

</div>
</div>

Answer 1

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

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

每次克隆字段集时 [0] 之后都会增加，这将使您的 post 请求发送一个数组（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/