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

enter image description here

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

有人可以帮忙吗？

谢谢，

尼克

Answer 1

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

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

对代码进行了一些其他更改：

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

Answer 2

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

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

调整动态表单以使用多个部分

2 个答案: