{"id":54,"date":"2015-11-24T06:01:00","date_gmt":"2015-11-24T06:01:00","guid":{"rendered":"http:\/\/waynenguyen.org\/dev\/2015\/11\/24\/open-popup-window-while-sending-pos\/"},"modified":"2016-05-21T03:15:52","modified_gmt":"2016-05-21T03:15:52","slug":"open-popup-window-while-sending-pos","status":"publish","type":"post","link":"https:\/\/bruceng.com\/dev\/?p=54","title":{"rendered":"Open a popup window while sending post data"},"content":{"rendered":"
\nIt’s actually very simple. It’s possible to create a form element and set the target to _blank so that upon submission the target will be opened in a new browser window\/tab.
\nUse hidden input elements to pass data to the target URL.<\/p>\n

<form action=”<target URL>” method=”POST” target=”_blank”>
\n  <input type=”hidden” name=”Name” value=”Wayne”>
\n  <input type=”submit” value=”Click here to open the window”>
\n<\/form><\/p>\n

If  you don’t want a button, use CSS to style the submit button to make it look like a hyperlink.<\/p>\n

If you use ASP.NET or SharePoint the framework may complain that there should be only one form tag in the page. In that case use Javascript to construct the form on the fly when the link is clicked, then get rid of the form element after the window is open.<\/p>\n

function openWindow()
\n{
\n var mapForm = document.createElement(“form”);
\n mapForm.style.display=”none”;
\n mapForm.target = “Map”;
\n mapForm.method = “POST”; \/\/ or “post” if appropriate
\n mapForm.action = “http:\/\/localhost:55079\/Default.aspx”;<\/p>\n

var mapInput = document.createElement(“input”);
\n mapInput.type = “text”;
\n mapInput.name = “test”;
\n mapInput.value = “Test Data”;
\n mapForm.appendChild(mapInput);<\/p>\n

document.body.appendChild(mapForm);<\/p>\n

map = window.open(“”, “Map”, “status=0,title=0,height=600,width=800”);<\/p>\n

if (map) {
\n mapForm.submit();
\n }
\n \/\/delete the form element
\n mapForm.parentNode.removeChild(mapForm);
\n}<\/p>\n

<a href=”#” onclick=”javascript:openWindow();”>Click here to open window<\/a><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

It’s actually very simple. It’s possible to create a form element and set the target to _blank so that upon submission the target will be opened in a new browser window\/tab. Use hidden input elements to pass data to the target URL. <form action=”<target URL>” method=”POST” target=”_blank”>   <input type=”hidden” name=”Name” value=”Wayne”>   <input type=”submit” … Continue reading “Open a popup window while sending post data”<\/span><\/a><\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[24,20,19],"class_list":["post-54","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-http","tag-javascript","tag-web"],"_links":{"self":[{"href":"https:\/\/bruceng.com\/dev\/index.php?rest_route=\/wp\/v2\/posts\/54","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bruceng.com\/dev\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bruceng.com\/dev\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bruceng.com\/dev\/index.php?rest_route=\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/bruceng.com\/dev\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=54"}],"version-history":[{"count":1,"href":"https:\/\/bruceng.com\/dev\/index.php?rest_route=\/wp\/v2\/posts\/54\/revisions"}],"predecessor-version":[{"id":174,"href":"https:\/\/bruceng.com\/dev\/index.php?rest_route=\/wp\/v2\/posts\/54\/revisions\/174"}],"wp:attachment":[{"href":"https:\/\/bruceng.com\/dev\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=54"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bruceng.com\/dev\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=54"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bruceng.com\/dev\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=54"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}