1

我需要制作一个表格，管理部门的人员可以在其中添加客户信息。在第一个表单页面上，可以输入客户姓名、地址和联系方式等信息，以及客户是否有孩子。

表单由 PHP 验证。如果客户端没有孩子，则将数据保存到数据库中。如果客户端确实有孩子，表单数据将保存在隐藏的表单字段中，并显示第二个表单页面，其中最多可以添加 10 个孩子。

但是，在初始页面视图中，只有一个文本输入可见。使用 javascript 按钮，可以动态添加更多文本输入字段（直到达到 10 个限制）。

问题是 PHP 中的验证。如果其中一个文本输入包含无效字符串，则应重新显示表单，其中包含正确数量的字段，并且在特殊 HTML 类中包含错误的那些（在 CSS 中，出于可用性原因，我给该类一个红色边框，因此用户可以立即看到错误所在的位置）。但是，由于添加字段是使用 Javascript 进行的，因此表单会重新显示，只有一个字段。

任何关于如何解决这个问题的想法都非常受欢迎。我精通 PHP，但 JavaScript 对我来说很新，所以我无法对我发现的动态添加字段的脚本进行重大更改。

4

1 回答 1

0

我过去处理过类似的事情。我想到了几个选项。

既然您有 JS 代码可以在单击按钮时生成新字段，为什么不扩展该 JS 函数以便也可以通过传递一些参数来调用它。如果有参数，它将使用现有数据填充字段。

然后，如果由于错误而重新显示表单，或者从 PHP 进行编辑，则将一些信息传递给 Javascript，以便在页面加载时创建字段并用数据填充它们。

为了说明，我假设你有这样的东西：

<a href="#" onclick="addNewFormField(); return false">Add Another Child</a>

你有这个功能：

function addNewFormField() {
    // create new HTML element to contain the field
    // create new input, append to element container
    // add container to DOM
}

改变它，使它像这样：

function addNewFormField(data) {
    // create new HTML element to contain the field
    // create new input, append to element container
    // add container to DOM

    if (data != undefined) {
        newFormElement.value = data.value;
        newContainerElement.class = 'error';
    }
}

在 PHP 中，添加一些运行 onload 的代码：

<script type="text/javascript">
window.onload = function() {  // replace me with jQuery ready() or something proper
    <?php foreach($childInList as $child): ?>
        addNewFormField({ value: '<?php echo $child['name'] ?>' });
    <?php endforeach; ?>
}
</script>

希望对您有所帮助，这是一个高级示例，但不知道您的表单是如何工作的，但我过去曾使用过类似的方法来使用来自服务器端的数据重新填充 JS 创建的字段。

编辑：您可以使用的另一种方法是在 PHP 端创建 HTML 元素并从那里预填充它们，但这可能会导致重复代码、从 JS 生成 HTML 和从 PHP 生成相同内容的 HTML。只要 JS 端足够聪明，可以识别 PHP 添加的初始字段，您就可以使用最容易实现的任何内容。就个人而言，我只是扩展您的 JS 代码来处理可选数据，如上图所示。

于 2012-07-26T22:49:15.630 回答