You are here: / Articles / Guides / Tutorials / How to Post HTML Form Data to an iFrame

How to Post HTML Form Data to an iFrame

Post HTML Form to iFrame


Some newbie web designers tend to over think solutions to simple problems. One such problem is how to post HTML form data to an iFrame.

The situation goes that in some situations you may want to have an iFrame embedded in a parent page and post the contents of a form to return a response in the iFrame.

At this point many designers retreat to some form of JavaScript be it jQuery or any other solution. The good news is that we can keep things simple and not resort to other secondary methods at hand.

So how do I Post HTML Form Data to an iFrame Without JavaScript

The solution is simple. All one needs to do is set the iFrame as a target in form tags. The target should then point to the name of the iFrame. The action should be the same file as the iFrame source.

Here is a gist that shows you how the code should look like.

This solution will only work for an iFrame embedded on the same page which has the form. Here is a solution which allows you to post HTML form data to another web page.