Printing Values From Generated Form

[Kingy]

Hi guys,I am completely new to PHP and I need to get values from this page I'm working on. I've got this test upload page here where you can upload mp3 files and then they generate a new delete/edit option with the name each time in a list.(No file format restriction on this yet, working on that later)http://empulse.dmu.ac.uk/upload/Alternativ.../albupload.htmlJust in case the JavaScript is here:

function MultiSelector( list_target, max ){	// Where to write the list	this.list_target = list_target;	// How many elements?	this.count = 0;	// How many elements?	this.id = 0;	// Is there a maximum?	if( max ){		this.max = max;	} else {		this.max = -1;	};		/**	 * Add a new file input element	 */	this.addElement = function( element ){		// Make sure it's a file input element		if( element.tagName == 'INPUT' && element.type == 'file' ){			// Element name -- what number am I?			element.name = 'file_' + this.id++;				// Trying other elements TEST					element.year = 'Year_' +this.id;					element.genre = 'Genre' +this.id; // not outputted in test					element.other = 'Other' +this.id; // not outputted in test					element.desc = 'Description_' +this.id;					element.label = 'Label_' +this.id;								// Add reference to this object			element.multi_selector = this;			// What to do when a file is selected			element.onchange = function(){				// New file input				var new_element = document.createElement( 'input' );				new_element.type = 'file';				// Add new element				this.parentNode.insertBefore( new_element, this );				// Apply 'update' to element				this.multi_selector.addElement( new_element );				// Update list				this.multi_selector.addListRow( this );				// Hide this: we can't use display:none because Safari doesn't like it				this.style.position = 'absolute';				this.style.left = '-1000px';			};			// If we've reached maximum number, disable input element			if( this.max != -1 && this.count >= this.max ){				element.disabled = true;			};			// File element counter			this.count++;			// Most recent element			this.current_element = element;					} else {			// This can only be applied to file input elements!			alert( 'Error: not a file input element' );		};	};	/**	 * Add a new row to the list of files	 */	this.addListRow = function( element ){				// Row div		var new_row = document.createElement( 'div' );<!-- 	var new_row2 = document.createElement('div'); -->		// Delete button		var new_row_button = document.createElement('input');		new_row_button.type = 'button';		new_row_button.value = 'Delete';				//Edit button		var new_row_button2 = document.createElement('input');		new_row_button2.type = 'button';		new_row_button2.value = 'Edit';		new_row_button2.style.float = 'right';		// References		new_row.element = element;		<!-- new_row2.element = element; -->				// Delete function		new_row_button.onclick= function(){			// Remove element from form			this.parentNode.element.parentNode.removeChild( this.parentNode.element );			// Remove this row from the list			this.parentNode.parentNode.removeChild( this.parentNode );			// Decrement counter			this.parentNode.element.multi_selector.count--;			// Re-enable input element (if it's disabled)			this.parentNode.element.multi_selector.current_element.disabled = false;			// Appease Safari			//    without it Safari wants to reload the browser window			//    which nixes your already queued uploads			return false;			}						// Edit function				// Use this to summon dynamic form for each individual track details editting		new_row_button2.onclick= function(){			openbox('Edit details', 0);			document.getElementById("singletitle").value = element.value;			document.getElementById("ayear").value = element.year;			document.getElementById("adesc").value = element.desc;			document.getElementById("alabel").value = element.label;			return false;		};			// Set row value		new_row.innerHTML = element.value;		// Add button		new_row.appendChild(new_row_button2);		new_row.appendChild( new_row_button );				// Add it to the list		this.list_target.appendChild(new_row);				};};

I have this test.php file and I intend for it to write down all the values of each song + their details.

<?phpforeach($_POST as $key => $i){     print("$key=$i<br>"); }foreach($_FILES as $upfile)		{          print($upfile['name']."<br>");        } ?>

So far that prints out some values in the right format, however it only gives me the details of one track and a list of the file names like this:title=XXXX( album title)singletitle1=XXXXyear1=XXXXlable1=XXXXdescription1=XXXX.....XXXXX.mp3 (assuming it's mp3 file)XXXXX.mp3However what I need it to really do is output like this:title=XXXX( album title)singletitle1=XXXXyear1=XXXXlable1=XXXXdescription1=XXXX.....singletitle2=XXXXyear2=XXXX....XXXXX.mp3XXXXX.mp3Where am I going wrong here? o.oI've looked up a hundred tutorials but I'm still a bit foggy on this one.Thanks in advance guys!

[justsomeguy]

Your edit box is inside the form and contains all of the fields. So there's only one set of fields, whenever you click edit it shows the same div with the same set of fields and changes the values in them. Your edit box needs a save button on it first, and the save button needs to get all of the information in the fields and save it, probably inside the Javascript object for that item (the element variable). Then, when you submit the form, the submit handler needs to loop through all of the elements and add the other fields to the form prior to submitting, you can just use hidden inputs to add everything to the form without showing anything on screen.

[Kingy]

Yeah I know there's only one set of fields, I was hoping I could get around that without having to make a dozen hidden forms. :]I agree with the logic of having a save button there, there was a submit button there before but needless to say I didn't want that in the edit box.So would I need to make this button with not only javascript but PHP as well? Because I'm not sure where the details would save to.I just didn't want a load of hidden elements in there if possible.I think that PHP should be able to loop through all the elements as it's 'foreach'.The reason why I don't want a lot of hidden input elements on top of what I got is they haven't really defined a true file maximum, and they coulddecide to change that, so I just think a more flexible solution is a better idea in the longrun, just requires more work from me. Thanks very much for the help so far, it's becoming clearer.

[justsomeguy]

You have to use Javascript to get the information to PHP. The easiest way to do that would be to use Javascript to create a new set of hidden fields for each track, you don't need to write all of those out in HTML, just whenever they added a new track in addition to the file element you would also add the hidden ones.

[Kingy]

Hmm that's what I thought, and that's also what I -thought- I was doing. But evidently I misunderstood. ^^Ok I think I'm more or less on the right wavelength here, so generate fields hidden by default in JS, that should be alright.I got the impression I generated these through the different elements I setup though?I'll have a crack at that, it sounds more simple than I thought it was going to be.

[justsomeguy]

Check the code that generates the elements, it creates a file input and some buttons but no other inputs.

[Kingy]

I've managed to setup the script to generate the input elements, server was down the other day so that delayed my work.I have the style visibilities set in there ready to use but for testing purposes I've left them visible for now. Bit stuck on the passing of values.Like naturally I can do document.getElement.......value = document.getElement........value etc.So I tried that as a simple test just to pass values from one box to another but for some reason I couldn't get it to work. o.o(Link has changed) http://cpulse.dmu.ac.uk/upload/Alternative.../albupload.htmlmultifile.js so far

function MultiSelector( list_target, max ){	// Where to write the list	this.list_target = list_target;	// How many elements?	this.count = 0;	// How many elements?	this.id = 0;	// Is there a maximum?	if( max ){		this.max = max;	} else {		this.max = -1;	};		/**	 * Add a new file input element	 */	this.addElement = function( element ){		// Make sure it's a file input element		if( element.tagName == 'INPUT' && element.type == 'file' && 'text' ){			// Element name -- what number am I?			element.name = 'file_' + this.id++;				// Trying other elements to input to form					element.track = 'singletitle' +this.id;					element.year = 'ayear' +this.id;					element.genre = 'agenre' +this.id; 					element.other = 'genreother' +this.id;					element.desc = 'adesc' +this.id;					element.label = 'alabel' +this.id;										element.edtrack = 'edtitle' +this.id;					element.edyear = 'edyear' +this.id;					element.edgenre = 'edgenre' +this.id; 					element.edother = 'edother' +this.id;					element.eddesc = 'eddesc' +this.id;					element.edlabel = 'edlabel' +this.id;								// Add reference to this object			element.multi_selector = this;			// What to do when a file is selected			element.onchange = function(){				// New file input				var new_element = document.createElement( 'input' );				new_element.type = 'file';											// Creating other elements for edit form							var track_element = document.createElement('input'); //Track title								track_element.type = 'text';										//track_element.style.visibility = 'hidden';								track_element.id = element.track;							var year_element = document.createElement('input'); //Year								year_element.type = 'text';										//year_element.style.visibility = 'hidden';								year_element.id = element.year;							var drop_element = document.createElement('option'); //Drop down list								drop_element.type = 'text';	  //option?									//drop_element.style.visibility = 'hidden';								drop_element.id = element.genre;							var other_element = document.createElement('input'); //Other input element								other_element.type = 'text';									//other_element.style.visibility = 'hidden';								other_element.id = element.other;							var desc_element = document.createElement('input'); //Description								desc_element.type = 'text';								//desc_element.style.visibility = 'hidden';								desc_element.id = element.desc							var lab_element = document.createElement('input'); //Label								lab_element.type = 'text';								//lab_element.style.visibility = 'hidden';								lab_element.id = element.label;																									//For editbox ID generation											var edtrack_element = document.createElement('input'); //Track title												edtrack_element.type = 'text';														//edtrack_element.style.visibility = 'hidden';												edtrack_element.id = element.edtrack +this.id;											var edyear_element = document.createElement('input'); //Year												edyear_element.type = 'text';														//edyear_element.style.visibility = 'hidden';												edyear_element.id = element.edyear +this.id;											var eddrop_element = document.createElement('option'); //Drop down list												eddrop_element.type = 'text';	  //option?													//eddrop_element.style.visibility = 'hidden';												eddrop_element.id = element.edgenre +this.id;											var edother_element = document.createElement('input'); //Other input element												edother_element.type = 'text';													//edother_element.style.visibility = 'hidden';												edother_element.id = element.edother +this.id;											var eddesc_element = document.createElement('input'); //Description												eddesc_element.type = 'text';												//eddesc_element.style.visibility = 'hidden';												eddesc_element.id = element.eddesc +this.id;											var edlab_element = document.createElement('input'); //Label												edlab_element.type = 'text';												//edlab_element.style.visibility = 'hidden';												edlab_element.id = element.edlabel +this.id;																					// create hidden fields											//document.createElement("singletitle").id = 'singletitle' + this.id;							// Define ID?							//file.id = 'file' +this.id++;							//element.track.id = element.track;							//element.year.id = element.year;							//drop_element.id = element.genre;							//other_element.id = element.other;							//desc_element.id = element.desc;							//lab_element.id = element.label;														// Apply ID to form?							//document.getElementById('singletitle').id = 'singletitle' +this.id;											// Add new element				this.parentNode.insertBefore( new_element, this );						//Add rest of form elements							this.parentNode.insertBefore(track_element, this);							this.parentNode.insertBefore(year_element, this);							this.parentNode.insertBefore(drop_element, this);							this.parentNode.insertBefore(other_element, this);							this.parentNode.insertBefore(desc_element, this);							this.parentNode.insertBefore(lab_element, this);				// Apply 'update' to element				this.multi_selector.addElement( new_element );											// Update list				this.multi_selector.addListRow( this );				// Hide this: we can't use display:none because Safari doesn't like it				this.style.position = 'absolute';				this.style.left = '-1000px';			};			// If we've reached maximum number, disable input element			if( this.max != -1 && this.count >= this.max ){				element.disabled = true;			};			// File element counter			this.count++;			// Most recent element			this.current_element = element;					} else {			// This can only be applied to file input elements!			alert( 'Error: not a file input element' );		};	};	/**	 * Add a new row to the list of files	 */	this.addListRow = function( element ){				// Row div		var new_row = document.createElement( 'div' );		// Delete button		var new_row_button = document.createElement('input');		new_row_button.type = 'button';		new_row_button.value = 'Delete';				//Edit button		var new_row_button2 = document.createElement('input');		new_row_button2.type = 'button';		new_row_button2.value = 'Edit';		new_row_button2.style.float = 'right';		// References		new_row.element = element;				// Delete function		new_row_button.onclick= function(){			// Remove element from form			this.parentNode.element.parentNode.removeChild( this.parentNode.element );			// Remove this row from the list			this.parentNode.parentNode.removeChild( this.parentNode );			// Decrement counter			this.parentNode.element.multi_selector.count--;			// Re-enable input element (if it's disabled)			this.parentNode.element.multi_selector.current_element.disabled = false;			// Appease Safari			//    without it Safari wants to reload the browser window			//    which nixes your already queued uploads			return false;			}						// Edit function				// Use this to summon dynamic form for each individual track details editting		new_row_button2.onclick= function(){			openbox('Edit details', 0);			document.getElementById("edtitle").value = element.value;			document.getElementById("edyear").value = element.edyear;			document.getElementById("eddesc").value = element.eddesc;			document.getElementById("edlabel").value = element.edlabel;												// Apply ID to form?								document.getElementByName("edtitle").id = element.value;								document.getElementByName("edyear").id = element.edyear;								document.getElementByName("edgenre").id = element.edgenre;								document.getElementByName("edother").id = element.edother;								document.getElementByName("eddesc").id = element.eddesc;								document.getElementByName("edlabel").id = element.edlabel;											return false;		};			// Set row value		new_row.innerHTML = element.value;		// Add button		new_row.appendChild(new_row_button2);		new_row.appendChild( new_row_button );				// Add it to the list		this.list_target.appendChild(new_row);						};};

save.js

function save (){	document.getElementById('singletitle1').value = document.getElementById('singletitle').value;};

I know I also need a way for each individual edit box to pass the values to the right hidden fields (currently visible as mentioned earlier) and my ID's doubled up so I changed some bits.I can't seem to pass the values on with what I got up there.I'm still also stuck on how to pass the values to the right one. Because now I've finally managed to set up the different invisible (but shown for now) fields. But the editbox still needs to know which are the right ones to send to.What you see me trying in the script is trying to change the ID of the edit box elements dynamically so a script can just easily pass values on from one to another. I'd need a more efficient way to do that but for now I need to figure the passing on of values + assigning the correct fields to one another. >_<

[justsomeguy]

A note about this:element.name = 'file_' + this.id++If this.id is 1, that's going to set element.name to "file_1" and then increment the id, so the next time you use this.id it will be 2. If you want to increment the id before setting it, so if the id is currently 1 but you want to name the element file_2, you would use this:element.name = 'file_' + (++this.id)That way the name will be set to file_2, and after that this.id will still be 2.One way to store the ID so that it knows which fields to update is to just store the correct ID with the element, so you could do something like this:element.el_id = this.id;Then in the save function you would get the el_id property of the element and use that to update the correct set of fields.Also, for the hidden dropdowns it's not necessary to create a hidden dropdown, just create a hidden text field like the others. When you save the dropdown you can just get the value and assign it to the text field the same way you're doing the others.

[Kingy]

Ah with regards to the ++this.id I see what you're getting at there, I've changed that now.I think I can see the logic behind setting the ID and element as you suggested, very simple and clever. :)Not sure why I didn't think of that and I'll give that a go.As for the drop down I see your point, I'll try and fiddle with the script now and I'll update you.Many thanks for the help so far, your input has been very useful. ^^[edit]Think I'm getting close, but still not quite there yet. I'm telling it to store the ID with the element when it generates the edit box elementsand set it to element.value = this.id so I can grab the value in save.js. Which if I assumed right is what you suggested. So I'm thinking maybe something in my syntax or logic, or even both.

function MultiSelector( list_target, max ){	// Where to write the list	this.list_target = list_target;	// How many elements?	this.count = 0;	// How many elements?	this.id = 0;	// Is there a maximum?	if( max ){		this.max = max;	} else {		this.max = -1;	};		/**	 * Add a new file input element	 */	this.addElement = function( element ){		// Make sure it's a file input element		if( element.tagName == 'INPUT' && element.type == 'file' && 'text' ){			// Element name -- what number am I?			element.name = 'file_' + (++this.id);  //Tweaked to increment the id before setting it, so if the id is currently 1 but you want to name the element file_2 bracket the ++													//  Now name will be set to file_2, and after that this.id will still be 2.				// Trying other elements to input to form					element.track = 'singletitle' +this.id;					element.year = 'ayear' +this.id;					element.genre = 'agenre' +this.id; 					element.other = 'genreother' +this.id;					element.desc = 'adesc' +this.id;					element.label = 'alabel' +this.id;										element.edtrack = 'edtitle' +this.id;					element.edyear = 'edyear' +this.id;					element.edgenre = 'edgenre' +this.id; 					element.edother = 'edother' +this.id;					element.eddesc = 'eddesc' +this.id;					element.edlabel = 'edlabel' +this.id;								// Add reference to this object			element.multi_selector = this;			// What to do when a file is selected			element.onchange = function(){				// New file input				var new_element = document.createElement( 'input' );				new_element.type = 'file';											// Creating other elements for edit form							var track_element = document.createElement('input'); //Track title								track_element.type = 'text';										//track_element.style.visibility = 'hidden';								track_element.id = element.track;							var year_element = document.createElement('input'); //Year								year_element.type = 'text';										//year_element.style.visibility = 'hidden';								year_element.id = element.year;							var drop_element = document.createElement('input'); //Drop down list								drop_element.type = 'text';	  //option?									//drop_element.style.visibility = 'hidden';								drop_element.id = element.genre;							var other_element = document.createElement('input'); //Other input element								other_element.type = 'text';									//other_element.style.visibility = 'hidden';								other_element.id = element.other;							var desc_element = document.createElement('input'); //Description								desc_element.type = 'text';								//desc_element.style.visibility = 'hidden';								desc_element.id = element.desc							var lab_element = document.createElement('input'); //Label								lab_element.type = 'text';								//lab_element.style.visibility = 'hidden';								lab_element.id = element.label;																									//For editbox ID generation											var edtrack_element = document.createElement('input'); //Track title												edtrack_element.type = 'text';														//edtrack_element.style.visibility = 'hidden';												edtrack_element.id = this.id;											var edyear_element = document.createElement('input'); //Year												edyear_element.type = 'text';														//edyear_element.style.visibility = 'hidden';												edyear_element.id = this.id;											var eddrop_element = document.createElement('input'); //Drop down list												eddrop_element.type = 'text';	  //option?													//eddrop_element.style.visibility = 'hidden';												eddrop_element.id = this.id;											var edother_element = document.createElement('input'); //Other input element												edother_element.type = 'text';													//edother_element.style.visibility = 'hidden';												edother_element.id = this.id;											var eddesc_element = document.createElement('input'); //Description												eddesc_element.type = 'text';												//eddesc_element.style.visibility = 'hidden';												eddesc_element.id = this.id;											var edlab_element = document.createElement('input'); //Label												edlab_element.type = 'text';												//edlab_element.style.visibility = 'hidden';												edlab_element.id = this.id;																		// Add new element				this.parentNode.insertBefore( new_element, this );						//Add rest of form elements							this.parentNode.insertBefore(track_element, this);							this.parentNode.insertBefore(year_element, this);							this.parentNode.insertBefore(drop_element, this);							this.parentNode.insertBefore(other_element, this);							this.parentNode.insertBefore(desc_element, this);							this.parentNode.insertBefore(lab_element, this);																// Apply 'update' to element				this.multi_selector.addElement( new_element );											// Update list				this.multi_selector.addListRow( this );				// Hide this: we can't use display:none because Safari doesn't like it				this.style.position = 'absolute';				this.style.left = '-1000px';			};			// If we've reached maximum number, disable input element			if( this.max != -1 && this.count >= this.max ){				element.disabled = true;			};			// File element counter			this.count++;			// Most recent element			this.current_element = element;					} else {			// This can only be applied to file input elements!			alert( 'Error: not a file input element' );		};	};	/**	 * Add a new row to the list of files	 */	this.addListRow = function( element ){				// Row div		var new_row = document.createElement( 'div' );		// Delete button		var new_row_button = document.createElement('input');		new_row_button.type = 'button';		new_row_button.value = 'Delete';				//Edit button		var new_row_button2 = document.createElement('input');		new_row_button2.type = 'button';		new_row_button2.value = 'Edit';		new_row_button2.style.float = 'right';		// References		new_row.element = element;				// Delete function		new_row_button.onclick= function(){			// Remove element from form			this.parentNode.element.parentNode.removeChild( this.parentNode.element );			// Remove this row from the list			this.parentNode.parentNode.removeChild( this.parentNode );			// Decrement counter			this.parentNode.element.multi_selector.count--;			// Re-enable input element (if it's disabled)			this.parentNode.element.multi_selector.current_element.disabled = false;			// Appease Safari			//    without it Safari wants to reload the browser window			//    which nixes your already queued uploads			return false;			}						// Edit function				// Use this to summon dynamic form for each individual track details editting		new_row_button2.onclick= function(){			openbox('Edit details', 0);			document.getElementById("edtitle").value = element.value;			document.getElementById("edyear").value = element.edyear;			document.getElementById("eddesc").value = element.eddesc;			document.getElementById("edlabel").value = element.edlabel;												// Apply ID to form?								//document.getElementByName("edtitle").id = element.value;							//	document.getElementByName("edyear").id = element.edyear;							//	document.getElementByName("edgenre").id = element.edgenre;							//	document.getElementByName("edother").id = element.edother;							//	document.getElementByName("eddesc").id = element.eddesc;							//	document.getElementByName("edlabel").id = element.edlabel;									// Define ID?								element.edtrack = this.id;								element.edyear = this.id;								element.edgenre = this.id;								element.edother = this.id;								element.eddesc = this.id;								element.edlabel = this.id;										return false;		};			// Set row value		new_row.innerHTML = element.value;		// Add button		new_row.appendChild(new_row_button2);		new_row.appendChild( new_row_button );				// Add it to the list		this.list_target.appendChild(new_row);						};};

save.js

function save (){				// Incomplete, for testing	var title_element = document.getElementById('edtitle'); //get text from the text field	var title1 = title_element.value; //turn the above text into a value	document.getElementById('singletitle1').value = title1; // put value into another txt field		var title_element = document.getElementById('edyear'); //get text from the text field	var year1 = title_element.value; //turn the above text into a value	document.getElementById('ayear1').value = year1; // put value into another txt field								//document.getElementById('singletitle').value = document.getElementById('singletitle1').value;};

[justsomeguy]

Your save function isn't getting the ID to use to update the fields. Instead of updating "ayear1" for example, you should be getting the ID and updating the appropriate field, it might not be 1. You can add some code into the edit button to write the element ID to a field that you can get the value from in the save function, and use that ID to update the other fields.

[Kingy]

[edit]It's getting there, just need to be able to grab the values based on the ID's so far it's looking like this.So not quite there yet, grabbed ID, put it in a field, is able to get value of ID from the field.Just need to work out how to use it and be able to update values as you suggested. : ]Haven't quite cracked that part yet.Ok so i'm suppose to store the ID of the edit box elements i.e. edtitle, edyear etc. in those generated boxes, call the value of that and then use that id to write into the other form elements like singletitle1, ayear1 etc.Because that's how it pans out in my head.http://cpulse.dmu.ac.uk/upload/Alternative.../albupload.htmlmultifile.js

function MultiSelector( list_target, max ){	// Where to write the list	this.list_target = list_target;	// How many elements?	this.count = 0;	// How many elements?	this.id = 0;	// Is there a maximum?	if( max ){		this.max = max;	} else {		this.max = -1;	};		/**	 * Add a new file input element	 */	this.addElement = function( element ){		// Make sure it's a file input element		if( element.tagName == 'INPUT' && element.type == 'file' && 'text' ){			// Element name -- what number am I?			element.name = 'file_' + (++this.id);  //Tweaked to increment the id before setting it, so if the id is currently 1 but you want to name the element file_2 bracket the ++													//  Now name will be set to file_2, and after that this.id will still be 2.				// Trying other elements to input to form					element.track = 'singletitle' +this.id;					element.year = 'ayear' +this.id;					element.genre = 'agenre' +this.id; 					element.other = 'genreother' +this.id;					element.desc = 'adesc' +this.id;					element.label = 'alabel' +this.id;										element.edtrack = 'edtitle' +this.id;					element.edyear = 'edyear' +this.id;					element.edgenre = 'edgenre' +this.id; 					element.edother = 'edother' +this.id;					element.eddesc = 'eddesc' +this.id;					element.edlabel = 'edlabel' +this.id;								// Add reference to this object			element.multi_selector = this;			// What to do when a file is selected			element.onchange = function(){				// New file input				var new_element = document.createElement( 'input' );				new_element.type = 'file';											// Creating other elements for edit form							var track_element = document.createElement('input'); //Track title								track_element.type = 'text';										//track_element.style.visibility = 'hidden';								track_element.id = element.track;							var year_element = document.createElement('input'); //Year								year_element.type = 'text';										//year_element.style.visibility = 'hidden';								year_element.id = element.year;							var drop_element = document.createElement('input'); //Drop down list								drop_element.type = 'text';	  //option?									//drop_element.style.visibility = 'hidden';								drop_element.id = element.genre;							var other_element = document.createElement('input'); //Other input element								other_element.type = 'text';									//other_element.style.visibility = 'hidden';								other_element.id = element.other;							var desc_element = document.createElement('input'); //Description								desc_element.type = 'text';								//desc_element.style.visibility = 'hidden';								desc_element.id = element.desc							var lab_element = document.createElement('input'); //Label								lab_element.type = 'text';								//lab_element.style.visibility = 'hidden';								lab_element.id = element.label;																									//For editbox ID generation											var edtrack_element = document.createElement('input'); //Track title												edtrack_element.type = 'text';														//edtrack_element.style.visibility = 'hidden';												edtrack_element.id = element.edtrack;											var edyear_element = document.createElement('input'); //Year												edyear_element.type = 'text';														//edyear_element.style.visibility = 'hidden';												edyear_element.id = element.edyear ;											var eddrop_element = document.createElement('input'); //Drop down list												eddrop_element.type = 'text';	  //option?													//eddrop_element.style.visibility = 'hidden';												eddrop_element.id = element.edgenre;											var edother_element = document.createElement('input'); //Other input element												edother_element.type = 'text';													//edother_element.style.visibility = 'hidden';												edother_element.id = element.edother;											var eddesc_element = document.createElement('input'); //Description												eddesc_element.type = 'text';												//eddesc_element.style.visibility = 'hidden';												eddesc_element.id = element.eddesc;											var edlab_element = document.createElement('input'); //Label												edlab_element.type = 'text';												//edlab_element.style.visibility = 'hidden'; 												edlab_element.id = element.edlabel;																		// Add new element				this.parentNode.insertBefore( new_element, this );						//Add rest of form elements							this.parentNode.insertBefore(track_element, this);							this.parentNode.insertBefore(year_element, this);							this.parentNode.insertBefore(drop_element, this);							this.parentNode.insertBefore(other_element, this);							this.parentNode.insertBefore(desc_element, this);							this.parentNode.insertBefore(edtrack_element, this);							this.parentNode.insertBefore(edyear_element, this);							this.parentNode.insertBefore(eddrop_element, this);							this.parentNode.insertBefore(edother_element, this);							this.parentNode.insertBefore(eddesc_element, this);							this.parentNode.insertBefore(edlab_element, this);																// Apply 'update' to element				this.multi_selector.addElement( new_element );											// Update list				this.multi_selector.addListRow( this );				// Hide this: we can't use display:none because Safari doesn't like it				this.style.position = 'absolute';				this.style.left = '-1000px';			};			// If we've reached maximum number, disable input element			if( this.max != -1 && this.count >= this.max ){				element.disabled = true;			};			// File element counter			this.count++;			// Most recent element			this.current_element = element;					} else {			// This can only be applied to file input elements!			alert( 'Error: not a file input element' );		};	};	/**	 * Add a new row to the list of files	 */	this.addListRow = function( element ){				// Row div		var new_row = document.createElement( 'div' );		// Delete button		var new_row_button = document.createElement('input');		new_row_button.type = 'button';		new_row_button.value = 'Delete';				//Edit button		var new_row_button2 = document.createElement('input');		new_row_button2.type = 'button';		new_row_button2.value = 'Edit';		new_row_button2.style.float = 'right';		// References		new_row.element = element;				// Delete function		new_row_button.onclick= function(){			// Remove element from form			this.parentNode.element.parentNode.removeChild( this.parentNode.element );			// Remove this row from the list			this.parentNode.parentNode.removeChild( this.parentNode );			// Decrement counter			this.parentNode.element.multi_selector.count--;			// Re-enable input element (if it's disabled)			this.parentNode.element.multi_selector.current_element.disabled = false;			// Appease Safari			//    without it Safari wants to reload the browser window			//    which nixes your already queued uploads			return false;			}						// Edit function				// Use this to summon dynamic form for each individual track details editting		new_row_button2.onclick= function(){			openbox('Edit details', 0);																		// Write ID into a field, written into forms, generated valeus beign edtitle1, edyear1, etc....edtitle2, edyear2, etc....									//the input fields which they are being written into are are edtitle1, edyear1 etc...								document.getElementById("edtitle1").value = "edtitle";								document.getElementById("edyear1").value = "edyear";								document.getElementById("edgenre1").value ="edgenre";								document.getElementById("edother1").value = "edother";								document.getElementById("eddesc1").value = "eddesc";								document.getElementById("edlabel1").value = "edlabel";																		//Attach ID to edit box elements from hidden fields (edtitle1, edyear1 etc...)										//document.getElementById("edtitle").value = document.getElementById("edtitle1").value;										//document.getElementById("edyear").value = document.getElementById("edyear1").value;										//document.getElementById("edgenre").value = document.getElementById("edgenre1").value;										//document.getElementById("edother").value = document.getElementById("edother1").value;										//document.getElementById("eddesc").value = document.getElementById("eddesc1").value;										//document.getElementById("edlabel").value = document.getElementById("edlabel1").value;									document.getElementById("edtitle").value = element.edtrack;									document.getElementById("edyear").value =   element.edyear;									document.getElementById("edgenre").value =  element.edgenre;									document.getElementById("edother").value =  element.edother;									document.getElementById("eddesc").value =  element.eddesc;									document.getElementById("edlabel").value = element.edlabel;										return false;		};			// Set row value		new_row.innerHTML = element.value;		// Add button		new_row.appendChild(new_row_button2);		new_row.appendChild( new_row_button );				// Add it to the list		this.list_target.appendChild(new_row);						};};

save.js

	var ed1t =	document.getElementById("edtitle1");var ed1t = ed1t.value; document.getElementById("singletitle1").value = ed1t_val;								var ed1y =	document.getElementById("edyear1");var ed1y = ed1y.value;document.getElementById("ayear1").value = ed1y_val;								var ed1g =	document.getElementById("edgenre1");var ed1g_val =  ed1g.value;document.getElementById("agenre1").value = ed1g_val;								var ed1o =	document.getElementById("edother1");var ed1o_val = ed1o.value;document.getElementById("genreother1").value = edlo_val;								var ed1d =	document.getElementById("eddesc1");var ed1d_val = ed1d.value;document.getElementById("adesc1").value = edld_val;								var ed1l =	document.getElementById("edlabel1");var ed1l_val =  ed1l.value;document.getElementById("alabel1").value = edll_val;																							

[justsomeguy]

I'm not sure if you're understanding, I don't see the code to save the ID.The point is that if you're editing track 1, you need to write "1" to a field, so that you know that when you get the values you need to edit "title1", "year1", etc. If you're editing track 2, you write "2" to the field so that you end up saving to "title2", "year2", etc. Your line to save should look something like this:document.getElementById("singletitle" + element_id).value = title_val;

[Kingy]

document.getElementById("singletitle" + element_id).value = title_val;

Ah ok, that wasn't what I had in my mind but that makes a lot more sense than what I was thinking.Figures I was struggling with this last part, at least it's grabbing the ID ok, I just need to add the extraelement ID parts in. : ]But why wouldn't something like this work since I've used + this.id anyway before?

	function save (){		document.getElementById('singletitle' + this.id).value = document.getElementById('edtitle').value;		document.getElementById('ayear' + this.id).value = document.getElementById('edyear').value;						etc..						etc..	}

I tried replacing the above with the with the initial elements like element.track, element.year etc....and those don't work either.

	function save (){		element.track.value = document.getElementById('edtitle').value;		element.year.value = document.getElementById('edyear').value;						etc..						etc..	}

[Kingy]

Thank you very much for all your help, the core functions are fine now.Here's what I've got with some extra assistance.multifile.js

function MultiSelector( list_target, max ){	// Where to write the list	this.list_target = list_target;	// How many elements?	this.count = 0;	// How many elements?	this.id = 0;	// Is there a maximum?	if( max ){		this.max = max;	} else {		this.max = -1;	};		/**	 * Add a new file input element	 */	this.addElement = function( element ){		// Make sure it's a file input element		if( element.tagName == 'INPUT' && element.type == 'file' ){                          element.name='file_'+this.id++;		   	// Element name -- what number am I?			//element.name = 'file_' + (++this.id);  //Tweaked to increment the id before setting it, so if the id is currently 1 but you want to name the element file_2 bracket the ++													//  Now name will be set to file_2, and after that this.id will still be 2.  				// Trying other elements to input to form					element.track = 'singletitle' +this.id;					element.year = 'ayear' +this.id;					element.genre = 'agenre' +this.id; 					element.other = 'genreother' +this.id;					element.desc = 'adesc' +this.id;					element.label = 'alabel'+this.id;								// Add reference to this object  			element.multi_selector = this;			// What to do when a file is selected			element.onchange = function(){				// New file input				var new_element = document.createElement( 'input' );				new_element.type = 'file';							     			     // Creating other elements for edit form				var track_element = document.createElement('input'); //Track title				track_element.type = 'text';					track_element.name='singletitle'+this.multi_selector.id;								track_element.style.visibility = 'hidden';				track_element.id = element.track;								var year_element = document.createElement('input'); //Year				year_element.type = 'text';					year_element.name = 'ayear'+this.multi_selector.id;								year_element.style.visibility = 'hidden';				year_element.id = element.year;												var drop_element = document.createElement('input'); //Drop down list			        drop_element.type = 'text';					      drop_element.style.visibility = 'hidden';			        drop_element.id = element.genre;			        drop_element.name='agenre'+this.multi_selector.id;			       			       			       var other_element = document.createElement('input'); //Other input element				other_element.type = 'text';				      other_element.style.visibility = 'hidden';				other_element.id = element.other;			        other_element.name='aother'+this.multi_selector.id;			        			       			       var desc_element = document.createElement('input'); //Description				desc_element.type = 'text';				desc_element.style.visibility = 'hidden';				desc_element.id = element.desc;				desc_element.name='adesc'+this.multi_selector.id;								var lab_element = document.createElement('input'); //Label				lab_element.type = 'text';				lab_element.style.visibility = 'hidden';				lab_element.id = element.label;				lab_element.name= 'alabel'+this.multi_selector.id;																												// Add new element				this.parentNode.insertBefore( new_element, this );				//Add rest of form elements				this.parentNode.insertBefore(track_element, this);				this.parentNode.insertBefore(year_element, this);				this.parentNode.insertBefore(drop_element, this);				this.parentNode.insertBefore(other_element, this);				this.parentNode.insertBefore(desc_element, this);				this.parentNode.insertBefore(lab_element, this);																				// Apply 'update' to element				this.multi_selector.addElement( new_element );											// Update list				this.multi_selector.addListRow( this, track_element, year_element, drop_element, other_element, desc_element, lab_element );				// Hide this: we can't use display:none because Safari doesn't like it				this.style.position = 'absolute';				this.style.left = '-1000px';			};			// If we've reached maximum number, disable input element			if( this.max != -1 && this.count >= this.max ){				element.disabled = true;			};			// File element counter			this.count++;			// Most recent element			this.current_element = element;					} else {			// This can only be applied to file input elements!			alert( 'Error: not a file input element' );		};	};	/**	 * Add a new row to the list of files	 */	this.addListRow = function( element, element1, element2, element3, element4, element5, element6 ){				// Row div		var new_row = document.createElement( 'div' );		// Delete button		var new_row_button = document.createElement('input');		new_row_button.type = 'button';		new_row_button.value = 'Delete';				//Edit button		var new_row_button2 = document.createElement('input');		new_row_button2.type = 'button';		new_row_button2.value = 'Edit';		new_row_button2.style.float = 'right';			// References		new_row.element = element;		new_row.element1 = element1;		new_row.element2 = element2;		new_row.element3 = element3;		new_row.element4 = element4;		new_row.element5 = element5;		new_row.element6 = element6;		// Delete function		new_row_button.onclick= function(){			// Remove element from form			this.parentNode.element.parentNode.removeChild( this.parentNode.element );			this.parentNode.element1.parentNode.removeChild( this.parentNode.element1 );			this.parentNode.element2.parentNode.removeChild( this.parentNode.element2 );			this.parentNode.element3.parentNode.removeChild( this.parentNode.element3 );			this.parentNode.element4.parentNode.removeChild( this.parentNode.element4 );			this.parentNode.element5.parentNode.removeChild( this.parentNode.element5 );			this.parentNode.element6.parentNode.removeChild( this.parentNode.element6 );			// Remove this row from the list			this.parentNode.parentNode.removeChild( this.parentNode );			// Decrement counter			this.parentNode.element.multi_selector.count--;			// Re-enable input element (if it's disabled)			this.parentNode.element.multi_selector.current_element.disabled = false;			// Appease Safari			//    without it Safari wants to reload the browser window			//    which nixes your already queued uploads			return false;			}						// Edit function				// Use this to summon dynamic form for each individual track details editting 		new_row_button2.onclick= function(){			openbox('Edit details', 0);				//Focus on first element				document.getElementById("edyear").focus();							// Edit box elements			document.getElementById("edtitle").value = element.value; //Change if default value wanted						document.getElementById("edtitle").ref= this.parentNode.element.track;									 document.getElementById("edyear").value = ''; //Change if default value wanted			document.getElementById("edyear").ref= this.parentNode.element.year;						// document.getElementById("edgenre").value =  element.edgenre;			document.getElementById("edgenre").ref= this.parentNode.element.genre;						document.getElementById("edother").value =  '';			document.getElementById("edother").ref= this.parentNode.element.other;				document.getElementById('edother').disabled = true;							document.getElementById("eddesc").value =  ''; //Change if default value wanted			document.getElementById("eddesc").ref= this.parentNode.element.desc;						document.getElementById("edlabel").value = ''; //Change if default value wanted						document.getElementById("edlabel").ref= this.parentNode.element.label;  						return false;		};			// Set row value		new_row.innerHTML = element.value;		// Add button		new_row.appendChild(new_row_button2);		new_row.appendChild( new_row_button );				// Add it to the list		this.list_target.appendChild(new_row);						};};