Javascript innerHTML

[Zaub]

I need some help with a script I'm using.

I have a working script at the moment where I have a file field and you click the link and it adds more file options.

But if I have already selected a file in the field and click Add More it removes the currently selected file.

Here is the code:


<div id="addmoreimages">
<input name="ufile[]" type="file" id="ufile[]" size="50" /><br>
</div>

<script type="text/javascript">
function add_more_images(){
document.getElementById('addmoreimages').innerHTML = document.getElementById('addmoreimages').innerHTML + '<input name="ufile[]" type="file" id="ufile[]" size="50" /><br>';
}
</script>

<a href="javascript:add_more_images()">Add more images</a>

+REP for any help.

Thanks,
Chris.

[Agnostic Bear]

First result on google for "append innerhtml"


<div id="addmoreimages">
<input name="ufile[]" type="file" id="ufile[]" size="50" /><br>
</div>

<script type="text/javascript">
function add_more_images(){
var mydiv = document.getElementById('addmoreimages');
var div = document.createElement("div");
div.innerHTML = '<input name="ufile[]" type="file" id="ufile[]" size="50" /><br>';

while (div.firstChild) {
mydiv.appendChild(div.firstChild);
}
}
</script>

<a href="javascript:add_more_images()">Add more images</a>

[Zaub]

First result on google for "append innerhtml"


<div id="addmoreimages">
<input name="ufile[]" type="file" id="ufile[]" size="50" /><br>
</div>

<script type="text/javascript">
function add_more_images(){
var mydiv = document.getElementById('addmoreimages');
var div = document.createElement("div");
div.innerHTML = '<input name="ufile[]" type="file" id="ufile[]" size="50" /><br>';

while (div.firstChild) {
mydiv.appendChild(div.firstChild);
}
}
</script>

<a href="javascript:add_more_images()">Add more images</a>

Cheers.

[Dentafrice]

Just to let you know the reason why it was doing that.

You was "selecting" a file, and having it already selected, then adding a new field.

So what happened was it took that old field, completely erased it, and added it to the HTML with the new field.