0

フォーム要素を動的に生成するためのフォームが必要です。これまでのところ、別のフィールドを追加するようにスクリプトを変更しましたtxtEmail1。ユーザーが追加ボタンを押すと、スクリプトは正常に機能し、フィールドを生成します。

次に、ラベル「フルネーム」の前にシリアル番号を付ける必要があります。1、2、3、4など。私は試しましたが、それを正しく理解することができません。専門家の助けが必要です。

<script type="text/javascript">
        $(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', 'name' + newNum).attr('name', 'name' + newNum);

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

                // 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');
        });
    </script>
</head>
 <body>
    <div>
        <input type="button" id="btnAdd" value="add another name" />
        <input type="button" id="btnDel" value="remove name" />
    </div>
    <div id="input1" style="margin-bottom:4px;" class="clonedInput">
                  <label id="lblSno1"></label>  Full Name
                    <input name="name1" type="text" class="TextBoxNext" id="name1" /></td>
                    <input name="txtEmail1" type="text" class="TextBoxNext" id="txtEmail1" /></td>
   </div>
</form>
</body>

また、ユーザーが作成したフィールドの数に対して挿入クエリを実行できるように、いくつかの非表示フィールドにカウントを割り当てる必要があります。

4

2 に答える 2

0

次のようなものを試してください。コードの構造にいくつかの変更を加えました。
*表示されているすべてのクローンのクローンを作成する非表示のテンプレートを作成します*
必要に応じて追加/削除ボタンを機能させます
*アイテムの数を保持する非表示フィールドを追加しました
*コードの大部分を関数に入れて再利用する

<script type="text/javascript">

    // document - on load
    $(document).ready(function() {

        // add the first item
        AddInput();
        UpdateButtons();

        // add button - click
        $('#btnAdd').click(function() {
            AddInput();
            UpdateButtons();
        });

        // delete button - click
        $('#btnDel').click(function() {
            $('.clonedInput:last').remove();
            UpdateButtons();
        });

    });

    function AddInput()
    {
        // how many cloned input fields we currently have
        var numItems = $('.clonedInput').length; 
        var newNum = new Number(numItems + 1);

        // create the new element via clone() based on hidden template
        var newElem = $('.templateInput').clone();

        // update attributes on parent tag
        newElem.attr('id', 'input' + newNum);
        newElem.attr('class', 'clonedInput');
        newElem.show();         

        // update child elements
        newElem.children('#lblSno').html(newNum + ' ' + newElem.children('#lblSno').html());
        newElem.children('#lblSno').attr('id', 'lblSno' + newNum);
        newElem.children('#name').attr('id', 'name' + newNum);
        newElem.children('#txtEmail').attr('id', 'txtEmail' + newNum);

        // insert the new element
        $('#allInputs').append(newElem);
    }

    function UpdateButtons()
    {
        // get number of items
        var numItems = $('.clonedInput').length;

        // only enable delete button when there is more than 1 item
        if (numItems > 1)
            $('#btnDel').removeAttr('disabled');
        else
            $('#btnDel').attr('disabled', 'disabled');

        // only enable add button when there are less than 5 items
        if (numItems < 5)
            $('#btnAdd').removeAttr('disabled');
        else
            $('#btnAdd').attr('disabled', 'disabled');

        // update the hidden field
        $('#hdnNumItems').val(numItems);                
    }
</script>

 

<form>
    <div>
        <input type="button" id="btnAdd" value="add another name" />
        <input type="button" id="btnDel" value="remove name" />
        <input type="hidden" id="hdnNumItems" value="0" />
    </div>
    <div id="allInputs">
        <div class="templateInput" style="margin-bottom:4px; display:none;">
            <label id="lblSno">Full Name</label> 
            <input name="name" type="text" class="TextBoxNext" id="name1" /></td>
            <input name="txtEmail" type="text" class="TextBoxNext" id="txtEmail1" /></td>
        </div>
    <div>
</form>
于 2012-01-12T11:05:47.953 に答える
0

やろうとしていることを実行する方法は何千もありますが、どれを使用するかは完全にあなたの選択次第です。したがって、シリアル番号を追加するには、ロジックをいじったり、独自のコードを使用したりすることなく、次の 1 行を追加するだけです。

newElem.text(newNum + " ) Full Name " );

それでおしまい。シリアル番号が先頭に追加されました。

于 2012-01-12T12:18:06.593 に答える