Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Sep 2012
    Posts
    47
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to _POST a variable with window.open?

    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]?

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,581
    Thanks
    23
    Thanked 644 Times in 643 Posts
    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;
    ?>

  • #3
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    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.
    Last edited by Rowsdower!; 09-28-2012 at 06:16 PM.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #4
    New Coder
    Join Date
    Sep 2012
    Posts
    47
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?
    Last edited by john6; 09-29-2012 at 07:54 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •