我需要制作一个表格，管理部门的人员可以在其中添加客户信息。在第一个表单页面上，可以输入客户姓名、地址和联系方式等信息，以及客户是否有子女。
该表单通过PHP进行验证。如果客户端没有子级，则数据将保存到数据库中。如果客户端确实有子级，则表单数据将保存在隐藏的表单字段中，并显示第二个表单页面，其中最多可以添加10个子级和。
但是，在初始页面视图中，只有一个文本输入可见。使用javascript按钮，可以动态添加更多的文本输入字段（直到达到10的限制）。
问题在于PHP中的验证。如果其中一个文本输入包含无效字符串，则表单应重新显示正确数量的字段，以及那些在特殊HTML类中包含错误的字段（在CSS中，出于可用性原因，我为该类提供了一个红色边框，这样用户就可以立即看到错误所在的位置）。然而，由于添加字段是在Javascript中进行的，因此表单只会重新显示一个字段。
任何关于如何解决这个问题的想法都是非常受欢迎的。我精通PHP，但JavaScript对我来说是非常新的，所以我无法对我发现的动态添加字段的脚本进行重大更改。
我过去也处理过类似的事情。我想到了几个选择。
既然你有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中，添加一些在加载时运行的代码：
<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创建的字段。
EDIT：你可以使用的另一种方法是在PHP端创建HTML元素，并从那里预先填充它们，但这可能会导致重复的代码，从JS生成HTML，从PHP生成相同内容的HTML。只要JS端足够聪明，能够识别PHP添加的初始字段，就可以使用最容易实现的方法。就我个人而言，我只想扩展您的JS代码来处理如上所示的可选数据。