adding input file tag programmatically using js

Question

I want to add input (type file) field to my html using js. I've got it done, but the problem is when the user chooses a file then clicks on the "new file" button to choose another one, The prevoius choosen file goes away and says no file chosen. what is the problem?

function newfile(){
    var divv=document.getElementById("files");
    var name="files"+divv.childNodes.length;
    divv.innerHTML+='<div><input id="'+name+'" name="'+name+'" type="file" accept="*" class="col-lg-11 col-md-10 col-sm-10 col-sx-6"></div>';
}

<div class="col-sm-10">
<div id="files"></div>
<a class="btn btn-primary col-sx-12" onclick="newfile()">New file</a>
</div>

You need to use appendChild() instead of innerhtml

R.K.Saini
– R.K.Saini

2017-08-03 04:58:28 +00:00
Commented Aug 3, 2017 at 4:58 — R.K.Saini
– R.K.Saini, Commented Aug 3, 2017 at 4:58

Dij · Accepted Answer · 2017-08-03 04:58:26Z

1

This happens because everytime you use divv.innerHTML+='<div><input id="'+name+'" name="'+name+'" type="file" accept="*" class="col-lg-11 col-md-10 col-sm-10 col-sx-6"></div>' all contents in divv are replaced with new contents and the previous information is lost. you can use appendChild() here, something like this:

function newfile(){
var divv=document.getElementById("files");
var name="files"+divv.childNodes.length;
var inputNode = document.createElement("input");
inputNode.id = name;
inputNode.name = name;
inputNode.type = 'file';
divv.appendChild(inputNode);
}

<div class="col-sm-10">
<div id="files"></div>
<a class="btn btn-primary col-sx-12" onclick="newfile()">New file</a>
</div>

answered Aug 3, 2017 at 4:58

Dij

9,8184 gold badges21 silver badges35 bronze badges

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

Collectives™ on Stack Overflow

adding input file tag programmatically using js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related