add form element with javascript

[carsten888]

for an image gallery I have a button 'new image' which puts a new image-field in a form. After enter data in a field pressing it again will delete the data.

I have a div on the page. When the button is pressed it takes whatever html is in the div, adds the new field and writes it to the div. But the values of the new fields are not copied.

How to make this so I can add a field to a form without the content being lost?

outer HTML? nodes?

[whoisgregg]

The values in file upload form elements cannot be read by Javascript. :(

It's part of the browser security model that is supposed to keep users protected from malicious sites.

[carsten888]

[solved]
I put a hidden div on the page with the code which needed to be cloned and then used cloneNode(true) to create an istance of that and add it to the end of a target-div with appendChild(extra_code).

So values (of file-elements) remain, but anything with id's can't be used.
(So now I am struggling to read the array of images in PHP after submitting)

[carsten888]

"The values in file upload form elements cannot be read by Javascript. :( "
yes it can:
function check_extension(thisthing){
value = thisthing.value.toLowerCase();
pos_jpg = value.indexOf(".jpg");
pos_jpeg = value.indexOf(".jpeg");
pos_gif = value.indexOf(".gif");
if(pos_jpg==-1 && pos_jpeg==-1 && pos_gif==-1){
thisthing.value = '';
alert('wrong file-type. allowed are: gif, jpg and jpeg')
}
}

<input type="file" name="image[]" onchange="check_extension(this);" />