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

Question

This is what my program's body looks like:

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

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

And on clicking the above

The following function is executed:

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

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

Where next is the id of new input field. In this case, since 0 already exists so value of next is 1. One problem that I am encountering with this is that after adding a new input field, the values in all existing input fields are lost. How to save these values? My attempt is to place this code in function add():

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

But this does not works..

  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

You may want to dynamically add elements to your DOM tree like so

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

The problem with what you're doing is that when you write inside an input field, the changes are not represented in the HTML code, only in the memory of the browser. Thus if you add text through to code to form.innerHTML , the browser is going to reinterpret the text inside the form which will be

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

and this will result in two empty input of type text being displayed.

Edit: you can then add your id tag via

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

NB please indent your code in a somewhat logical manner.

Answer 2

The reason this is happening is that the dom, or more specifically inputArea 's innerHtml doesnt get changed when you type into a form field. And what youre doing is resetting the innerHTML with a blank input BEFORE youre capturing the values.

so whats going on is you have HTML like this:

<input id='0' />

then type into the form so that it behaves like:

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

but thats not what the innerHTML actual is. its still <input id='0' /> because the value is kept in memory not on the dom.

if you want to add new elements to the form, you need to use appendChild instead

so convert

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

to

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