Question

我已经开始通过表单中的按钮动态添加元素的指南。

现在，我可以关注其中的大部分内容（我的jQuery经验很少），但在我的实例中，我希望添加文件字段，但是命名约定有点不同，而且它会让我感到难过。

在我的情况下，我的第一个输入名称为name="matrix_field[row_new_0][col_id_1]"，我需要增加row_new_0。我不知道如何才能让它工作，因为号码不在名称的末尾。希望有意义！

根据请求快速编辑。

这是这个标记。它直接来自我链接的教程。

<form id="myForm">
    <input type="hidden" name="matrix_field[row_order][]" value="row_new_0" />

    <div id="input1" class="clonedInput">
       <input type="file" name="matrix_field[row_new_0][col_id_1]" />
    </div>

    <div>
       <input type="button" id="btnAdd" value="add another name" />
       <input type="button" id="btnDel" value="remove name" />
    </div>
</form>

继承了Javascript，以及jramby的建议，但我得到了一些奇怪的结果....

<script type="text/javascript">
        $(document).ready(function() {
            $('#btnAdd').click(function() {
                var num     = $('.clonedInput').length;
                var newNum  = new Number(num + 1);

                var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);

                newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'matrix_field[row_new_' + newNum + '][col_id_1]');
                $('#input' + num).after(newElem);
                $('#btnDel').attr('disabled','');

                if (newNum == 5)
                    $('#btnAdd').attr('disabled','disabled');
            });

            $('#btnDel').click(function() {
                var num = $('.clonedInput').length;

                $('#input' + num).remove();
                $('#btnAdd').attr('disabled','');

                if (num-1 == 1)
                    $('#btnDel').attr('disabled','disabled');
            });

            $('#btnDel').attr('disabled','disabled');
        });
    </script>

这是添加额外的字段，但似乎得到一些奇怪的标记，所以我猜它与我的js中的其他东西冲突。

无论如何，这是一个http://jsfiddle.net/DdrfA/

然而，这似乎跳过了row_new_1，因为它从row_new_0直接转到row_new_2，并且删除按钮似乎也无效。

希望这有帮助！

Answer 1

您可以轻松地解析row_new_0。这是基于链接的示例：

var newElem = $("#input").clone().attr('name', function (_, name) {
   return name.replace('row_new_0', 'row_new_' + num);
});

http://jsfiddle.net/Mdhn2/

Answer 2

而不是添加这一行：

newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);

你必须把这一行：

newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'matrix_field[row_new_' + newNum + '][col_id_1]');

如果我能获得更多详细信息，可能会有更多帮助...我认为如果存在，我可以在答案中看到缺失的问题详情。

以动态方式添加表单输入

2 个答案: