jQuery POST request - submitting a <form> inside of an <iframe>

Question

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.

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 <iframe>, insert a <form method="post"> in there that includes hidden inputs with my POST data, and submit it.

How exactly would I do this? (Please provide code examples if possible.)

So far, I have this:

<button type="button" name="button">Make Cross-Domain POST Request</button>

<script>
  $('button').click(function() {
    $('body').append('<iframe id="post_frame" style="width: 0; height: 0; border: none;"></iframe>');
    setTimeout(function() {
      var frame_body = $('#post_frame').contents().find('body');
      frame_body.append('<form action="..." method="post"><input type="hidden" name="foo" value="bar" /><input type="submit" /></form>');
      // not sure what goes here (should submit the form in the iframed document once it has loaded)
    }, 1);
  });
</script>

I know that I need to use the submit() method, but I don't know exactly what that looks like, especially since the <form> is within an <iframe> and I should only call submit() after that <iframe> has loaded.

Please let me know if you have any suggestions/ideas, spot any errors, could recommend a better approach, etc. Thanks in advance!

(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...)

Solution

p is an array of post variables and to is your action

   var issuePOST = function(to, p) {
        var myForm = document.createElement("form");
        myForm.method = "post";
        myForm.action = to;
        if (p) {
            for (var k in p) {
                var myInput = document.createElement("input");
                myInput.setAttribute("name", k);
                myInput.setAttribute("value", p[k]);
                myForm.appendChild(myInput);
            }
        }
        document.body.appendChild(myForm);
        myForm.submit();
        document.body.removeChild(myForm);
    };