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.