First AJAX Instance Never Works

I've got this script which stand-alone works perfect. Then I integrated it into my own script and got it to work. It shows 3 file upload forms. But the first one never works. No matter how many I show or if I change the id's, the first one always complaints having an empty object.name.

<form id="formNameid2" method="post" enctype="multipart/form-data" action="includes/imageupload.php" target="iframeid2">

							<input type="hidden" name="id" value="id2" />
							<span id="uploaderid2" style="font-family:verdana;">
								Upload File: <input name="id2" type="file" value="id2" onchange="return uploadFile(this)" />
							</span>
							<iframe name="iframeid2" src="includes/imageupload.php" width="400" height="100" style="display:none"> </iframe>
						</form><br><form id="formNameid4" method="post" enctype="multipart/form-data" action="includes/imageupload.php" target="iframeid4">
							<input type="hidden" name="id" value="id4" />
							<span id="uploaderid4" style="font-family:verdana;">

								Upload File: <input name="id4" type="file" value="id4" onchange="return uploadFile(this)" />
							</span>
							<iframe name="iframeid4" src="includes/imageupload.php" width="400" height="100" style="display:none"> </iframe>
						</form><br><form id="formNameid6" method="post" enctype="multipart/form-data" action="includes/imageupload.php" target="iframeid6">
							<input type="hidden" name="id" value="id6" />
							<span id="uploaderid6" style="font-family:verdana;">
								Upload File: <input name="id6" type="file" value="id6" onchange="return uploadFile(this)" />

							</span>
							<iframe name="iframeid6" src="includes/imageupload.php" width="400" height="100" style="display:none"> </iframe>
						</form>

PHP:

The uploadFile function looks like this:

function uploadFile(obj) {
	var uploadDir = obj.value;
	uploaderId = 'uploader'+obj.name;
	uploader = obj.name;
	
	document.getElementById('formName'+obj.name).submit();
	traceUpload(uploadDir, obj.name);	
}

PHP:

It takes the selected file. It works for all but the first form. here's the FireFox javascript console error:

Line 41 is from the uploadFile function pasted above:

document.getElementById('formName'+obj.name).submit();

Code (markup):

I've compared the code with the stand-alone version and really can't find any differences. Also played with doc types and all that but to no avail.

The second and third work regardless of whether you actually try the first one.
The first doesn't work after successfully using the second or third either.

Any ideas?

 

Any JS Guru's here who might know?

 

You CANNOT use AJAX or JAvaScript with files...
You cannot use type="file" and do anything to it, other than cloning using javascript.

So what you are doing is impossible. The only way is by submitting a form, or by using remote scripting.

 

Read again, it already works. It's just that when I display multiple 'browse file' form elements, all with their individual form, the first one doesn't work.

 

You have <input type="hidden" name="id" value="id2" /> for the first part, should it not be name="id2"?

 

Dave,

Thanks for checking. I nearly got excited. But the name stays static, like the next forms. Just it's value changes from ID2 to 4 to 6 etc. That form is drawn by calling a function so If I change that, the rest would change which makes no sense considering this works when it's standalone.

Judging by that very fact I guess somehow that first instance is clashing with other code on that page. I might have to run by each and every form element again to see if something else is called ID or ID2 already.

 

you put "this"... meaning the property we're looking at is "formNameid6"... which is not the form name....

 

Do you mean this line:

document.getElementById('formName'+obj.name).submit();

Code (markup):

Should be:

document.getElementById(obj.name).submit();

Code (markup):

So it grabs the form element instead of the form name?

 

nooo.. you are tryingt to grab the form... so why do you need obj.name... just put formNameid2

what the javascript thinks right now is : "formNameid6" ... which is not a form...