| Rowsdower! |
09-28-2012 05:11 PM |
As far as I know you need either AJAX or an HTML form element (or both) in order to send data via the "post" method. That leaves you with a couple of options, off of the top of my head:
1) If you have a form (and you're not just trying to post from an anchor tag, for example) then you can open a blank window using window.open and then submit the form with that window as its target: http://stackoverflow.com/questions/3...method-problem
(really, you could do this without javascript just by using the target="_blank" attribute in the first place)
2) If you don't have/don't want a form in the page for some reason, you can do an AJAX post submission and use the callback function to open the new window, populated with the server's response.
I got bored so I put this together for you:
Code:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Javascript Post to New Window</title>
<script type="text/javascript">
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
};
}();
</script>
<style type="text/css">
*{margin:0;padding:0;}
body{padding:10px;font-family:verdana;font-size:12px;}
h1{font-size:20px;font-weight:bold;margin-bottom:10px;}
p{width:500px;margin-bottom:10px;}
input,select,textarea{display:block;margin-bottom:10px;font-family:'times new roman';font-size:14px;}
</style>
</head>
<body>
<h1>Try this:</h1>
<input type="button" value="Open Window" onclick="post_to_new_window.ajax('/my_page.php','variable_1=a value&variable_2=some other value');return false;" />
<form action="/my_page.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>
</body>
</html>
The first button performs the post without using any form or inputs. The second button sends the post to a new window using the form itself. |
