title: IE 8 fails to post to mvc 3 when array dynamically appended to a DOM element
body: <p>When dynamically creating a checkbox array with JQuery and appending to a DOM element, IE 8 doesn't submit the checkbox array as part of the form.  It works perfectly fine with Firefox and Chrome.  I'm using the MVC 3 framework on the server side.  Any ideas for a work-around to get this working with IE 8?  I would definitely appreciate any advice.</p>
  
  <p>MODEL:</p>
  
  <pre><code>public int[] SelectedTemplateRequirements { get; set; }
  </code></pre>
  
  <p>VIEW:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;label for="requirementsTemplateDetail"&gt;Requirements:&lt;/label&gt;&lt;br /&gt;
  &lt;div id="requirementsTemplateDetail"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>JQUERY:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      /* Fills up the textarea */
      function fillTextArea(ctrlName, list) {
          // clear div
          $('#requirementsTemplateDetail').empty();
  
          $.each( list, function (index, itemData) {
              // alert(itemData.Id );
              $(ctrlName).append(
                  $(document.createElement('input')).attr({
                      name: 'SelectedTemplateRequirements',
                      value: itemData.Id,
                      type:  'checkbox',
                      checked: 'checked'
                  })
              ).append(itemData.Name + '&lt;br/&gt;&lt;br/&gt;');
          })
      }
  
    function fillRequirementsDropdown(response) {
      fillTextArea("#requirementsTemplateDetail", response.Reqs);
    }
  
  function postFormRequirementsByTemplateID(ctrlName) {
      var theForm = $(ctrlName).parents('form');
  
      $.ajax({
          type: "POST",
          url: '@Url.Action("GetRequirementsByTemplateID")',
          data: theForm.serialize(), 
          error: function (xhr, status, err) {
              alert("An error occurred while saving\n\n" + err);
          },
          success: function (response) {
              fillRequirementsDropdown(response);
          }
      });
      return false;
  }
  
  function auditType_SelectionChanged() {
      postFormRequirementsByTemplateID("#AuditTemplateId");
  }
  
  $(document).ready(function () {
      $("#ClassTypeId").change(function () {
          ClassType_SelectionChanged();
      });
      $("#AuditTemplateId").change(function () {
          auditType_SelectionChanged();
      });
      $('#templateSearchID').click(function () {
          auditTemplateButtonPressed();
      });
      $('#templateAllID').click(function () {
          auditTemplateAllPressed();
      });
  });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>CONTROLLER:</p>
  
  <pre><code>public class AuditController : ComplianceController
  {
      [HttpPost]
      public ActionResult Create(string submit, AuditDocument document )
      {
              // Inserts into AuditRequirementDetail table
              m_activeContract.insertAuditTemplateRequirements(document, myuser);
      }
  }
  </code></pre>
  
  <p>What happens is that IE 8 fails to bundle up the <code>SelectedTemplateRequirements</code> array since it shows up as <code>NULL</code> by the time it gets returned to the post action method on the controller.  Would really appreciate any advice on this since IE 8 still has a large user base.</p>