Submit Post Data to a New Window
Need to send data to a page in a new window without being locked into using a "get" method?
This multipurpose function will allow you to choose your method of submitting post data. It's worth mentioning that the method of submitting a "post" form to a new window DOES NOT REQUIRE JAVASCRIPT in order to be done. It can be accomplished simply by specifying target="_blank" in the form element's attributes. But, since we're in the javascript section, and since it might happen that this functionality might be useful in a javascript setting where HTML might not be easy or desirable to change, we'll press on.
So...Have a form in your page? Great! Just tell it to run "post_to_new_window.form_target" as its "onsubmit" action and pass the form element object as the function parameter and it works. Trying to avoid using a form? Just trying to use an anchor tag or a simple button to post some data? Also great! Just fire off "post_to_new_window.ajax" as the onclick action with the destination URI and the URI-encoded post data as the function parameters and you're all set.
So how does it really work?
Here is the script you will need:
var post_to_new_window = function(){
//set the new window's title and dimensions...
var your_title = "Hey, it's a new page!!";
var window_width = 800;
var window_height = 600;
//functions:
//Method 1: use an ajax submission to send the post data WITHOUT having to have a form in the page...
var ajax = function(url,data){
//NOTE: this function assumes your "data" string is ALREADY URI ENCODED...if not, you will need to build in functionality to parse and encode as needed...
//set up your AJAX submission...
if(window.XMLHttpRequest){
req = new XMLHttpRequest();
}
else if(window.ActiveXObject){
req = new ActiveXObject("Microsoft.XMLHTTP");
}
if(req != undefined){
req.onreadystatechange = function(){
// fires each time the ready state is updated
if(req.readyState == 4){
// fires only if the request is "loaded"
if(req.status == 200){
// fired only if the response header was a status 200: "OK"
var ajax_response_text = req.responseText;
//open the window...
var new_window = window.open("","new_window","width="+window_width+",height="+window_height);
//position the window on the screen...
new_window.moveTo(screen.width/2-(window_width/2),screen.height/2-(window_height/2));
new_window.document.open("text/html", "replace");
var complete_html_markup = "<!doctype html>\n<html>\n<head>\n<meta http-equiv=\"Content-Type\" content=\"text/html;charset=utf-8\" />\n<title>" + your_title + "</title>\n<link type=\"image/x-icon\" href=\"/favicon.ico\" rel=\"shortcut icon\" />\n<link rel=\"stylesheet\" href=\"/panel/style.css\" media=\"all\" />\n</head>\n<body>\n";
complete_html_markup += ajax_response_text;
complete_html_markup += "\n</body>\n</html>";
new_window.document.write(complete_html_markup);
new_window.document.close();
}
else{
// fires if the response header is anything OTHER THAN 200, and prints the details of the error code received
alert('Post submission failed.')
}
}
};
req.open("POST", url, true);
req.setRequestHeader("Content-type","application/x-www-form-urlencoded");
req.send(data);
}
//return false to prevent following a link's href (if that happens to be the source of the function call)...
return false;
};
//Method 2: use target attribute on an existing form element in the page to send that post data (assuming the form's method is "post" - otherwise this will have the same effect but with a "get" method)...
var form_target = function(form_element){
//set the form's target to "new_window"
form_element.setAttribute('target','new_window');
//open the window...
var new_window = window.open("","new_window","width="+window_width+",height="+window_height);
//position the window on the screen...
new_window.moveTo(screen.width/2-(window_width/2),screen.height/2-(window_height/2));
//submit the form...
form_element.submit();
};
//make functions public so they can be used...
return{
ajax:ajax,
form_target:form_target
};
}();
Then, to put it into use, you just use event handlers or the more brutal "onclick" or "onsubmit" attributes (as I have done here out of laziness) to get things into action:
<input type="button" value="Open Window"
onclick="post_to_new_window.ajax('/soundboard.php','variable_1=a value&variable_2=some other value');return false;" />
<form action="/soundboard.php" method="post"
onsubmit="post_to_new_window.form_target(this);return false;">
<div>
<input type="text" name="variable_1" value="a form value" />
<input type="text" name="variable_2" value="some other form value" />
<input type="submit" value="Post to New Window" />
</div>
</form>
