0

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

<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 将递增。

下面是基于Josiah Ruddell 的表单复制脚本的 JavaScript 。

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 并且出现验证错误时，一旦控制器重新加载多部分表单，动态添加的元素以及初始字段中的值就会消失。

我该如何解决这个问题？我不知道如何解决这个问题......

其他可能有帮助的说明：

  1. 这是一个只有一个表单控制器的组件多部分表单
  2. 我有多个这样的实例 - 地址、教育程度等
  3. 我使用 CodeIgniter 的form_validation库来检查服务器端的每个帖子数组
4

1 回答 1

0

当控制器在验证失败后重定向回表单后重新加载表单时，它只会重新加载原始页面，而不应用 DOM 操作。

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

$.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'}

尝试这样的事情作为一个基本的例子。您可以做更多事情，例如在多个字段无效时返回多个错误。

于 2013-02-10T12:33:50.910 回答