Dynamic form input not being seen by php

Get Started
1

Hello

I have a piece a code that used to work good, was laid to rest for a few years, and now that work want to use this form again, I find that it doesn’t work in the recent browsers. It’s simply a jquery that creates upload file input types. I really don’t understand where the conflict is happening. In IE 10 it works great with compatibility on, but not “OFF”. It also doesn’t work in any other browser.

I have the first file upload input field laid out statically and this one works fine, but when you get Jquery to add more file upload inputs, those are not seen by PHP when the form is submitted (unless your using IE 10 compatibility ON). When I create a few upload file boxes dynamically, I check through “inspect element” and firebug and sure enough the markup is there and the “name” parameter is filled in. But for some reason (in most browsers) it’s like they weren’t even there when submitting to a PHP script.

here is the Jquery, this works great in all browsers…


<script type="text/javascript">
var j = 0;
function addFileUploadBox()
{
   j++;

   if(j > 9){
   alert('A maximum of 10 uploads is allowed.');
   return false;
   }

    if (!document.getElementById || !document.createElement)
        return false;
		
    var uploadArea = document.getElementById ("upload-area");
	
    if (!uploadArea)
        return;

    var newLine = document.createElement ("p");
    uploadArea.appendChild (newLine);
	
    var newUploadBox = document.createElement ("input");
	var newUploadTag = document.createElement ("input");
	
    // Set up the new input for file uploads
    newUploadBox.type = "file";
    newUploadBox.size = "40";
	
	newUploadTag.type = "text";
    newUploadTag.size = "15";
	
    // The new box needs a name and an ID
    if (!addFileUploadBox.lastAssignedId)
        addFileUploadBox.lastAssignedId = 1;
	
	newUploadTag.setAttribute ("id", "fileTag" + addFileUploadBox.lastAssignedId);
    newUploadTag.setAttribute ("name", "fileTag" + addFileUploadBox.lastAssignedId);
	newUploadTag.setAttribute ("value", "Fichier " + parseInt(addFileUploadBox.lastAssignedId +1));
	newUploadTag.setAttribute ('readOnly','readonly');
    uploadArea.appendChild (newUploadTag);
	
	var newLine2 = document.createElement ("br");
			
    uploadArea.appendChild (newLine2);
    newUploadBox.setAttribute ("id", "upFile" + addFileUploadBox.lastAssignedId);
    newUploadBox.setAttribute ("name", "upFile" + addFileUploadBox.lastAssignedId);
	uploadArea.appendChild (newUploadBox);
		
    addFileUploadBox.lastAssignedId++;
	
	//alert(newUploadBox.getAttribute("id") + '\
' + newUploadBox.getAttribute("name"));
}
</script>

when I use this Jquery, it creates this code, and it as been verified that it does exist in the markup, (when you check through firebug, or Inspect element tool.)
the first 2 lines below are statically placed and is recognised by php when form is submitted, the rest, even though no difference except was created dynamically is not.


<input type="text" size="15" id="fileTag0" name="fileTag0" value="File 1" readonly="readonly"><br />
<input type="file" size="40" id="upFile0" name="upFile0"><p></p>

<input type="text" size="15" id="fileTag1" name="fileTag1" value="File 2" readonly="readonly"><br />
<input type="file" size="40" id="upFile1" name="upFile1"><p></p>
<input type="text" size="15" id="fileTag2" name="fileTag2" value="File 3" readonly="readonly"><br />
<input type="file" size="40" id="upFile2" name="upFile2"><p></p>
<input type="text" size="15" id="fileTag3" name="fileTag3" value="File 4" readonly="readonly"><br />
<input type="file" size="40" id="upFile3" name="upFile3"><p></p>
<input type="text" size="15" id="fileTag4" name="fileTag4" value="File 5" readonly="readonly"><br />
<input type="file" size="40" id="upFile4" name="upFile4"><p></p>
<input type="text" size="15" id="fileTag5" name="fileTag5" value="File 6 readonly="readonly"><br />
<input type="file" size="40" id="upFile5" name="upFile5"><p></p>

I’ve been simply just trying to print out the names of the files in the php after submitted, to see if the info is being carried over, and unless you’re in IE 10 compatibility ON the info is not being transmitted over to PHP.


echo $_FILES['upFile0']["name"]."<br>";
echo $_FILES['upFile1']["name"]."<br>";
echo $_FILES['upFile2']["name"]."<br>";
echo $_FILES['upFile3']["name"]."<br>";