Adding input box with JS

Hello,

Im trying to add a script to add input boxes by clicking on a link. So far it works but there's one small problem wich is that when you add a new input box by clicking on the link it reset's the rest of the input boxes. The box type is file this is the script im using:

document.getElementById("imageBoxes").innerHTML += "<tr><td>Image:<td><td><input type='file' name='image[]' style='width: 450px;'></td></tr>";

EDIT:

Screenshot

If this isnt clear enough please tell and ill post extra information. Thanks in advance.

Also:

When i var_dump() the $_FILES variable it doesnt show anything if i upload multiple files.. How can i make this work.

whenever you alter the innerHTML of an object, the browser will reset the entier object html (and you would lose and dom refrence as well). You should add the tr, td using document.createElement(tag) and object.appendChild(child)

Ooo right, i didnt know this.. iv never really made anything using JS but ill look into those 2 methods, thanks..

Would you also know why it doesnt recieve any information in the $_FILES array?

whenever you alter the innerHTML of an object, the browser will reset the entier object html (and you would lose and dom refrence as well). You should add the tr, td using document.createElement(tag) and object.appendChild(child)

This isn't the case here, as he's using the append operator "+=" and not the standard assignment operator "=".

The file inputs shown in the screen-shot are obviously not standard and have something running in the background to provide that behaviour. I think the problem here is down to another script running on the page; perhaps when you add another input it's reset or something?

What code are you using?

I'm not sure in which order the OP started his current threads in this forum, but to keep any existing input field values you must create a new element and use appendChild() in order to prevent the contents of any existing input field from being cleared.

Writting to the innerHTML - document.getElementById("imageBoxes").innerHTML - does create the input field but because it is rewriting the HTML each time you add a field, any values that have been entered into the fields are lost because they are not part of the innerHTML.

Of course