{"id":4017,"date":"2017-02-07T12:08:39","date_gmt":"2017-02-07T17:08:39","guid":{"rendered":"http:\/\/local.brightwhiz\/?p=4017"},"modified":"2021-12-08T13:09:51","modified_gmt":"2021-12-08T18:09:51","slug":"post-web-forms-iframe-another-page","status":"publish","type":"post","link":"http:\/\/local.brightwhiz\/post-web-forms-iframe-another-page\/","title":{"rendered":"How to Post Web Forms to an iFrame on Another Page"},"content":{"rendered":"\n<p>We recently discussed how to post <a href=\"\/\/local.brightwhiz\/tag\/html\/\">HTML<\/a> form data to an iFrame. But we saw that the <a href=\"http:\/\/local.brightwhiz\/post-html-form-data-iframe\/\">solution we provided<\/a> only works if the iFrame is on the same page as the form.<\/p>\n\n\n\n<p>This time around we decided to show you how you can do the same thing. This time we will be targeting an iFrame <a href=\"\/\/local.brightwhiz\/tag\/embedded\/\">embedded<\/a> on another <a href=\"\/\/local.brightwhiz\/tag\/web\/\">web<\/a> page on the same domain. We stress the same domain here because we are going to be using JavaScript and a little bit of <a href=\"\/\/local.brightwhiz\/tag\/php\/\">PHP<\/a>.<\/p>\n\n\n\n<p>We are aware of the cross-domain scripting restrictions that come with <a href=\"\/\/local.brightwhiz\/tag\/javascript\/\">JavaScript<\/a> that restrict us from applying this solution to an iFrame loaded from another domain.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Setting to Target an iFrame on Another Web Page<\/h2>\n\n\n\n<p>The first page is a simple HTML file that will hold the form that we will use to submit the respective data. The form can be something simple like this.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Page 1 code<\/h3>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-markup\">&lt;form action=&quot;Page2.php&quot; method=&quot;post&quot;&gt;\n  \n  &lt;label for=&quot;text&quot;&gt;Input Label:&lt;\/label&gt;\n  &lt;input type=&quot;text&quot; name=&quot;text&quot; id=&quot;text&quot;&gt;\n  \n  &lt;input type=&quot;hidden&quot; name=&quot;page2control&quot; value=&quot;authorized&quot;&gt;\n  &lt;input type=&quot;submit&quot; value=&quot;Submit&quot;&gt;\n  \n&lt;\/form&gt;<\/code><\/pre>\n\n\n\n<p>We will then create another page that can be processed server-side. Aside from processing the post data from the form, this file will be used to create a mirror of the form from the first page only this time it will change the target to the iFrame which is now embedded on the same file.<\/p>\n\n\n\n<p>The page will then be pushed back to the browser with some JavaScript code tied to it. When the JavaScript is executed, it will resubmit the form and the browser will target the iFrame as desired. Here is some code to illustrate.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Page 2 code<\/h3>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-php\">&lt;?php \n    \/\/ validate input is from the form. \n    \/\/ Note: no other validations have been done\n    if ($_POST[&quot;page2control&quot;] == &quot;authorized&quot;)\n    {\n?&gt;\n        &lt;form id=&quot;page2form&quot; target=&quot;iframe-name&quot; method=&quot;post&quot; action=&quot;process-form-data.php&quot;&gt;\n            &lt;input name=&quot;text&quot; value=&quot;&lt;?= $_POST[&#039;text&#039;] ?&gt;&quot;&gt;\n        &lt;\/form&gt;\n        &lt;!-- the javascript to repost the form --&gt;\n        &lt;script type=&quot;text\/javascript&quot;&gt;\n        $(function(){\n            $(&quot;#page2form&quot;).submit();\n        });\n        &lt;\/script&gt;\n&lt;?php\n    }\n?&gt;<\/code><\/pre>\n\n\n\n<p>There you have it. A simple way to send HTML form post data to an iFrame embedded on separate page.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We recently discussed how to post HTML form data to an iFrame. But we saw that the solution we provided only works if the iFrame is on the same page&#8230;<\/p>\n","protected":false},"author":1,"featured_media":4018,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,23,20],"tags":[303,307,328,452,635,636,637,638],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Post Web Form Data to an iFrame on Another Page<\/title>\n<meta name=\"description\" content=\"Here is how you can post Web form data to an iFrame embedded on another page using some server side features in PHP and JavaScript\" \/>\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-web-forms-iframe-another-page\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Post Web Form Data to an iFrame on Another Page\" \/>\n<meta property=\"og:description\" content=\"Here is how you can post Web form data to an iFrame embedded on another page using some server side features in PHP and JavaScript\" \/>\n<meta property=\"og:url\" content=\"http:\/\/local.brightwhiz\/post-web-forms-iframe-another-page\/\" \/>\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:08:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-12-08T18:09:51+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/02\/iFrame-on-Another-Page.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=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"http:\/\/local.brightwhiz\/post-web-forms-iframe-another-page\/#article\",\"isPartOf\":{\"@id\":\"http:\/\/local.brightwhiz\/post-web-forms-iframe-another-page\/\"},\"author\":{\"name\":\"Michael Bright\",\"@id\":\"http:\/\/local.brightwhiz\/#\/schema\/person\/81f0f3126f13834ae2e7f381b3028e32\"},\"headline\":\"How to Post Web Forms to an iFrame on Another Page\",\"datePublished\":\"2017-02-07T17:08:39+00:00\",\"dateModified\":\"2021-12-08T18:09:51+00:00\",\"mainEntityOfPage\":{\"@id\":\"http:\/\/local.brightwhiz\/post-web-forms-iframe-another-page\/\"},\"wordCount\":282,\"commentCount\":0,\"publisher\":{\"@id\":\"http:\/\/local.brightwhiz\/#organization\"},\"image\":{\"@id\":\"http:\/\/local.brightwhiz\/post-web-forms-iframe-another-page\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/02\/iFrame-on-Another-Page.jpg\",\"keywords\":[\"HTML\",\"iFrame\",\"JavaScript\",\"PHP\",\"Web\",\"Web Applications\",\"Web Design\",\"Web Development\"],\"articleSection\":[\"Articles\",\"Guides\",\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"http:\/\/local.brightwhiz\/post-web-forms-iframe-another-page\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"http:\/\/local.brightwhiz\/post-web-forms-iframe-another-page\/\",\"url\":\"http:\/\/local.brightwhiz\/post-web-forms-iframe-another-page\/\",\"name\":\"How to Post Web Form Data to an iFrame on Another Page\",\"isPartOf\":{\"@id\":\"http:\/\/local.brightwhiz\/#website\"},\"primaryImageOfPage\":{\"@id\":\"http:\/\/local.brightwhiz\/post-web-forms-iframe-another-page\/#primaryimage\"},\"image\":{\"@id\":\"http:\/\/local.brightwhiz\/post-web-forms-iframe-another-page\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/02\/iFrame-on-Another-Page.jpg\",\"datePublished\":\"2017-02-07T17:08:39+00:00\",\"dateModified\":\"2021-12-08T18:09:51+00:00\",\"description\":\"Here is how you can post Web form data to an iFrame embedded on another page using some server side features in PHP and JavaScript\",\"breadcrumb\":{\"@id\":\"http:\/\/local.brightwhiz\/post-web-forms-iframe-another-page\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/local.brightwhiz\/post-web-forms-iframe-another-page\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/local.brightwhiz\/post-web-forms-iframe-another-page\/#primaryimage\",\"url\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/02\/iFrame-on-Another-Page.jpg\",\"contentUrl\":\"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/02\/iFrame-on-Another-Page.jpg\",\"width\":1200,\"height\":630,\"caption\":\"iFrame on Another Page\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/local.brightwhiz\/post-web-forms-iframe-another-page\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"http:\/\/local.brightwhiz\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Post Web Forms to an iFrame on Another Page\"}]},{\"@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 Web Form Data to an iFrame on Another Page","description":"Here is how you can post Web form data to an iFrame embedded on another page using some server side features in PHP and JavaScript","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-web-forms-iframe-another-page\/","og_locale":"en_US","og_type":"article","og_title":"How to Post Web Form Data to an iFrame on Another Page","og_description":"Here is how you can post Web form data to an iFrame embedded on another page using some server side features in PHP and JavaScript","og_url":"http:\/\/local.brightwhiz\/post-web-forms-iframe-another-page\/","og_site_name":"Brightwhiz.com","article_publisher":"https:\/\/www.facebook.com\/brightwhiz\/","article_published_time":"2017-02-07T17:08:39+00:00","article_modified_time":"2021-12-08T18:09:51+00:00","og_image":[{"width":1200,"height":630,"url":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/02\/iFrame-on-Another-Page.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":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"http:\/\/local.brightwhiz\/post-web-forms-iframe-another-page\/#article","isPartOf":{"@id":"http:\/\/local.brightwhiz\/post-web-forms-iframe-another-page\/"},"author":{"name":"Michael Bright","@id":"http:\/\/local.brightwhiz\/#\/schema\/person\/81f0f3126f13834ae2e7f381b3028e32"},"headline":"How to Post Web Forms to an iFrame on Another Page","datePublished":"2017-02-07T17:08:39+00:00","dateModified":"2021-12-08T18:09:51+00:00","mainEntityOfPage":{"@id":"http:\/\/local.brightwhiz\/post-web-forms-iframe-another-page\/"},"wordCount":282,"commentCount":0,"publisher":{"@id":"http:\/\/local.brightwhiz\/#organization"},"image":{"@id":"http:\/\/local.brightwhiz\/post-web-forms-iframe-another-page\/#primaryimage"},"thumbnailUrl":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/02\/iFrame-on-Another-Page.jpg","keywords":["HTML","iFrame","JavaScript","PHP","Web","Web Applications","Web Design","Web Development"],"articleSection":["Articles","Guides","Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["http:\/\/local.brightwhiz\/post-web-forms-iframe-another-page\/#respond"]}]},{"@type":"WebPage","@id":"http:\/\/local.brightwhiz\/post-web-forms-iframe-another-page\/","url":"http:\/\/local.brightwhiz\/post-web-forms-iframe-another-page\/","name":"How to Post Web Form Data to an iFrame on Another Page","isPartOf":{"@id":"http:\/\/local.brightwhiz\/#website"},"primaryImageOfPage":{"@id":"http:\/\/local.brightwhiz\/post-web-forms-iframe-another-page\/#primaryimage"},"image":{"@id":"http:\/\/local.brightwhiz\/post-web-forms-iframe-another-page\/#primaryimage"},"thumbnailUrl":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/02\/iFrame-on-Another-Page.jpg","datePublished":"2017-02-07T17:08:39+00:00","dateModified":"2021-12-08T18:09:51+00:00","description":"Here is how you can post Web form data to an iFrame embedded on another page using some server side features in PHP and JavaScript","breadcrumb":{"@id":"http:\/\/local.brightwhiz\/post-web-forms-iframe-another-page\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/local.brightwhiz\/post-web-forms-iframe-another-page\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/local.brightwhiz\/post-web-forms-iframe-another-page\/#primaryimage","url":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/02\/iFrame-on-Another-Page.jpg","contentUrl":"http:\/\/local.brightwhiz\/wp-content\/uploads\/2017\/02\/iFrame-on-Another-Page.jpg","width":1200,"height":630,"caption":"iFrame on Another Page"},{"@type":"BreadcrumbList","@id":"http:\/\/local.brightwhiz\/post-web-forms-iframe-another-page\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/local.brightwhiz\/"},{"@type":"ListItem","position":2,"name":"How to Post Web Forms to an iFrame on Another Page"}]},{"@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\/4017"}],"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=4017"}],"version-history":[{"count":0,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/posts\/4017\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/media\/4018"}],"wp:attachment":[{"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/media?parent=4017"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/categories?post=4017"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/local.brightwhiz\/wp-json\/wp\/v2\/tags?post=4017"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}