动态重复的表单消失在CodeIgniter重新加载 [英] Dynamically duplicated forms disappear on CodeIgniter reload

问题描述

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

I have the following code that needs to be duplicated:

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

The duplicated / dynamically added elements will have the same names of Name[] and Email[] but their ID's will be incremented.

JavaScript在下面，基于 Josiah Ruddell的表单复制脚本

The JavaScript is below, based from 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时，如果有验证错误，一旦控制器重新加载多部分形式，动态添加的元素以及初始字段中的值都会消失。

Whenever I submit the form to CodeIgniter and if there is a validation error, once the controller reloads the multi-part form, the dynamically added elements disappear as well as the values in the initial fields.

如何解决这个问题？我如何解决这个问题...

How do I go around this problem? I'm at a loss on how to solve this...

其他注意事项可能有帮助：

Other notes that might help:

1. 这是一个只有一个表单控制器的组件多部分表单


2. 我有多个实例 - 地址，教育学位等


3. 我使用CodeIgniter的 form_validation 库来检查服务器端的每个数组。

1. This is a component multi-part form with only one form controller
2. I have multiple instances of this - Addresses, Education Degrees and such
3. I use CodeIgniter's form_validation library to check server-side each array of posts

推荐答案

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

When the page with the form on reloads after the controllers redirects back to it after failing validation, it will only reload the original page, with no DOM manipulations applied.

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

I would perform the POST request which submits the form via ajax, so you can handle the response without leaving the page. Something like this:

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

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

and change the controller to return a JSON object based on whether validation passed or not. To match up with my example above, you would return something like below when an error occurs:

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

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

Try something like that as a basic example. You could do much more, such as returning several errors if multiple fields are invalid.

这篇关于动态重复的表单消失在CodeIgniter重新加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！