Jump to content
hugebob

Dynamically Added Form Fields Not Passed

Recommended Posts

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Edited by thescientist

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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">

Share this post


Link to post
Share on other sites
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);	}}; 

Edited by hugebob

Share this post


Link to post
Share on other sites

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?

Edited by dsonesuk

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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.

Edited by dsonesuk

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...