настройка динамической формы для работы с несколькими разделами

Question

У меня есть скрипт, который динамически добавляет строки в форму со значениями по умолчанию:

        $(document).ready(function() {
        var defaults = {
    'name[]':           'Name',
    'email[]':          'Email',
    'organisation[]':   'Organisation',
    'position[]':       'Position'
};

var setDefaults = function(inputElements, removeDefault)
{
    $(inputElements).each(function() {
        if (removeDefault)
        {
           if ($(this).data('isDefault'))
           {
            $(this).val('')
                   .removeData('isDefault')
                   .removeClass('default_value');
           }
        }
        else
        {
            var d = defaults[this.name];
            if (d && d.length) 
            {
                this.value = d;
                $(this).data('isDefault', true)
                       .addClass('default_value');
            }
        }
    });
};

setDefaults(jQuery('form[name=booking] input'));

$(".add").click(function() {
                var x = $("form > p:first-child").clone(true).insertBefore("form > p:last-child");
    setDefaults(x.find('input'));

                return false;
            });

            $(".remove").click(function() {
                $(this).parent().remove();
            });

// Toggles 
$('form[name=booking]').delegate('input', {
    'focus': function() {
       setDefaults(this, true);
    },
    'blur': function() {
       if (!this.value.length)    setDefaults(this);
    }
});
 });

Для следующей формы:

<form method="post" name="booking" action="bookingengine.php">
                <p><input type="text" name="name[]">
                 <input type="text" name="email[]">
                <input type="text" name="organisation[]">
                <input type="text" name="position[]">
                <span class="remove">Remove</span></p>

                <p><span class="add">Add person</span><br /><br /><input type="submit" name="submit" id="submit" value="Submit" class="submit-button" /></p>

</form>

Теперь я хотел бы разбить форму на2 раздела, каждый из которых может иметь динамически добавленные строки.Во втором разделе будут только пробелы для имени и адреса электронной почты, поэтому форма в целом, перед добавлением каких-либо дополнительных строк, будет выглядеть примерно так:

Но яЯ не уверен, как этого добиться.Либо я бы создал отдельную форму с отдельным сценарием, а затем мне нужно было бы знать, как отправить информацию из обеих форм вместе, либо у меня была бы только одна форма, но затем нужно было бы решить, как динамически добавлять строки в каждый раздел.

Может ли кто-нибудь помочь с этим?

Спасибо,

Ник

Answer 1

Я реализовал это в полнофункциональном примере здесь .

Я немного почистил ваш код, но в основном он такой же.Основным дополнением является то, что я обернул входные данные в элемент fieldset (вы также можете использовать div, но fieldset - это семантически правильный элемент для группировки связанных полей ввода).Ваш раздел с четырьмя входами живет в одном fieldset, а ваш раздел с двумя входами живет в другом;обработчик «Добавить персона» ищет родителя fieldset, клонирует первого потомка и добавляет его в этот набор полей.Удобно, что в вашем случае использования значения по умолчанию для первого fieldset такие же, как для второго fieldset, но было бы достаточно легко установить несколько наборов значений по умолчанию и передать их в функцию setDefaults.

Несколько других изменений в коде:

• Я разделил вашу функцию setDefaults на две разные функции, setDefaults и removeDefaults - вы не получаличто-нибудь, сделав их единственной функцией, и разделение их делает код более разборчивым.

• Я использовал .delegate, чтобы назначить обработчик «Удалить» - иначе кнопка «Удалить» не будетт работать для новых входных наборов.Я также создал кнопку «Удалить» с помощью jQuery, а не клонировал ее, поскольку предполагал, что не имеет смысла включать ее для первого набора ввода.

• Я использовал jQueryв нескольких местах, где вы использовали необработанный Javascript (например, получение и установка входных значений).Обычно я предполагаю, что jQuery более надежен для кросс-браузерного доступа к DOM и манипулирования им, поэтому, если вы уже загружаете библиотеку, редко есть какая-либо точка не , использующая ее для всех, кроме самых простых функций DOM.

• Я удалил ваши .data вызовы, так как вы можете получить ту же информацию, проверив класс, и, как правило, лучше уменьшить сложность.Возможно, что .hasClass('test') немного медленнее, чем .data('test'), но я не думаю, что здесь что-то изменится.

Answer 2

Создать одну форму.Поместите два div внутри него.Ваш скрипт должен добавить / удалить элементы формы в соответствующий div.

Когда вы отправляете форму, она должна автоматически отправлять все элементы формы в обоих div, поскольку div содержатся в форме.