Question

我有以下需要复制的代码：

<form method="post">
<div id="field-row-container">
    <div id="field-row-1" class="field-row">
        <div class="field-element">
            <label for="Name[1]">Name</label>
            <input type="text" id="Name[1]" name="Name[]" />
        </div>
        <div class="field-element">
            <label for="Email[1]">Email</label>
            <input type="text" id="Email[1]" name="Email[]" />
        </div>
        <hr/>
    </div>
</div>
<div class="form-element">
    <input type="button" class="confirm add-field-row" value="Add" />
    <input type="button" class="danger delete-field-row" value="Delete" />
    <input type="submit" />
</div>

重复/动态添加的元素将具有相同的Name[]和Email[]名称，但它们的ID将增加。

以下是JavaScript，基于Josiah Ruddell's form duplication script。

var template = $('#field-row-container #field-row-1').clone();
window.addForm = function () {
        var parent = $(this).closest('.dynamic-rows').attr('id');
    var fieldRowCount = countRows(parent) + 1;
    var newFieldRow = template.clone().find(':input').each(function () {
        var newId = this.id.substring(0, this.id.length - 3) + "[" + fieldRowCount + "]";

        $(this).prev().attr('for', newId); // update label for
        this.id = newId; // update id and name (assume the same)
        $(this).closest('.field-row').addClass('new-row');
    }).end()
        .attr('id', 'field-row-' + fieldRowCount)
        .appendTo('#field-row-container');
}
$('.add-field-row').click(addForm);

每当我将表单提交给CodeIgniter并且如果存在验证错误，一旦控制器重新加载多部分表单，动态添加的元素以及初始字段中的值将消失。

如何解决此问题？我对如何解决这个问题感到茫然...

其他可能有用的说明：

这是一个只包含一个表单控件的组件多部分表单
我有多个这样的实例 - 地址，教育学位等
我使用CodeIgniter的form_validation库检查服务器端的每个帖子数组

Answer 1

如果在验证失败后控制器重定向到重新加载后，表单上有重新加载的页面，它将只重新加载原始页面，而不应用DOM操作。

我会执行POST请求，通过ajax提交表单，这样您就可以在不离开页面的情况下处理响应。像这样：

$.post('/locationOfController.php', $('#yourForm').serialize(), function(response){
  if(response.valid){
    window.location.href = '/somewhereAfterFormPosted.php';
  } else {
    $('#yourForm').append("<p>"+response.error+"</p>");
  }
}, 'json');

并根据验证是否通过更改控制器以返回JSON对象。为了与上面的示例相匹配，当发生错误时，您将返回类似下面的内容：

{valid: false, error: 'Please fill out the whole form'}

尝试类似的东西作为基本的例子。您可以做更多事情，例如，如果多个字段无效，则返回多个错误。

动态复制的表单在CodeIgniter重新加载时消失

1 个答案: