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

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>

omacha · Accepted Answer · 2015-10-08 19:21:14Z

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);
}

N.B. please indent your code in a somewhat logical manner.

answered Oct 8, 2015 at 19:21

omacha

1059 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

anshabhi Over a year ago

Ah yeah.. I will take care of note from next time!

PhilVarg · Accepted Answer · 2015-10-08 19:23:53Z

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'))

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related