调整动态形式以处理多个部分答案

【问题标题】：adjusting dynamic form to work with multiple sections调整动态形式以处理多个部分
【发布时间】：2011-09-04 09:45:00
【问题描述】：

我有一个脚本可以动态地将行添加到具有默认值的表单中：

        $(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 个部分，每个部分都可以动态添加行。第二部分只有姓名和电子邮件的空格，因此在添加任何其他行之前，整个表单看起来像这样：

但我不确定如何实现这一点。要么我会使用单独的脚本创建一个单独的表单，然后需要知道如何将两个表单中的信息一起提交，或者我只有一个表单，但随后需要弄清楚如何将行动态添加到每个部分.

有人可以帮忙吗？

谢谢，

尼克

【问题讨论】：

标签： javascript forms dynamic add

【解决方案1】：

我已经在fully functional example here 中实现了这一点。

我稍微清理了您的代码，但基本相同。主要的补充是我将输入包装在fieldset 元素中（您也可以使用div，但fieldset 是用于对相关输入字段进行分组的语义正确元素）。您的 4 输入部分位于一个 fieldset 中，您的 2 输入部分位于另一个； “添加人员”处理程序查找父 fieldset，克隆第一个孩子，并将其添加到该字段集中。方便的是，在您的用例中，第一个 fieldset 的默认值与第二个 fieldset 的默认值相同，但设置多组默认值并将它们传递给 setDefaults 函数很容易。

对代码的其他一些更改：

我将您的 setDefaults 函数拆分为两个不同的函数，setDefaults 和 removeDefaults - 将它们设为一个函数并没有获得任何好处，拆分它们使代码更清晰。
我使用.delegate 分配“删除”处理程序 - 否则“删除”按钮将无法用于新的输入集。我还使用 jQuery 创建了“删除”按钮，而不是克隆它，因为我认为将它包含在第一个输入集是没有意义的。
我在几个使用原始 Javascript 的地方使用了 jQuery（例如获取和设置输入值）。我通常认为 jQuery 对于跨浏览器的 DOM 访问和操作更可靠，所以如果你已经在加载库，那么除了最简单的 DOM 函数之外，几乎没有任何一点不使用它。 p>
我删除了您的 .data 调用，因为您可以通过检查类获得相同的信息，而且通常最好降低复杂性。 .hasClass('test') 可能比 .data('test') 稍微慢一点，但我认为这不会有什么不同。

【讨论】：

感谢您非常有启发性和帮助的回答。正是我想要的。尼克

【解决方案2】：

创建一个表单。在里面放两个div。让您的脚本将表单元素添加/删除到适当的 div。

当您提交表单时，它应该自动提交两个 div 中的所有表单元素，因为 div 包含在表单中。

【讨论】：