{"id":4014,"date":"2017-02-07T12:07:09","date_gmt":"2017-02-07T17:07:09","guid":{"rendered":"http:\/\/local.brightwhiz\/?p=4014"},"modified":"2021-12-08T13:06:54","modified_gmt":"2021-12-08T18:06:54","slug":"post-html-form-data-iframe","status":"publish","type":"post","link":"http:\/\/local.brightwhiz\/post-html-form-data-iframe\/","title":{"rendered":"How to Post HTML Form Data to an iFrame"},"content":{"rendered":"\n

Some newbie web designers<\/a> tend to overthink solutions to simple problems. One such problem is how to post HTML<\/a> form data to an iFrame.<\/p>\n\n\n\n

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

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.<\/p>\n\n\n\n

So how do I Post HTML Form Data to an iFrame Without JavaScript<\/h2>\n\n\n\n

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.<\/p>\n\n\n\n

Here is a gist that shows you how the code should look like.<\/p>\n\n\n\n

<form action="iframe-source.php" target="iframe-name" method="post">\n\t\t\t\n  <label for="text">Input Label:<\/label>\n  <input type="text" name="text" id="text">\n  <input type="submit" value="Submit">\n\t\t\t\n<\/form>\n\t\t<!-- some more HTML here. -->\n<iframe name="iframe-name" src="iframe-source.php"><\/iframe><\/code><\/pre>\n\n\n\n
This solution will only work for an iFrame embedded on the same page which has the form. Here is a solution<\/a> that allows you to post HTML form data to another web<\/a> page.<\/p>\n","protected":false},"excerpt":{"rendered":"
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…<\/p>\n","protected":false},"author":1,"featured_media":4015,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,23,20],"tags":[303,307,635,637],"yoast_head":"\nHow to Post HTML Form Data to an iFrame on the Same Page<\/title>\n<meta name=\"description\" content=\"Here is how to post HTML form data to an iFrame that is embedded on the same page as the form using targets and name attributes\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/local.brightwhiz\/post-html-form-data-iframe\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Post HTML Form Data to an iFrame on the Same Page\" \/>\n<meta property=\"og:description\" content=\"Here is how to post HTML form data to an iFrame that is embedded on the same page as the form using targets and name attributes\" \/>\n<meta property=\"og:url\" content=\"http:\/\/local.brightwhiz\/post-html-form-data-iframe\/\" \/>\n<meta property=\"og:site_name\" content=\"Brightwhiz.com\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/brightwhiz\/\" \/>\n<meta property=\"article:published_time\" content=\"2017-02-07T17:07:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-12-08T18:06:54+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/02\/Post-HTML-Form.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Michael Bright\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@brightwhizmag\" \/>\n<meta name=\"twitter:site\" content=\"@brightwhizmag\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Michael Bright\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"http:\/\/local.brightwhiz\/post-html-form-data-iframe\/#article\",\"isPartOf\":{\"@id\":\"http:\/\/local.brightwhiz\/post-html-form-data-iframe\/\"},\"author\":{\"name\":\"Michael Bright\",\"@id\":\"http:\/\/local.brightwhiz\/#\/schema\/person\/81f0f3126f13834ae2e7f381b3028e32\"},\"headline\":\"How to Post HTML Form Data to an iFrame\",\"datePublished\":\"2017-02-07T17:07:09+00:00\",\"dateModified\":\"2021-12-08T18:06:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"http:\/\/local.brightwhiz\/post-html-form-data-iframe\/\"},\"wordCount\":203,\"commentCount\":0,\"publisher\":{\"@id\":\"http:\/\/local.brightwhiz\/#organization\"},\"image\":{\"@id\":\"http:\/\/local.brightwhiz\/post-html-form-data-iframe\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/02\/Post-HTML-Form.jpg\",\"keywords\":[\"HTML\",\"iFrame\",\"Web\",\"Web Design\"],\"articleSection\":[\"Articles\",\"Guides\",\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"http:\/\/local.brightwhiz\/post-html-form-data-iframe\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"http:\/\/local.brightwhiz\/post-html-form-data-iframe\/\",\"url\":\"http:\/\/local.brightwhiz\/post-html-form-data-iframe\/\",\"name\":\"How to Post HTML Form Data to an iFrame on the Same Page\",\"isPartOf\":{\"@id\":\"http:\/\/local.brightwhiz\/#website\"},\"primaryImageOfPage\":{\"@id\":\"http:\/\/local.brightwhiz\/post-html-form-data-iframe\/#primaryimage\"},\"image\":{\"@id\":\"http:\/\/local.brightwhiz\/post-html-form-data-iframe\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/02\/Post-HTML-Form.jpg\",\"datePublished\":\"2017-02-07T17:07:09+00:00\",\"dateModified\":\"2021-12-08T18:06:54+00:00\",\"description\":\"Here is how to post HTML form data to an iFrame that is embedded on the same page as the form using targets and name attributes\",\"breadcrumb\":{\"@id\":\"http:\/\/local.brightwhiz\/post-html-form-data-iframe\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/local.brightwhiz\/post-html-form-data-iframe\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/local.brightwhiz\/post-html-form-data-iframe\/#primaryimage\",\"url\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/02\/Post-HTML-Form.jpg\",\"contentUrl\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/02\/Post-HTML-Form.jpg\",\"width\":1200,\"height\":630,\"caption\":\"Post HTML Form to iFrame\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/local.brightwhiz\/post-html-form-data-iframe\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"http:\/\/local.brightwhiz\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Post HTML Form Data to an iFrame\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\/\/local.brightwhiz\/#website\",\"url\":\"http:\/\/local.brightwhiz\/\",\"name\":\"Brightwhiz.com\",\"description\":\"Best Tech guides, Tutorials, and News\",\"publisher\":{\"@id\":\"http:\/\/local.brightwhiz\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\/\/local.brightwhiz\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"http:\/\/local.brightwhiz\/#organization\",\"name\":\"Brightwhiz\",\"url\":\"http:\/\/local.brightwhiz\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/local.brightwhiz\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/11\/brightwhiz-com-logo-orange.png\",\"contentUrl\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/11\/brightwhiz-com-logo-orange.png\",\"width\":706,\"height\":135,\"caption\":\"Brightwhiz\"},\"image\":{\"@id\":\"http:\/\/local.brightwhiz\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/brightwhiz\/\",\"https:\/\/x.com\/brightwhizmag\",\"https:\/\/instagram.com\/bright_whiz\/\",\"https:\/\/www.pinterest.com\/sobbayi\/\",\"https:\/\/www.youtube.com\/channel\/UC6sCdP_d_RiTIM7ErFT-PSQ\"]},{\"@type\":\"Person\",\"@id\":\"http:\/\/local.brightwhiz\/#\/schema\/person\/81f0f3126f13834ae2e7f381b3028e32\",\"name\":\"Michael Bright\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/local.brightwhiz\/#\/schema\/person\/image\/\",\"url\":\"http:\/\/1.gravatar.com\/avatar\/da90485875ff0aafa38fdd494abe87d1?s=96&d=mm&r=g\",\"contentUrl\":\"http:\/\/1.gravatar.com\/avatar\/da90485875ff0aafa38fdd494abe87d1?s=96&d=mm&r=g\",\"caption\":\"Michael Bright\"},\"sameAs\":[\"https:\/\/sobbayi.com\"],\"url\":\"http:\/\/local.brightwhiz\/author\/sobbayiadmin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Post HTML Form Data to an iFrame on the Same Page","description":"Here is how to post HTML form data to an iFrame that is embedded on the same page as the form using targets and name attributes","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/local.brightwhiz\/post-html-form-data-iframe\/","og_locale":"en_US","og_type":"article","og_title":"How to Post HTML Form Data to an iFrame on the Same Page","og_description":"Here is how to post HTML form data to an iFrame that is embedded on the same page as the form using targets and name attributes","og_url":"http:\/\/local.brightwhiz\/post-html-form-data-iframe\/","og_site_name":"Brightwhiz.com","article_publisher":"https:\/\/www.facebook.com\/brightwhiz\/","article_published_time":"2017-02-07T17:07:09+00:00","article_modified_time":"2021-12-08T18:06:54+00:00","og_image":[{"width":1200,"height":630,"url":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/02\/Post-HTML-Form.jpg","type":"image\/jpeg"}],"author":"Michael Bright","twitter_card":"summary_large_image","twitter_creator":"@brightwhizmag","twitter_site":"@brightwhizmag","twitter_misc":{"Written by":"Michael Bright","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"http:\/\/local.brightwhiz\/post-html-form-data-iframe\/#article","isPartOf":{"@id":"http:\/\/local.brightwhiz\/post-html-form-data-iframe\/"},"author":{"name":"Michael Bright","@id":"http:\/\/local.brightwhiz\/#\/schema\/person\/81f0f3126f13834ae2e7f381b3028e32"},"headline":"How to Post HTML Form Data to an iFrame","datePublished":"2017-02-07T17:07:09+00:00","dateModified":"2021-12-08T18:06:54+00:00","mainEntityOfPage":{"@id":"http:\/\/local.brightwhiz\/post-html-form-data-iframe\/"},"wordCount":203,"commentCount":0,"publisher":{"@id":"http:\/\/local.brightwhiz\/#organization"},"image":{"@id":"http:\/\/local.brightwhiz\/post-html-form-data-iframe\/#primaryimage"},"thumbnailUrl":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/02\/Post-HTML-Form.jpg","keywords":["HTML","iFrame","Web","Web Design"],"articleSection":["Articles","Guides","Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["http:\/\/local.brightwhiz\/post-html-form-data-iframe\/#respond"]}]},{"@type":"WebPage","@id":"http:\/\/local.brightwhiz\/post-html-form-data-iframe\/","url":"http:\/\/local.brightwhiz\/post-html-form-data-iframe\/","name":"How to Post HTML Form Data to an iFrame on the Same Page","isPartOf":{"@id":"http:\/\/local.brightwhiz\/#website"},"primaryImageOfPage":{"@id":"http:\/\/local.brightwhiz\/post-html-form-data-iframe\/#primaryimage"},"image":{"@id":"http:\/\/local.brightwhiz\/post-html-form-data-iframe\/#primaryimage"},"thumbnailUrl":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/02\/Post-HTML-Form.jpg","datePublished":"2017-02-07T17:07:09+00:00","dateModified":"2021-12-08T18:06:54+00:00","description":"Here is how to post HTML form data to an iFrame that is embedded on the same page as the form using targets and name attributes","breadcrumb":{"@id":"http:\/\/local.brightwhiz\/post-html-form-data-iframe\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/local.brightwhiz\/post-html-form-data-iframe\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/local.brightwhiz\/post-html-form-data-iframe\/#primaryimage","url":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/02\/Post-HTML-Form.jpg","contentUrl":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/02\/Post-HTML-Form.jpg","width":1200,"height":630,"caption":"Post HTML Form to iFrame"},{"@type":"BreadcrumbList","@id":"http:\/\/local.brightwhiz\/post-html-form-data-iframe\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/local.brightwhiz\/"},{"@type":"ListItem","position":2,"name":"How to Post HTML Form Data to an iFrame"}]},{"@type":"WebSite","@id":"http:\/\/local.brightwhiz\/#website","url":"http:\/\/local.brightwhiz\/","name":"Brightwhiz.com","description":"Best Tech guides, Tutorials, and News","publisher":{"@id":"http:\/\/local.brightwhiz\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/local.brightwhiz\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"http:\/\/local.brightwhiz\/#organization","name":"Brightwhiz","url":"http:\/\/local.brightwhiz\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/local.brightwhiz\/#\/schema\/logo\/image\/","url":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/11\/brightwhiz-com-logo-orange.png","contentUrl":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2021\/11\/brightwhiz-com-logo-orange.png","width":706,"height":135,"caption":"Brightwhiz"},"image":{"@id":"http:\/\/local.brightwhiz\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/brightwhiz\/","https:\/\/x.com\/brightwhizmag","https:\/\/instagram.com\/bright_whiz\/","https:\/\/www.pinterest.com\/sobbayi\/","https:\/\/www.youtube.com\/channel\/UC6sCdP_d_RiTIM7ErFT-PSQ"]},{"@type":"Person","@id":"http:\/\/local.brightwhiz\/#\/schema\/person\/81f0f3126f13834ae2e7f381b3028e32","name":"Michael Bright","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/local.brightwhiz\/#\/schema\/person\/image\/","url":"http:\/\/1.gravatar.com\/avatar\/da90485875ff0aafa38fdd494abe87d1?s=96&d=mm&r=g","contentUrl":"http:\/\/1.gravatar.com\/avatar\/da90485875ff0aafa38fdd494abe87d1?s=96&d=mm&r=g","caption":"Michael Bright"},"sameAs":["https:\/\/sobbayi.com"],"url":"http:\/\/local.brightwhiz\/author\/sobbayiadmin\/"}]}},"_links":{"self":[{"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/posts\/4014"}],"collection":[{"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/comments?post=4014"}],"version-history":[{"count":0,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/posts\/4014\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/media\/4015"}],"wp:attachment":[{"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/media?parent=4014"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/categories?post=4014"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/tags?post=4014"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}