Dynamically Adding More Form Fields

[hybrid kill3r]

I am creating an image uploading system using PHP and MySQL. I want the user to be able to upload more than one image at a time. So the system I want is that once the user chooses a photo, he can then decide to add an additional photo by clicking a submit button to add another file input field. I found a script online and it works, but there's only one problem. When it adds the extra field, it duplicates the value of the first field. How would I manipulate this so that the button adds another file input but with no value while still maintaining the value(s) of the previously added files?

function moreFields() {	counter++;	var newFields = document.getElementById('readroot').cloneNode(true);	newFields.id = '';	newFields.style.display = 'block';	var newField = newFields.childNodes;	for (var i=0;i<newField.length;i++) {		var theName = newField[i].name		if (theName)			newField[i].name = theName + counter;	}	var insertHere = document.getElementById('writeroot');	insertHere.parentNode.insertBefore(newFields,insertHere);}

[[dx]]

Try to get last row, and set values to '' for it's elements.

[jeffman]

You can almost do what Haris S suggests right in your for loop. You'll just want a simple test so you don't wipe out the value of any other elements you're looping through. This should do it:

if (newField[i].type && newField[i].type == "file") {	newField[i].value = "";}

[hybrid kill3r]

I tried that and it didn't really do anything.

[jeffman]

What browser? I didn't test it everywhere, but it works on Firefox. The new file input comes up blank.How much stuff are you cloning, anyway? Would it be simpler just to create new elements?