Adding new element to a div removes the current values

Question

So I have a js function :

function addNewUpload()
{
    if(formNumber == 1){
        displayRemove();
    }

    if(formNumber != 10){
        var html = " <div id='u_"+(formNumber+1)+"' > ";
        //html += " description : <input type='text' name='desc[]' /> <br> ";
        html += " photo : <input type='file' name='file[]' />   ";
        html += " </div> ";
        document.getElementById('uploadHolder').innerHTML += html;

        formNumber = formNumber + 1;
    } else {
        alert("You can only upload 10 photos.");
    }                                                                               
}

it works fine except that it removes the values from the fields that were already added using this function. How can I stop it from doing so?

probalby shouldn't use innerHTML for this. Use things like `var d = document.createElement("div")` and `document.getElementById('uploadHolder').appendChild(d)` — Joseph Marikle, Nov 03 '11 at 16:56
@RobW Sorry. Was building a demo and posted my answer before I saw your message. XD — Joseph Marikle, Nov 03 '11 at 17:04

score 4 · Accepted Answer · edited Nov 03 '11 at 17:11

You should be using DOM methods like appendChild and createNewElement etc.

Try something along these lines:

http://jsfiddle.net/9YHs8/ (in this example, "file" for type was changed to text for demo purposes).

function addNewUpload()
{
    if(formNumber == 1){
        displayRemove();
    }

    if(formNumber != 10){
        var d = document.createElement("div");
        d.id = "u_" + formNumber;
        var i = document.createElement("input");
        i.type = "file";
        i.name = "file[]";
        d.appendChild(document.createTextNode(" photo : "));
        d.appendChild(i);
        document.getElementById('uploadHolder').appendChild(d);

        formNumber++;
    } else {
        alert("You can only upload 10 photos.");
    }                                                                               
}

@AhouraGhotbi You're welcome. :) glad to help. (and thanks to Rob for amending my code) — Joseph Marikle, Nov 03 '11 at 17:49

score 0 · Answer 2 · edited May 23 '17 at 12:21

0

It's normal

You say "take the innerhtml of my block add some content to it and then reinitialize the inner html of my block with this string"

The form's value are not in the innerhtml !

Look at this thread : Inserting HTML elements with JavaScript

edited May 23 '17 at 12:21

Community

1
1

answered Nov 03 '11 at 17:00

remi bourgarel

9,231
4
40
73

Adding new element to a div removes the current values

2 Answers2