将新输入字段添加到列表时重置 HTML 输入字段 [重复]答案

【问题标题】：HTML input fields resetting when adding new input fields to list [duplicate]将新输入字段添加到列表时重置 HTML 输入字段 [重复]
【发布时间】：2015-08-11 14:17:55
【问题描述】：

我正在处理一个表单并且遇到了一些问题。

我有一个输入字段，当更改为更高或更低的数字时，它会添加/删除额外的字段，但是如果在其中一个额外的字段中输入一些内容并添加一个额外的字段，它会删除应该保存值的所有值

js:

var eh = document.getElementById('ulId');//list to add list items to
var ac = document.getElementById('inputId');

var defaultId = "xin";

//x is short extra
var anyXFields = false;
var XF = 0;//extra fields
var lastXField = 0;
var mostFields = 0;
var index = [];


function hideInputFields(n) {

    if (lastXField < n) {
        return;
    }else if(lastXField > n) {
        $("#xin" + lastXField).hide();
    }
}


//on change function
function oc() {

    n = ac.value;
    n = parseInt(n);

    lastXField = n - 1;

    if (n > 0) {

        if (anyXFields) {
            hideInputFields(n - 2);
        }

        for (i = 0; i < (n - 1); i++) {
            if (i < mostFields) {
                $("#xin" + i).show();
            } else if (!index[i]) {
                eh.innerHTML += '<li id="'+(defaultId + i)+'"><label>Højde' + (i + 2) +' <label class="sub">Height' + (i + 2) +'</label></label><input name="'+(defaultId + i)+'" class="inputfield"></li>';
                index[i] = 1;
            }
        }

        if (mostFields < (n - 1)) {
            mostFields = n - 1;
        }

        anyXFields = true;
    }

}

【问题讨论】：

你也应该分享你的html代码，如果它只是javascript和html，请提供一个jsfiddle或类似的东西

标签： javascript html

【解决方案1】：

您正在使用 innerHTML 创建列表元素。每次运行 oc() 时，所有列表项都会从 oc() 中的预定义字符串重新生成，您输入到输入元素中的数据不会保存到该字符串中，因此它们会丢失。

实现您想要实现的目标的解决方案/更好的方法是使用 for 循环创建列表项，并且只删除“额外”输入元素，而不是在更改时重新制作所有元素。

【讨论】：

【解决方案2】：

如果您尝试追加到列表并删除，您可以在 jquery 中使用 .appendTo(...) 或 .remove 而不是使用内部 html。

【讨论】：