title: jQuery POST request - submitting a <form> inside of an <iframe>
body: <p>I'm creating a quick prototype as a proof-of-concept for a bigger project. I need to create a working cross-domain POST request, and I have jQuery available.</p>
  
  <p>Since I'm assuming (please correct me if I'm wrong) that $.ajax() will not work because the page making the POST request lives in a different domain than the server receiving the request, I'm guessing that the best solution is to use JavaScript to create an &lt;iframe&gt;, insert a &lt;form method="post"&gt; in there that includes hidden inputs with my POST data, and submit it.</p>
  
  <p>How exactly would I do this? (Please provide code examples if possible.)</p>
  
  <p>So far, I have this:</p>
  
  <pre><code>&lt;button type="button" name="button"&gt;Make Cross-Domain POST Request&lt;/button&gt;
  
  &lt;script&gt;
    $('button').click(function() {
      $('body').append('&lt;iframe id="post_frame" style="width: 0; height: 0; border: none;"&gt;&lt;/iframe&gt;');
      setTimeout(function() {
        var frame_body = $('#post_frame').contents().find('body');
        frame_body.append('&lt;form action="..." method="post"&gt;&lt;input type="hidden" name="foo" value="bar" /&gt;&lt;input type="submit" /&gt;&lt;/form&gt;');
        // not sure what goes here (should submit the form in the iframed document once it has loaded)
      }, 1);
    });
  &lt;/script&gt;
  </code></pre>
  
  <p>I know that I need to use the submit() method, but I don't know exactly what that looks like, especially since the &lt;form&gt; is within an &lt;iframe&gt; and I should only call submit() after that &lt;iframe&gt; has loaded.</p>
  
  <p>Please let me know if you have any suggestions/ideas, spot any errors, could recommend a better approach, etc. Thanks in advance!</p>
  
  <p>(Incidentally, I did some searching on Stack Overflow days ago and could have sworn that I found some code in a related question that would have been helpful. I can't find that today, though...)</p>