How to _POST a variable with window.open?

john6 · 09-28-2012, 12:15 PM

I have a link which when clicked does a window.open

How can I _POST a variable like myVar='hello' so in the newly opened window I can receive that _POST[myvar]?

sunfighter · 09-28-2012, 04:53 PM

Your code for the calling window:

Code:

<!DOCTYPE html>
<html>
<head>
<script>
function open_win()
{
window.open("test_3.php?myvar=hello");
}
</script>
</head>

<body>
<form>
<input type="button" value="Open Window" onclick="open_win()">
</form>
</body>
</html>

The window it opens is like this:

PHP Code:


			
<?php

$bill = $_GET["myvar"];

echo $bill;

?>

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&amp;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.

john6 · 09-29-2012, 06:47 AM

Oh god, thats too much code!

Maybe I should do a $SESSION instead?

But does anyone know how to attach a session code to window.open?