Previous     Next

Opening a new browser window with POST data July 15

Filed under Coding, Web by Gath | 8 comments

Every now and again I want to have a link that opens a new browser window, and passes some values in. It’s easy when you just need to pass in GET data:

http://dummydomain.com?value1=just&value2=a&value3=test

But it becomes harder when you want to pass in POST values.

Maybe not that hard…How about opening the new window, adding the POST variables to the form, and then posting it to the relevant domain. That would work :)

This code gives you a button which will open a new window and automatically log in to your WordPress blog.


<html>
<head>

    <script type='text/javascript'>
    function LoginToWordPressBlog()
    {
    var sData;
    var sUserName = "YourUserName";
    var sPassword = "YourPassword";
    var sDomain = "http://YourDomain.com";

    sData = "<form name='loginform' id='loginform' action='" + sDomain + "/wp-login.php' method='post'>";
    sData = sData + "<input type='text' name='log' id='user_login' class='input' value='" + sUserName + "' />";
    sData = sData + "<input type='password' name='pwd' id='user_pass' class='input' value='" + sPassword + "' />";
    sData = sData + "<input type='submit' name='wp-submit' id='wp-submit' value='Login »' />";
    sData = sData + "<input type='hidden' name='redirect_to' value='/wp-admin/' />";
    sData = sData + "<input type='hidden' id='wordpress_test_cookie' name='wordpress_test_cookie' value='WP Cookie check' />";
    sData = sData + "</form>";
    sData = sData + "<script type='text/javascript'>";
    sData = sData + "document.cookie='wordpress_test_cookie=home; expires=Fri, 11 Jul 2009 05:23:14 +0000; path=/';";
    sData = sData + "document.loginform.submit();</sc" + "ript>";
    OpenWindow=window.open("", "newwin");
    OpenWindow.document.write(sData);
    OpenWindow.document.close()
    }
    </script>
</head>
<body>
    <form id="form1">
         <input id="Button1" type="button" value="Login To Wordpress" onclick='LoginToWordPressBlog()' />
    </form>
</body>
</html>

The method above is in javascript, so it should work for pretty much everybody. The steps are:

  1. Create a new window
  2. Use document.write to write the HTML POST data tags to the new window.
  3. Submit the new window.

The only tough part now is finding out which POST tags you need - and the best tool for that is Fiddler. It even shows you the cookie values that you need.


If you liked this, then subscribe to my RSS feed

8 comments

  1. Benz Town Cititzen Jul 18

    alternative:

    newWindow = window.open (”", “newWindow”, “”); newWindow.focus();
    yourLocalForm.method = “post”;
    yourLocalForm.target = “newWindow”;
    yourLocalForm.submit();

  2. Adam Jul 18

    other alternative:

    yourLocalForm.method = “post”;
    yourLocalForm.target = “_blank”;
    yourLocalForm.action = “newWindowURL”;
    yourLocalForm.submit();

    with your form’s target set to _blank, it should be opening a new window with the post data

  3. Eugene Rimmer Jul 18

    Hmm, not a very modern way. Why not create a form tag through DOM, append appropriate fields, set its method=”POST” and target=”_blank”, and then submit it? I think its a right way today, not those document.write()’s. Is it gonna work?

  4. Eugene Rimmer Jul 18

    Adam, you were faster than me :)

  5. WebAPI.org Jul 18

    Try this:

    function test() {
    var win=open(”",”win”);
    return true;
    }

  6. WebAPI.org Jul 18

    [script]
    function test() {
    var win=open(”",”win”);
    return true;
    }
    [/script]
    [form method=”post” action=”test.asp” target=”win” onsubmit=”return test();”]
    [input name=”field”][input type=”submit”]
    [/form]

    (replace [ ] with proper tags)

    Solution with target=”_blank” doesn’t wotk when you want to control new popup (size, toolbar, menu, etc.)

  7. Gath Jul 18

    Hi Everyone,

    I’m totally fine that a newer way to do things is to manipulate the DOM structure. My example definitely works (just enter your blog details & try it), but perhaps the DOM is the better way to go.

    The examples that everyone has given mostly show how to open a new window & don’t set the Action property or any of the other POST values. Anyone have time to come up with a full working demo? You can email it to me & I’ll add it as a follow up with full attribution & a link.

    Cheers,
    Gath

  8. AKME Aug 28

    Here’s a well-encapsulated method.

    function postNewWindowAbsolute(absoluteURL, windowName, windowFeatures, paramMap) {
    if (!paramMap) paramMap = {};
    var win = window.open(”", windowName, windowFeatures);
    var form = document.createElement(”form”);
    form.setAttribute(”name”,windowName);
    form.setAttribute(”method”,”POST”);
    form.setAttribute(”action”,absoluteURL);
    form.setAttribute(”target”,windowName);
    for (var key in paramMap) {
    var elem = document.createElement(”input”);
    elem.setAttribute(”type”,”hidden”);
    elem.setAttribute(”name”,key);
    elem.setAttribute(”value”,paramMap[key]);
    form.appendChild(elem);
    }
    var body = document.getElementsByTagName(”body”)[0];
    body.appendChild(form);
    form.submit();
    body.removeChild(form);
    }

Leave a reply