Дублирование/Клонирование Нескольких Полей Формы

Question

Дублирование/Клонирование Нескольких Полей Формы

Не уверен, как это назвать, но я работаю над формой, в которой запрашивается информация о продукте (название, описание, цвет, характеристики и т.д.), Но я хотел бы предоставить пользователям возможность добавлять дополнительные продукты, нажав на ссылку. Они могли бы добавить столько продуктов, сколько им нужно. После того, как они закончат вводить информацию, они могут щелкнуть ссылку, в которой указано "Add another product" или что-то подобное, и форма предоставит им целый набор новых полей, которые они могли бы заполнить. С помощью одной и той же формы страница будет увеличиваться по мере добавления товаров и будет частью одной и той же формы (вместо того, чтобы отправлять форму снова и снова для каждого продукта).

Надеюсь, я правильно понимаю, кто-нибудь знает, что это за термин, или у вас есть какие-либо рекомендации по плагину, который мог бы сделать что-то подобное? Магические поля могут это делать, но на внутреннем уровне, а не на внешнем.

enter image description here

2

forms plugin-magic-fields

Author: kaiser, 2013-03-17

Source

1 answers

score 1 · Accepted Answer

Вместо того, чтобы искать плагин, я нашел фрагмент кода, который решает мою проблему, к сожалению, потому что я не использую плагин, этот пост не относится к WordPress и не по теме. Для тех из вас, кому интересно, код, который я использую, находится по адресу: http://charlie.griefer.com/blog/2009/09/17/jquery-dynamically-adding-form-elements/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

    <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', 'name' + newNum);
                $('#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>
</head>

    <body>
        <form id="myForm">
            <div id="input1" class="clonedInput">
                Name: <input type="text" name="name1" id="name1" />
            </div>

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