动态添加字段并使用错误填充数据重新填充所有字段

Question

我的项目使用 Code Igniter，我的 CSS 使用 Bootstrap

我有一个带有输入的表单，它被捕获为一个数组。 要求用户给出一些分数。用户可以点击“添加更多”来添加更多点。需要时使用 Java Script 将更多字段添加到表单中。

我的 PHP 代码是

<div class="form-group multi_form_group">
    <label class="col-md-2 control-label" for="points">Points</label>
    <div class="col-md-8">
        <?php 
        echo form_input (array(
            'id'=>'points',
            'name'=>'points[]',
            'class'=>'form-control',
            'value'=>set_value('points[]')
        ));
        ?>
    </div>
    <div class="col-md-offset-2 col-md-8">
        <a id="add_points">Add More</a>
    </div>
</div>

我的 Javascript 是

$('#add_points').on('click', function() {
        $(this).parent().before('<div class="col-md-offset-2 col-md-8"> <div class="has-feedback"> <label class="control-label sr-only">Another Point</label> <input id="point" name="points[]" class="form-control"> <span class="glyphicon glyphicon-remove form-control-feedback anchor margin-0-5" id="remove_input"></span> </div> </div>');
    });

一切正常，我能够在数组中捕获信息。如果表单有错误，我想用现有详细信息重新填充字段，同时显示错误。我正在使用 codeigniter form helper 'set_value' 函数。

但是，对于这些数组字段，当再次显示错误的表单时，我无法识别点数组中的项目数。因此，只有第一个字段填充了原始数据，所有其他由 javascript 添加的字段都被删除。任何人都可以帮助解决这个问题。

如果我无法正确解释，我很抱歉，但如果您需要更多详细信息，请告诉我。

Answer 1

由于我没有足够的声誉来发表评论，所以我将评论作为答案，但无论如何它更像是一个建议。

由于我很快就会遇到相同类型的问题，因此我想出了一种方法来解决这个问题，因为我的页面不使用 PHP。

有一个很酷的简洁功能叫做 localStorage。

 localStorage.myValues = JSON.stringify(myValues);
localStorage.fieldCount = JSON.stringify(fieldCount);
//where myValues are values which you've entered and fieldCount is how many
//text fields were dynamically created

显示错误后，您可以从 localStorage 加载这些值：

var myValues = localStorage.getItem("myValues") ? JSON.parse(localStorage.getItem("myValues")) : [];
var fieldCount = localStorage.getItem("fieldCount") ? JSON.parse(localStorage.getItem("fieldCOunt")) : [];

并重新创建字段数量并使用来自 myValues 的数据填充它们。

编辑：

function createTFields(amount,divName){ //divname is a parent element
        for (var i = 0; i<amount;i++){
            var newDiv = document.createElement('tr');
            newDiv.innerHTML = "<td><input type='text' name='textfield' class='field'> </td>" //assuming it's in some kind of table, remove td in case of not in table
            document.getElementById(divName).appendChild(newDiv);
        }

}