Post Data to an iframe

Doesn't take any JavaScript or anything. You just have the form's target attribute match the iframe's name attribute.

<form action="iframe.php" target="my-iframe" method="post">
  <label for="text">Some text:</label>
  <input type="text" name="text" id="text">
  <input type="submit" value="post">
<iframe name="my-iframe" src="iframe.php"></iframe>

The outer page doesn't even reload. But it might appear to at first glance since many browsers run the page-loading spinner in the tab when an iframe reloads.


  1. User Avatar
    Permalink to comment#

    Aren’t iFrames a huge hassle/unnecessary/ugly and basically not used anymore?

  2. User Avatar
    Willem de Wit
    Permalink to comment#

    Very useful for asynchronous posting files.

  3. User Avatar
    Permalink to comment#

    Another great little snippet, as much as i do hate iframes because of there restrictions i do like the ability to manipulate them for file uploads.

  4. User Avatar
    Permalink to comment#

    Strange, just can’t get this to work.

    Uploaded a really basic page with just the form and the iframe page and it will not work.

    Am I missing something obvious?

  5. User Avatar
    Druid of Lûhn
    Permalink to comment#

    Does this show the content to everybody, or only to you on the one session?

  6. User Avatar
    Druid of Lûhn
    Permalink to comment#

    I have the same problem. I created the iframe.php file, but nothing appears, whilst it does in the demo. Help please.

  7. User Avatar
    Permalink to comment#

    If anyone else is having problems making this work try this for the iframe.php page:

    &ltp>I’m probably being loaded inside an iframe.&lt/p>

    &ltp>Text value: &lt?php echo $_POST[“text”]; ?>&lt/p>

    • User Avatar
      Druid of Lûhn
      Permalink to comment#

      Doesn’t work

    • User Avatar
      Permalink to comment#

      You need to edit the &lt to the correct symbols:

      I’m probably being loaded inside an iframe.&lt/p>
      &ltp>Text value: &lt?php echo $_POST["text"]; ?>&lt/p>
    • User Avatar
      Permalink to comment#

      That doesnt work either

    • User Avatar

      That’s because to render < you use a semi-colon to delimit the code, not just & lt.

      Right : & l t ; (remove spaces)

      Wrong : & l t

  8. User Avatar
    Permalink to comment#


  9. User Avatar
    Permalink to comment#

    Found this page while trying to solve this exact problem. I ended up using jQuery to build a GET query string and PHP to process it. I wanted to send data from a form on a page to a form in a fancybox iframe which is then submitted by AJAX – seems to work quite nicely.

    • User Avatar
      Permalink to comment#

      Can you share how you did that? I’m trying to do the exact same thing. I have a form and when the user presses enter I want the php file to search for the data, and post to a fancybox iframe…

  10. User Avatar
    Gautam Kishore
    Permalink to comment#

    I recently used the same trick for an image uploader. I styled the file input by opacity:0 and its wrapper div with some nice looking image for the uploader button and its hover too. once the image is browsed or dragged, it is posted to the iframe and uploaded to the server and displays it in the seamless iframe just above it to show the resized and cropped image.
    I’d love to write an article about it with all the code. All by HTML5, CSS3. I used js just to trigger form submit on change of file input.

  11. User Avatar
    Permalink to comment#

    I’m new to this and I’m having trouble.
    I have a site with a css drop down menu that is 40px high, the menu content changes a lot so having the menu on each page would be a large hassle.
    I’ve tried a iFrame for the menu, but the drop down parts of the menu are cut off by the iFrame. Is there a better way to do this or a trick to make the iFrame hover over the page content so the drop downs are viable?

    • User Avatar
      Druid of Lûhn
      Permalink to comment#

      Look up how to use PHP modularly; you use separate PHP files and load them together into one page that works like one file.
      Once you edit the navigation, for example, it will be edited on all the pages.

  12. User Avatar
    Permalink to comment#

    This totally rocks!

    Takes my php file and loads into an iframe without refreshing the page! EXACTLY WHAT I WAS HOPING FOR!

    Thank you for posting this. You’ve just made one persons life much easier!

  13. User Avatar
    Permalink to comment#

    If you are generating the iframe on the fly on IE8, there is one special gotcha for this particular browser. You need to specify the name attribute inside your document.createElement method call:

    var iframe;
    try {
    iframe = document.createElement('');
    } catch (ex) {
    iframe = document.createElement('iframe'); = 'the-iframe-name';

    otherwise, form upload will simply replace the current page.

    more details:

  14. User Avatar
    Permalink to comment#

    it works too with foreign domains in forms action and iframe src (like action=”…”, src=”…”, ie sort of bypassing same-domain-policy)
    thanks lot!

  15. User Avatar
    Permalink to comment#

    i want to enter the register no in this frame….

    plz help me….

  16. User Avatar
    Permalink to comment#

    i want to enter the register no in this frame….

    iframe name=”frame1″ src=”” height=”416″ width=”570″ frameborder=”0″>

    plz help me..

  17. User Avatar

    This is just what I needed to post between two Drupal instances! Thank you!

  18. User Avatar

    Very Useful and simple snippet, thanks a lot..

  19. User Avatar

    I load an aspx page in iframe inside a jQuery UI dialog to update some data, and after dialog is closed I need to update an updatepanel in parent page. how can I do that? to be more specific, there is a datagrid in parent page and after I edit data in a dialog modal iframe, I want to update the row in datagrid.

    • User Avatar
      Milo LaMar
      Permalink to comment#
      var myHTMLVariable;
        open: function(event, ui) {
          //Cause ENTER keypress to trigger click on the modal submit button
          $(selector).kepress(function(e) {
            if (e.keyCode == $.ui.keyCode.ENTER) {
        buttons: {
          'Submit': function() {
            //ajax call
              url: 'foo.aspx',
              success: function(data) {
                myHTMLVariable = $(data);
              //...more ajax options
        close: function() {
          //Update updatepanel in parent page.
          $('#datagrid_x_y', window.parent.document).html(myHTMLVariable);

      Is the question how to write datagrid_selector or how to get the html you need in myHTMLVariable? I guess I kind of offered an answer for both there.

  20. User Avatar
    David Jr

    Can I use this solution while implementing YouTube’s browser based upload ? It seems all of the data is being handled on YouTube’s end, and I only find out if the upload was a success or failure when it’s complete.

    Thank you.

  21. User Avatar
    Permalink to comment#

    I used similar code for file uploading, now i use flash instead. But it brings old memories back :).

  22. User Avatar
    Permalink to comment#

    I’m working on a real estate website that uses an iframe to bring in real estate listings. Is it possible to override some of the CSS that is responsible for styling the content of the iframe? I’m able to change it using Chrome dev tools but when I make the changes in the stylesheet, they are not applied. Any help is much appreciated.

  23. User Avatar
    Permalink to comment#

    Thank you SO much. That gives me exactly what I was looking for.

  24. User Avatar
    Dr. Reza
    Permalink to comment#


    Finally you saved me ! I was looking for such a simple code for my Facebook PageTab application in order to PHP_POST on my server & receive feedback form from our clients right on Facebook.

    Thank you so much dude, and wish u luck

  25. User Avatar
    Deepak Gangore
    Permalink to comment#

    This code hits that action i.e., iframe.php 2 times in chrome and IE9, in mozilla the action got hit single time only.
    please tell about this.

  26. User Avatar

    Admin Tell me a thing suppose i want to send a js(using textarea) code to some other cross domain server and get output via iframe i did the same and this thing works fine on Mozzila firefox but fails at Chromium ! what’s the matter in case of mozilla i get the required output of compiled js from server via iframe but when i try this in chromium no js code appears at iframe this is sick !

  27. User Avatar
    Permalink to comment#

    how can i upload both data and file together using ajax with all validations

  28. User Avatar
    Permalink to comment#

    And to access the response? (assuming you don’t have access to the code of the page being loaded in the iframe)

  29. User Avatar
    Permalink to comment#

    what should i put in the iframe.php?

  30. User Avatar
    chandra prabhat

    can i use the same concept for 100% height as well as 100% width of the web page from whose iframe i want to create please help me..

  31. User Avatar
    Permalink to comment#

    This post saved my bacon. Many thanks.

  32. User Avatar
    Natalie Euley
    Permalink to comment#

    When I try to do this, the website will show up in the iframe before the post data is sent, and once the post data is sent, it does not affect the content of the iframe. It’s like the iframe relies on it’s src command only and does not receive any post data from the action. Is there something I am missing here? Maybe something that is supposed to go inside the arbitrary PHP file other than a



  33. User Avatar
    Permalink to comment#

    I have a project that requires me to pass client names, addresses & dates into an embedded contract that is hosted is an iframe from a 3rd party (RightSignature). RightSignature is requiring text fields to show this data, but my client wants the names, address & dates to pass into placeholders in the contract (not text fields).

    It would be really simple if it wasn’t in a 3rd party iframe. But, I’m also in agreement with my client… that there has to be a way to make this work, so the information will look more like:

    Santa Claus 12/25/16
    123 Reindeer Drive
    North Pole, AK 12345

    instead of the text fields requiring preset width parameters that are causing it to look like the following:

    Santa Claus 12/25/16
    123 Reindeer Drive
    North Pole AK 12345

    Thanks for your input… if you know how to bypass using RightSignature’s text fields in their 3rd party iframe!

  34. User Avatar
    Frederic Rufin
    Permalink to comment#

    This function creates a temporary form, then send data using jQuery:

    function postToIframe(data,url,target){

    target is the ‘name’ attr of the target iFrame, and data is a JS object :


Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.