Создайте поля формы jQuery вместе со sno в метке - PullRequest
Новая
       14

Создайте поля формы jQuery вместе со sno в метке

0 голосов
/ 12 января 2012

Мне нужна форма для динамического создания элементов формы.До сих пор я модифицировал скрипт для добавления другого поля txtEmail1, и он работает нормально и генерирует поля, как только пользователь нажимает кнопку добавления.

Теперь мне нужно добавить префикс «Полное имя» с серийным номером.1, 2, 3, 4 и так далее.Я пытался, но я не в состоянии сделать это правильно, нужна помощь экспертов в этом.полей, которые создал пользователь.

Ответы [ 2 ]

0 голосов
/ 12 января 2012

Есть тысячи способов сделать то, что вы пытаетесь сделать, и все это полностью зависит от вашего выбора, какой из них использовать.Поэтому, не вмешиваясь в свою логику и просто переходя к собственному коду, для добавления серийных номеров просто добавьте одну строку: 

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

Вот и все.Вы получили свой серийный номер.

0 голосов
/ 12 января 2012

Попробуйте что-то вроде следующего.Я сделал несколько изменений в структуре вашего кода, а именно:* Создание скрытого шаблона, из которого будут клонированы все видимые клоны.* Получение кнопок добавления / удаления, работающих как нужно* Добавлено скрытое поле, которое содержит количество предметов* Добавление большого количества кода в функции для повторного использования

<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>
...