Code Snippet

Home » Code Snippets » HTML » Post Data to an iframe

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">

</form>

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

Reference URL

Subscribe to The Thread

  1. Erin

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

    Reply ↓
  2. Willem de Wit

    Very useful for asynchronous posting files.

    Reply ↓
  3. Chris

    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.

    Reply ↓
  4. NigelC

    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.

    http://www.mercury14.co.uk/asdfgh/form.php

    Am I missing something obvious?

    Reply ↓
  5. Druid of Lûhn

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

    Reply ↓
  6. Druid of Lûhn

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

    Reply ↓
  7. NigelC

    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>

    Reply ↓
    • Druid of Lûhn

      Doesn’t work

    • NigelC

      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>
    • Cody

      That doesnt work either

    • Owen

      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. Shan

    Nice…!

    Reply ↓
  9. Guy

    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.

    Reply ↓
  10. Gautam Kishore

    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.

    Reply ↓
  11. Adam

    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?

    Reply ↓
    • Druid of Lûhn

      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. Bigg_Brawler

    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!

    Reply ↓
  13. fred

    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');
    iframe.name = 'the-iframe-name';
    }

    otherwise, form upload will simply replace the current page.

    more details:
    http://terminalapp.net/submitting-a-form-with-target-set-to-a-script-generated-iframe-on-ie/

    Reply ↓
  14. andreas

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

    Reply ↓
  15. neo

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

    plz help me….

    Reply ↓
  16. neo

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

    iframe name=”frame1″ src=”http://103.4.221.147/srmwebonline/exam/onlineResult.jsp” height=”416″ width=”570″ frameborder=”0″>

    plz help me..

    Reply ↓
  17. alexh58

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

    Reply ↓
  18. prakhar

    Very Useful and simple snippet, thanks a lot..

    Reply ↓

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~