title: textarea form not POSTed in IE9
body: <p>here's the situation:</p>
  
  <p>I have javascript which creates a table layout for a textarea. This is part of a list which users can dynamically add and delete textareas. The use is for a website that allows users to create sets of instructions. The user inputs something and submits. This takes the user to a php file to process the input and redirects the user appropriately.</p>
  
  <p>This javascript works in all browsers except the IE family. The only way it's broken in IE is none of the textareas that are generated send their POST data.</p>
  
  <p>This used to be written in pure javascript, but I recently learned that utilizing a library like jQuery is preferable since that puts some of the burden of maintenance on the jQuery team as new browsers are developed. </p>
  
  <p>Here is the javascript and the html it outputs:</p>
  
  <p>Javascript:</p>
  
  <pre><code>var current_step = 1;   
  
  //
  // STEP ID NAME CONSTANTS
  //
  var step_container_id = "stepcontainer_";
  var step_title_container_id = "titlecontainer_";
  var step_title_id = "steptitle_";
  var step_text_container_id="textcontainer_";
  var step_text_data = "text_data"; 
  var remove_step_id = "remove_step_"; 
  var add_step_id = "add_step_";
  
  //
  // We'll use a doubly linked list to navigate the instruction structure. 
  //
  var LIST_HEAD = null; 
  var LIST_TAIL = null; 
  
  //
  //... Some other javascript functions ...
  //
  
  var step = function(instructions, parent_container)
  {
      // optional argument, predefined instructions
      this.instructions = instructions;
      this.parent_container = parent_container; 
      //
      // initialzations
      //
  
      this.identifier = current_step; 
      this.next = null; 
      this.prev = null; 
      this.title = $('&lt;strong&gt;&lt;/strong&gt;').html( "Step "+current_step+":");
  
      //
      // Create container
      //
      this.container = $('&lt;li&gt;&lt;/li&gt;',{id : step_container_id+current_step}); 
  
  
      // Create Step 'title' ("Step 1:, Step 2:, etc)
      //
      var step_title_container = $('&lt;div&gt;&lt;/div&gt;',{id:step_title_container_id+current_step}); 
      step_title_container.append(this.title); 
  
      //
      // Create the textarea to write the step
      //
      var step_text_container = $('&lt;div&gt;&lt;/div&gt;',{id:step_text_container_id+current_step}); 
      //
      // Create the layout of the table
      //
      var instruction_layout = $('&lt;table&gt;&lt;/table&gt;', {width : "100%"}).css("borderSpacing", "10px"); 
  
      // This row holds the entire instruction form
      var instruction_row = $('&lt;tr&gt;&lt;/tr&gt;'); 
  
  
     // This cell is where users enter step text
     var  text_area_column = $('&lt;td&gt;&lt;/td&gt;', { width: "70%"}); 
  
  
     // This is the second column of our instruction row, and holds the add and delete    button
     var button_column = $('&lt;td&gt;&lt;/td&gt;', {width: "30%", valign : "middle"}); 
     var add_button_div = $('&lt;div&gt;&lt;/div&gt;').css("padding" , "5px"); 
     var delete_button_div =  $('&lt;div&gt;&lt;/div&gt;').css("padding", "5px"); 
  
     var step_text = $('&lt;textarea&gt;&lt;/textarea&gt;', {
      id : step_text_data + current_step,
      name : "text[text"+current_step+"]",
      value : this.instructions
      }).css({
          "width" : "80%" , 
          "float" : "left",
          "height" : "80px"
      }); 
  
      var delete_button = $('&lt;input type="button"&gt;&lt;/input&gt;')
          .attr({ id :remove_step_id + current_step , value : "-" })
          .css("width" , "20px")
          .addClass('search-autosize')
          .click(function(j) { 
              return function(){ 
                   delete_step.call(this, j); 
      }; 
           }(this))
           .appendTo(delete_button_div); 
  
      var add_button = $('&lt;input type="button"&gt;&lt;/input&gt;')
          .attr({id: add_step_id + current_step, value : "+"})
          .css("width", "20px")
          .addClass("search-autosize")
          .click(function(j){
              return function(){
                  insert_step.call(this,j);
              };
          }(this))
          .appendTo(add_button_div);
  
      button_column.append(add_button_div);
      button_column.append(delete_button_div); 
  
      //
      // Append the containers to the step container
      //
      step_text_container.append(step_text);
      text_area_column.append(step_title_container); 
      text_area_column.append(step_text_container); 
      instruction_row.append(text_area_column); 
      text_area_column.append(button_column); 
      instruction_layout.append(instruction_row);
      this.container.append(instruction_layout);
  }
  </code></pre>
  
  <p>** EDIT: ** as per request, the definition of validateForm()</p>
  
  <pre><code>function validateForm()
  {
  var tags = $('#tags');
  
  // Trim whitespace and split on whitespace
  tags = tags.val().replace(/^\s\s*/, '').replace(/\s\s*$/, '').split(',');
  
  if(tags.length &lt; 3)
  {
  //  $('#warning').html('New items require at least three tags');
    //return false;
  }
  
  if( ($('#upc').val().length  != 0) &amp;&amp;   ($('#upc').val().length  != 8)  &amp;&amp; ($('#upc').val().length  != 12 ))
  {
      $('#warning').html('UPC must either be empty, 8 characters, or 12 characters');
       document.getElementById('warning').scrollIntoView(true);
      return false; 
  }
  
  
  if(eliminateDuplicates(tags).length != tags.length)
  {
      $('#warning').html('Items cannot have duplicate tags, please remove the duplicates');
       document.getElementById('warning').scrollIntoView(true);
      return false; 
  }
  
  var form = document.forms["save"];
  if("add" in form)
  {
      var upc = form["add"].value;
  
      if (upc.length != 8 &amp;&amp; upc.length != 12)
      {
          $('#warning').html('Please give us a UPC of length 8 or 12');
           document.getElementById('warning').scrollIntoView(true);
          return false;
      }
  }
  </code></pre>
  
  <p>output HTML, which is inside the parent_container (an UL, with some id):</p>
  
  <pre><code>&lt;form id="save"  enctype="multipart/form-data" name="save_form" method="post" action="item.edit.post.php?itemid=&lt;?=$item-&gt;get('itemid');?&gt;" onsubmit='return validateForm()'&gt;
  &lt;!-- ... Some other HTML ... --&gt;
  &lt;li id="stepcontainer_1"&gt;
    &lt;table style="width: 100%; border-spacing: 10px;"&gt;
     &lt;tbody&gt;
      &lt;tr&gt;
       &lt;td style="width: 70%;"&gt;
        &lt;div id="titlecontainer_1"&gt;
         &lt;strong&gt;Step 1:&lt;/strong&gt;
        &lt;/div&gt;
        &lt;div id="textcontainer_1"&gt;
         &lt;textarea name="text[text1]" id="text_data1" style="width: 80%; height: 80px; float: left;" value=""&gt;&lt;/textarea&gt;
        &lt;/div&gt;
        &lt;td vAlign="middle" style="width: 30%;"&gt;
         &lt;div style="padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px;"&gt;
          &lt;input class="search-autosize" id="add_step_1" style="width: 20px;" type="button" value="+" /&gt;
         &lt;/div&gt;
         &lt;div style="padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px;"&gt;
          &lt;input class="search-autosize" id="remove_step_1" style="width: 20px;" type="button" value="-" /&gt;
         &lt;/div&gt;
        &lt;/td&gt;
       &lt;/td&gt;
      &lt;/tr&gt;
     &lt;/tbody&gt;
    &lt;/table&gt;
   &lt;/li&gt;
   &lt;!-- the rest of the list--&gt;
  &lt;!-- rest of the website --&gt;
  &lt;/form&gt;
  &lt;-- our footer --&gt;
  </code></pre>
  
  <p>And here is the POST output I get from my PHP file:</p>
  
  <p>in IE 9:</p>
  
  <pre><code>array(3) {
   ["item"]=&gt;
     array(8) {
      ["entitytype"]=&gt;
        string(11) "INSTRUCTION"
      ["upc"]=&gt;
        string(8) "12345678"
      ["share"]=&gt;
        string(2) "on"
      ["itemid"]=&gt;
        string(36) "EACB9754-AA81-7B41-B6C9-DDD9D699152B"
      ["thumburl"]=&gt;
        string(0) ""
      ["title"]=&gt;
        string(4) "fdsa"
      ["description"]=&gt;
        string(0) ""
      ["tags"]=&gt;
       string(0) ""
  }
  ["usetemp"]=&gt;
   string(1) "f"
  ["category"]=&gt;
   array(1) {
    ["Breakfast"]=&gt;
      string(2) "on"
    }
  }
  
  utDump
  </code></pre>
  
  <p>Everywhere else:</p>
  
  <pre><code>array(5) {
   ["item"]=&gt;
    array(8) {
     ["entitytype"]=&gt;
      string(11) "INSTRUCTION"
    ["upc"]=&gt;
      string(8) "12345678"
    ["share"]=&gt;
      string(2) "on"
    ["itemid"]=&gt;
      string(36) "EACB9754-AA81-7B41-B6C9-DDD9D699152B"
    ["thumburl"]=&gt;
      string(0) ""
    ["title"]=&gt;
     string(4) "fdsa"
    ["description"]=&gt;
      string(0) ""
    ["tags"]=&gt;
      string(0) ""
  }
  ["usetemp"]=&gt;
    string(1) "f"
  ["category"]=&gt;
    array(1) {
     ["Breakfast"]=&gt;
    string(2) "on"
  }
  ["video"]=&gt;
  array(1) {
    ["upc"]=&gt;
      string(8) "12345678"
  }
  ["text"]=&gt;
   array(6) {
    ["upc"]=&gt;
      string(8) "12345678"
    ["text1"]=&gt;
      string(4) "blah"
    ["text2"]=&gt;
      string(4) "blah"
    ["text3"]=&gt;
      string(4) "blah"
    ["text4"]=&gt;
      string(0) ""
    ["text5"]=&gt;
      string(0) ""
    }
  }
  </code></pre>
  
  <p>Notice how IE9 Completely misses the text array from POST</p>