0

フォーム内のボタンを使用して、要素を動的に追加するためのガイドの作成を開始しました。

ガイドはここにありましたフォーム要素の追加

今、私はそれのほとんどに従うことができます（私は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であり、削除ボタンも機能しないようです。

お役に立てれば！

4

2 に答える 2

0

この行を追加する代わりに:

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]');

詳細を取得できれば、さらに役立つ可能性があります...存在する場合、回答に欠落している質問の詳細が表示されると思います。

于 2013-01-30T04:13:21.620 に答える
0

row_new_0かなり簡単に解析できます。これは、リンクされた例に基づいています。

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

http://jsfiddle.net/Mdhn2/

于 2013-01-30T03:54:10.610 に答える