Jump to content

Dynamically Adding More Form Fields


hybrid kill3r
 Share

Recommended Posts

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);}

Link to comment
Share on other sites

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 = "";}

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...