添加新输入字段时如何保存现有输入字段中的值？

Question

这是我的程序主体的样子：

<form id = "input">
<input id = "0" >
</form>

<p onclick = "add()"> Add Another</p>

点击上面的

执行以下功能：

 var inputArea = document.getElementById("input");
        next = 1;
    function add(){

        inputArea.innerHTML+= "  <input id = " + next+ ">" ;

接下来是新输入字段的id。在这种情况下，由于 0 已经存在，因此 next 的值为 1。我遇到的一个问题是，在添加新的输入字段后，所有现有输入字段中的值都将丢失。如何保存这些值？我的尝试是将这段代码放在函数 add():

中

    for (i=0;i<next;i++)
    {inputs[i] = document.getElementById(i);
    inputV[i]= inputs[i].value;
inputs[i].value = inputV[i];}

但这行不通..

      var inputArea = document.getElementById("input");
            next = 1;
        function add(){
            
            inputArea.innerHTML+= "  <input id = " + next+ ">" ;
       var inputs = new Array();
       var inputV = new Array();
       for (i=0;i<next;i++)
            {inputs[i] = document.getElementById(i);
            inputV[i]= inputs[i].value;
        inputs[i].value = inputV[i];}

        next++;
        }

<form id = "input">
        <input id = "0" >
        </form>
       
        <p onclick = "add()"> Add Another</p>

Answer 1

您可能希望像这样动态地将元素添加到您的 DOM 树中

function add() {
    var form = document.getElementById("input");
    var input = document.createElement("input");
    form.appendChild(input);
}

您正在做的事情的问题是，当您在 input 字段中写入时，更改不会在 HTML 代码中表示，仅在浏览器的内存中表示。因此，如果您通过代码将文本添加到 form.innerHTML，浏览器将重新解释表单中的文本，这将是

<input id="0"> <input id="1"> ...

这将导致显示两个空的 input 文本类型。

编辑：然后您可以通过

添加您的 ID 标签

function add() {
    var form = document.getElementById("input");
    var input = document.createElement("input");
    input.id = someValue;
    form.appendChild(input);
}

N.B。请以符合逻辑的方式缩进您的代码。

Answer 2

发生这种情况的原因是 dom，或者更具体地说，inputArea 的 innerHtml 在您输入表单域时没有改变。你正在做的是在捕获值之前用空白输入重置内部HTML。

所以你有这样的 HTML 是怎么回事：

<input id='0' />

然后在表格中输入，使其表现如下：

<input id='0' value='foo' />

但这不是内部HTML 的实际情况。它仍然是 <input id='0' /> 因为该值保存在内存中而不是 dom.

如果要向表单添加新元素，则需要使用appendChild代替

所以转换

inputArea.innerHTML+= "  <input id = " + next+ ">"

到

inputArea.appendChild(document.createElement('input'))

添加新输入字段时如何保存现有输入字段中的值？

How to save the values in existing input fields when adding a new one?

html

javascript

input

dynamic