Dynamically Added Form Fields Not Passed

[hugebob]

Hi All, I've written some Javascript that will dynamically add "file" inputs to a form. They show up on the page just fine when the add control is clicked. But, when I submit the form, those dynamically added form fields are absent from the form structure on the receiving page. They're also absent from the form structure passed to the validation function. The added fields are added to a table within the form tags. The JS code adds table rows (TR). Then, cells are added to that row. Then, the file inputs to the cells. All this is done using DOM methods like appendChild(), createElement(), createTextNode(), etc. Is there some extra step needed to make sure the added fields are made part of the form?

[JamesB]

I think the input element needs to have the name property set.http://www.w3schools.com/jsref/prop_fileupload_name.asp

[hugebob]

Hey JamesB, Here's my JS code that adds the form fields:

function FileControlSet(tableID, maxControls){    this.id = tableID;    this.maxNumberOfFileControls = maxControls;    this.insertionIndex = 0;} FileControlSet.prototype.addRow = function ( )  {    var table = document.getElementById(this.id);    var rows = table.getElementsByTagName("tr");    var insertionIndex = 0;     if (rows.length < this.maxNumberOfFileControls)    {	    insertionIndex = rows.length;	    var newTableRow = table.insertRow(insertionIndex);	    var newTableCell = document.createElement("td");	    newTableRow.appendChild(newTableCell);	    var paragraph = document.createElement("p");	    var inputLabelText = "" + (insertionIndex+1) + ". Upload File:";	    paragraph.appendChild(document.createTextNode(inputLabelText));	    newTableCell.appendChild(paragraph); 	    var fileUploadControl = document.createElement("input");	    fileUploadControl.setAttribute("type", "FILE");	    fileUploadControl.setAttribute("name", "upload"+insertionIndex);	    fileUploadControl.setAttribute("id", "upload"+insertionIndex);	    fileUploadControl.setAttribute("size", "50");	    fileUploadControl.setAttribute("class", "myInputs");	    newTableCell.appendChild(fileUploadControl);    }};

The page creates this object by doing: <script type="text/javasript"> fileUploadControls = new FileControlSet('uploadControlTable', 40);</script> An empty HTML table is within the form tags: <table id="uploadControlTable" width="100%" border="0" cellpadding="0" cellspacing="0"></table>This is the table where the file inputs are created and do so just fine. But, they're not showing up in the form structure.

[dsonesuk]

Try creating the tbody tag as well, i've had this problem before until i created the tbody.

[hugebob]

Dsonesuk, I tried starting off with:

<table id="uploadControlTable" width="100%" border="0" cellpadding="0" cellspacing="0"><tbody></tbody></table>

But that didn't work.

[thescientist]

are there any errors in the console? Are you verifying the the tableID passed in matches the ID of the table in your HTML?

[Ingolme]

The rows need to be added to the <tbody> element and not the table. But to make things easier, the table element has an insertRow() method, and table rows have an insertCell() method.

[justsomeguy]

Is the form even set up to handle files? Forms which upload files aren't the same as forms which don't. The enctype needs to be different, for example.

[hugebob]

are there any errors in the console? Are you verifying the the tableID passed in matches the ID of the table in your HTML?

Nope, no errors. Viewing console in Firebug, I can see the new controls being added to the DOM and I can see them and interact with them on the page. However, stepping through the onSubmit handler, references to those controls are undefined.

[hugebob]

Is the form even set up to handle files? Forms which upload files aren't the same as forms which don't. The enctype needs to be different, for example.

Yes. Here's the form tag:

<form action="blah.do" name="myform" id="myform" method="post" onSubmit="return ValidateForm(this)" enctype="multipart/form-data">

[hugebob]

The rows need to be added to the <tbody> element and not the table. But to make things easier, the table element has an insertRow() method, and table rows have an insertCell() method.

DF, I gave this a try: adding the new elements to the tbody. But, still no go. I started off my base table like this:

<table ...><tbody></tbody></table>

I then altered my Javascript code to this:

FileControlSet.prototype.addRow = function ( )  {	var table = document.getElementById(this.id);	var tbody = table.getElementsByTagName("tbody");	var insertionIndex = 0; 	if (tbody[0].rows.length < this.maxNumberOfFileControls)	{		    insertionIndex = tbody[0].rows.length;			var newTableRow = tbody[0].insertRow(insertionIndex);			var newTableCell = document.createElement("td");			newTableRow.appendChild(newTableCell);			var paragraph = document.createElement("p");			var inputLabelText = "" + (insertionIndex+1) + ". Upload File:";			paragraph.appendChild(document.createTextNode(inputLabelText));			newTableCell.appendChild(paragraph); 			var fileUploadControl = document.createElement("input");			fileUploadControl.setAttribute("type", "FILE");			fileUploadControl.setAttribute("name", "upload"+insertionIndex);			fileUploadControl.setAttribute("id", "upload"+insertionIndex);			fileUploadControl.setAttribute("size", "50");			fileUploadControl.setAttribute("class", "myInputs");			newTableCell.appendChild(fileUploadControl);	}}; 

[dsonesuk]

I just use

 <form action="blah.php" name="myform" id="myform" method="post" enctype="multipart/form-data"><table id="uploadControlTable" width="100%" border="0" cellpadding="0" cellspacing="0"></table><input type="hidden" value="dsonesuk" name="myname" /><input type="submit" /></form><script type="text/javascript"> function FileControlSet(tableID, maxControls) {	this.id = tableID;	this.maxNumberOfFileControls = maxControls;	this.insertionIndex = 0;} fileUploadControls = new FileControlSet('uploadControlTable', 40); FileControlSet.prototype.addRow = function ( )  {    var table = document.getElementById(this.id);    if(table.getElementsByTagName('tbody').length ==0)    {    var tbody= document.createElement('TBODY'); //required for IE     table.appendChild(tbody);    }	var rows = table.getElementsByTagName("tr");	var insertionIndex = 0; 	if (rows.length < this.maxNumberOfFileControls)	{			insertionIndex = rows.length;			var newTableRow = table.insertRow(insertionIndex);			var newTableCell = document.createElement("td");			newTableRow.appendChild(newTableCell);			var paragraph = document.createElement("p");			var inputLabelText = "" + (insertionIndex+1) + ". Upload File:";			paragraph.appendChild(document.createTextNode(inputLabelText));			newTableCell.appendChild(paragraph); 			var fileUploadControl = document.createElement("input");			fileUploadControl.setAttribute("type", "FILE");			fileUploadControl.setAttribute("name", "upload"+insertionIndex);			fileUploadControl.setAttribute("id", "upload"+insertionIndex);			fileUploadControl.setAttribute("size", "50");			fileUploadControl.setAttribute("class", "myInputs");			newTableCell.appendChild(fileUploadControl);	}}; fileUploadControls.addRow(); </script> 

with

<?phpecho 'yyyy '.$_POST['myname'].' yyyy<br />';echo 'xxxx '.$_FILES['upload0']['name'].' xxxx'; ?> 

and it worked fine for me?

[hugebob]

I just use

 <form action="blah.php" name="myform" id="myform" method="post" enctype="multipart/form-data"><table id="uploadControlTable" width="100%" border="0" cellpadding="0" cellspacing="0"></table><input type="hidden" value="dsonesuk" name="myname" /><input type="submit" /></form><script type="text/javascript"> function FileControlSet(tableID, maxControls) {	this.id = tableID;	this.maxNumberOfFileControls = maxControls;	this.insertionIndex = 0;} fileUploadControls = new FileControlSet('uploadControlTable', 40); FileControlSet.prototype.addRow = function ( )  {    var table = document.getElementById(this.id);	if(table.getElementsByTagName('tbody').length ==0)	{	var tbody= document.createElement('TBODY'); //required for IE	 table.appendChild(tbody);	}	var rows = table.getElementsByTagName("tr");	var insertionIndex = 0; 	if (rows.length < this.maxNumberOfFileControls)	{			insertionIndex = rows.length;			var newTableRow = table.insertRow(insertionIndex);			var newTableCell = document.createElement("td");			newTableRow.appendChild(newTableCell);			var paragraph = document.createElement("p");			var inputLabelText = "" + (insertionIndex+1) + ". Upload File:";			paragraph.appendChild(document.createTextNode(inputLabelText));			newTableCell.appendChild(paragraph); 			var fileUploadControl = document.createElement("input");			fileUploadControl.setAttribute("type", "FILE");			fileUploadControl.setAttribute("name", "upload"+insertionIndex);			fileUploadControl.setAttribute("id", "upload"+insertionIndex);			fileUploadControl.setAttribute("size", "50");			fileUploadControl.setAttribute("class", "myInputs");			newTableCell.appendChild(fileUploadControl);	}}; fileUploadControls.addRow(); </script> 

with

<?phpecho 'yyyy '.$_POST['myname'].' yyyy<br />';echo 'xxxx '.$_FILES['upload0']['name'].' xxxx'; ?> 

and it worked fine for me?

When you submit the form, can you check and see that those dynamically created inputs are actually received? This is just maddening.

[Ingolme]

You can print the $_POST array and the $_FILES array to see if there's anything in them:

print_r($_POST); print_r($_FILES);

[dsonesuk]

here my print from blah.phpthe first is from normal a hidden input field the rest is from dynamic upload fields

Array ( [myname] => dsonesuk ) Array ( [upload0] => Array ( [name] => 20110805222218_77147_446797620177_502485177_5844520_2779554_n_thumb.jpg [type] => image/jpeg [tmp_name] => E:\wamp\tmp\phpD333.tmp [error] => 0 [size] => 16759 )[upload1] => Array ( [name] => 20110805231800_205476_10150141560108884_502938883_6679993_2290223_n_thumb.jpg [type] => image/jpeg [tmp_name] => E:\wamp\tmp\phpD334.tmp [error] => 0 [size] => 7697 )[upload2] => Array ( [name] => imagetest01.jpg [type] => image/jpeg [tmp_name] => E:\wamp\tmp\phpD335.tmp [error] => 0 [size] => 27856 ) [upload3] => Array ( [name] => imagetest02.jpg [type] => image/jpeg [tmp_name]=> E:\wamp\tmp\phpD336.tmp [error] => 0 [size] => 19109 ) ) 

i counted four in, and i count four printed out. the error is probably caused by permission setting.