title: html form not holding it's elements' attributes when being passed from web page to child iframe?
body: <p>I have a form that gets completed on a webpage by the user,
  when the user submits the form, I bring up a bootstrap modal dialog, this dialog has an iframe in it that loads the form from the parent window calling a function in it like so:</p>
  
  <pre><code>//parent window
  var formToSubmit;
  function getForm(){
     return formToSubmit;
  }
  
  $("#submitButton").click(function(){
     //alterations to the elements in $("mainForm")
  
     formToSubmit = $("mainForm");
     $("#modalDialog").modal();
     //...
  });
  
  //modal iframe
  var parentForm = parent.window.getForm();
  $("#mainDiv").append(parentForm[0].outerHTML);
  $("form").submit(function(){
     parent.window.closeModalWindow(); //not sure whether this will close AFTER the form is completely submitted yet
  
  });
  
  $("form").submit();
  </code></pre>
  
  <p>My problem is that I'm submitting these forms to microsoft sql server reporting services and  it takes every input element as a parameter. I have no control over this.</p>
  
  <p>So when the user clicks submit in the main form, I disable all the elements that must not be set as parameters, the thing is; as soon as I get the form from the parent window and append it to the modal iframe, it seems as all of those changes are lost, is there any way to preserve this?</p>