Description:
------------
If you use javascript to create a textbox in forms which is laid out using tables, the data from the new elements will not be detected by php. This does not happen with the same script where tables are not used (I have before and after to show below).

post_max_size was set to 20M and upload_max_filesize was set to 30M in php.ini

Reproduce code:
---------------
-------------------Script A - Tableless ------------------

<?

if(isset($_POST['submit']))
{
  foreach($_POST['animals'] as $anim => $a)
  {
    echo $anim.' '.$a.'<br />';
  }
}

?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script language="javascript">
<!--
var curUser=3;

function add_row()
{
      var af=document.getElementById('anim_tab');

      //First Name
      var inone=document.createElement("input");
      inone.name="animals["+curUser+"]";
	  inone.type="text";
	  inone.value="";
      //Append the cells to the row
	  var myp=document.createElement('p');
	  
      af.appendChild(inone);
	  af.appendChild(myp);
	  curUser++;
}

-->
</script>

<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<form method="post" action="" id="anim_form">

<div style="border:0;" id="anim_tab">
<?
  for($i=0;$i<3;$i++)
  {
    echo "<input type=\"text\" name=\"animals[]\" style=\"width=400px;\" /><p />\n";
  }
?>
</div>
<input type="button" name="add" value="Add" onClick="add_row();" />
<input type="submit" name="submit" value="submit" />
</form>

</body>
</html>


----------------------Script B - Tables----------------------------


<?

if(isset($_POST['submit']))
{
  foreach($_POST['animals'] as $anim => $a)
  {
    echo $anim.' '.$a.'<br />';
  }
}

?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script language="javascript">
<!--
var curUser=3;

function add_row()
{
      var af=document.getElementById("anim_tab");

      var lr = af.rows.length;
	  
   	  var row = document.createElement('tr');
	  var td1=document.createElement('td');
      
      //First Name
      var inone=document.createElement("input");
	  inone.type="text";
      inone.name="animals["+curUser+"]";
      
      td1.appendChild(inone);
	  row.appendChild(td1);
	  af.appendChild(row);
	  
	  curUser++;
}
-->
</script>

<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<table id="anim_tab">
<form method="post" action="" id="anim_form">

<?
  for($i=0;$i<3;$i++)
  {
    echo "<tr><td><input type=\"text\" name=\"animals[]\" style=\"width=400px;\" /></td></tr>";
  }
?>
</table>
<input type="button" name="add" value="Add" onClick="add_row();" />
<input type="submit" name="submit" value="submit" />
</form>

</body>
</html>

Expected result:
----------------
Data from the textboxes created using the add button should be displayed when submitted.

The table version works when using IE7 but not when using Opera 9.20 and Firefox 2. The tableless version works in all browsers.

Actual result:
--------------
Only data from the original form elements is displayed not the javascript created ones.

Could be a browser bug since IE7 delivers the data fine, but why not standards compliant browers?


Please don't just fob me off by telling me it's already been fixed.