Question

在表单上，客户可以创建多个组。每个组都有相同的输入字段。如果客户点击'+ Additional Group'，那么将通过jQuery动态创建另一个组（通过AJAX调用下载html）。

以下是示例html。每个ul标记都是一个组。在组ul中，每个输入字段包括组号字段。像这样：foo_1，foo_2

current_group是一个隐藏字段，用于跟踪组的总数。

如果点击了add_group按钮，jQuery将从current_group获得组的总数，然后动态地获得其他组。

这是怎么做的？

此外，如果客户在完成表单时单击“提交”按钮 - 由于通过PHP进行错误验证，它可能会返回到同一页面。我不想再次失去动态html组。怎么解决这个问题？

<h2> Group One </h2>
<ul class="Form">
    <li>
        <label>Foo</label>
        <select name='foo_1'>
                <option value='1'>One</option>
                <option value='2'>Two</option>
                <option value='3'>Three</option>
        </select>
    </li>
   <li>
        <label>Bar</label>
        <select name='bar_1'>
                <option value='car'>Car</option>
                <option value='bike'>Bike</option>
                <option value='van'>Van</option>
        </select>
    </li>
<ul>

<h2> Group Two </h2>
<ul class="Form">
    <li>
        <label>Foo</label>
        <select name='foo_2'>
                <option value='1'>One</option>
                <option value='2'>Two</option>
                <option value='3'>Three</option>
        </select>
    </li>
   <li>
        <label>Bar</label>
        <select name='bar_2'>
                <option value='car'>Car</option>
                <option value='bike'>Bike</option>
                <option value='van'>Van</option>
        </select>
    </li>
<ul>

<input type='hidden' id='current_group' value='2' />
<input type='button' id='add_group' value='+ Additional Group' />

Answer 1

有几种方法可以做一件事。这是你的逻辑。如果没有错误，它应该工作。

每当您提取显示新组时，请保留名为group_ids[]的隐藏字段您将收到数组中的所有组ID。您可以从$ _REQUEST ['group_ids']访问该数组（您可以根据您的代码使用$ _POST或$ _GET）

现在，无论何时提交页面，都要检查用户提交的组ID。您也可以收到下拉值。如果您需要再次显示这些组，可以使用$_REQUEST['group_ids']从数据库中获取这些组，并通过比较用户所选值的当前值来保持选择正确的选项。

Answer 2

如果第一组HTML元素已经存在，那么你总是可以使用jQuery的clone()来复制元素而不是调用服务器。您需要找到元素并替换您所谈论的名称。

jQuery(".Form").clone().find("select").eq(0).prop("name", "foo_" + count).end().eq(1).prop("name", "bar_" + count).end().end().appendTo("#someElem");

以更易读的格式

var count = 1;
function addRow(){
    count++;
    var newFormElems = jQuery(".Form").clone();  //clone the form
    var selects = newFormElems.find("select");  //find the selects
    selects.eq(0).prop("name", "foo_" + count);  //rename first
    selects.eq(1).prop("name", "bar_" + count);  //rename second
    newFormElems.appendTo("#someElem");   //add to the page
}

重做命名函数的另一种方法是增加数字：

newFormElems.find("select").each( 
    function(){        
        this.name = this.name.replace(/^([^_]+_)(\d+)/, function(match,str,num){ return str + (parseInt(num,10)+1)});
    }
);

处理动态表单的最佳方法是什么？那么你可以用Ajax提交数据，或者在验证后你有php代码写出来。

动态创建多个组

2 个答案: