title: How can I use jQuery to dynamically load html into an iFrame?
body: <p>I'm working on an <code>iframe</code> file uploader (so my file uploader appears to be ajax). I'm trying to take the form on my page and insert it into an <code>iframe</code>. Then I will submit the form inside the <code>iframe</code>. However, it isn't working. Here is my code:</p>
  
  <p>jQuery:</p>
  
  <pre><code>function submitFile() {
      $(document).ready(function() {
          if ($('[name=files]').val() != "")
          {
              var fileForm = $('#attachFile').html();
              $('#emptyDiv').html('&lt;iframe name="hiddenIframe" id="hiddenIFrame"&gt;'+fileForm+'&lt;/iframe&gt;');
          }
      });
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="emptyDiv"&gt;&lt;/div&gt;
      &lt;div id="attachFile"&gt;
          &lt;form action="my_file.php" method="post" enctype="multipart/form-data" id="uploadFile"&gt;
              &lt;input type="file" name="files" id="files"&gt;
              &lt;input id="fileUploadButton" type="submit" name="upload" value="Upload File" onclick="submitFile()"&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>This obviously isn't a complete solution, but I notice that after submitting the form I do manage to get the <code>iframe</code> inserted into the <code>&lt;div id="emptyDiv"&gt;</code> element. However, inside the <code>iframe</code> is the following code:</p>
  
  <pre><code>#document
  &lt;html&gt;
      &lt;head&gt;&lt;/head&gt;
      &lt;body&gt;&lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>But what I expect to see inside the <code>iframe</code> is the html contents located inside the form <code>&lt;div id="attachFile"&gt;</code>. What am I missing?</p>