How to Post HTML Form Data to an iFrame

Some newbie web designers tend to overthink 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.

<form action="iframe-source.php" target="iframe-name" method="post">
			
  <label for="text">Input Label:</label>
  <input type="text" name="text" id="text">
  <input type="submit" value="Submit">
			
</form>
		<!-- some more HTML here. -->
<iframe name="iframe-name" src="iframe-source.php"></iframe>

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

Found this article interesting? Follow Brightwhiz on Facebook, Twitter, and YouTube to read and watch more content we post.