0

在表单上，​​客户可以创建多个组。每个组都有相同的输入字段。如果客户单击“+ 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' />
4

2 回答 2

1

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

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

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

于 2012-05-12T11:56:16.040 回答
1

好吧，如果第一组 HTML 元素已经存在，您总是可以使用 jQueryclone()来复制元素，而不是调用服务器。您需要找到元素并替换您所说的名称。

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 代码写出表单。

于 2012-05-12T11:57:03.360 回答