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形式的帮助'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);
        }

}

动态添加字段并使用错误

1 个答案: