1

次のコードを使用して、親 div をコピーするだけで、jQuery で入力フィールドを動的に追加または削除します。

$(document).ready(function () {
    $('#btnAdd').click(function () {
        var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
        var newNum = new Number(num + 1);      // the numeric ID of the new input field being added

        // create the new element via clone(), and manipulate it's ID using newNum value
        var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);

        // manipulate the name/id values of the input inside the new element
        newElem.children(':first').attr('id', 'author' + newNum).attr('name', 'author' + newNum).attr('value', 'enter a name');

        // insert the new element after the last "duplicatable" input field
        $('#input' + num).after(newElem);

        // enable the "remove" button
        $('#btnDel').attr('disabled', '');

        // business rule: you can only add 5 names
        if (newNum == 5)
            $('#btnAdd').attr('disabled', 'disabled');
    });

    $('#btnDel').click(function () {
        var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
        $('#input' + num).remove();     // remove the last element

        // enable the "add" button
        $('#btnAdd').attr('disabled', '');

        // if only one element remains, disable the "remove" button
        if (num - 1 == 1)
            $('#btnDel').attr('disabled', 'disabled');
    });

    $('#btnDel').attr('disabled', 'disabled');
});

基本的に私がやりたいことは、最大6つの入力フィールドの1つが入力されるとすぐに(onchangeイベント?)、その値が非表示の入力フィールドに自動的に保存されることです。

これは、各入力フィールドで発生するはずです。値は「;」で区切る必要があります 非表示の入力要素内の値の量に応じて、ポストバック後に、上記の clone() 関数を使用して正確な量の入力フィールド int を dom に追加し、値を入力し直します。

各ポストバックの後（たとえば、すべての必須フィールドが入力されていない場合）、（jQueryを介して）追加された入力フィールドが自動的に追加されないため、もちろん理にかなっています....

これを行う方法のより簡単な方法がある場合は、その方法を聞きたいと思います。そうでない場合は、特に値の分離に関して無知であるため、これについて何か助けていただければ幸いです。

[編集]

私が言及するのを忘れていたのは、私は c# .net を使用し、非表示の入力フィールドはrunat="server"属性を使用していることです。

[編集2]

追加情報: これは Web フォームにあります。このフォームを使用すると、「プロジェクト」を Web サイトに保存できます (データはデータベースに保存されます)。これらのプロジェクト/記事には複数 (最大 6) の作成者を含めることができ、jQuery が登場するのはそのときです。ユーザーは最大 6 人の作成者を追加でき、ページが読み込まれた後にユーザーによって動的に DOM に追加されます。 、フォームがサーバーに送信 (ポストバック) された後、それらは自動的に追加されません。したがって、ポストバック後も値を保持するために、これらの入力フィールドの値を互いに分離して保存する必要がありますが、ユーザーが定義した量の作成者入力フィールドを追加することもできます。これにより、私が何をしたいのかが多かれ少なかれ明確になることを願っていますか?

前もって感謝します！

4

0 に答える 0