X

Javascript http post data to new window or pop up

Javascript

So was going through some legacy code to fix some security issues. One of them was there were links that were passing the data on url request. e.g NewFile.aspx?uid=1234

Rather than storing data in a session sometimes developers use shortcuts to do this, could be due to the pressure or time limit we have in shipping a product.

Aside from that lets see how we can fix this issue, what we want to accomplish is to post some data without calling server code and we can achieve that by some tricks in javascript.

Lets say you have a link that will say <a >
(Note I know this is not good again its legacy code)

   function NewFile()
   {
       window.open("NewFile.aspx?uid=1234", "", "width=800,height=600,left=100,top=100,resizable=yes,scrollbars=yes");
    }

Now we want to make a post request to the window and pass in the data.
Here is how we do it, I created a blank html page first and used this javascript.

   function OpenWindowWithPost(url, windowoption, name, params)
   {
            var form = document.createElement("form");
            form.setAttribute("method", "post");
            form.setAttribute("action", url);
            form.setAttribute("target", name);

            for (var i in params) {
                if (params.hasOwnProperty(i)) {
                    var input = document.createElement('input');
                    input.type = 'hidden';
                    input.name = i;
                    input.value = params[i];
                    form.appendChild(input);
                }
            }
            
            document.body.appendChild(form);
            
            //note I am using a post.htm page since I did not want to make double request to the page 
           //it might have some Page_Load call which might screw things up.
            window.open("post.htm", name, windowoption);
            
            form.submit();
            
            document.body.removeChild(form);
    }

   function NewFile()
   {
       var param = { 'uid' : '1234'};		    		
      OpenWindowWithPost("NewFile.aspx", 
      "width=730,height=345,left=100,top=100,resizable=yes,scrollbars=yes", 
      "NewFile", param);		
    }

By doing so we can pass in the data to the NewFile.aspx page with a post request now, also note if you are using Request.QueryString[‘uid’] in the NewFile.aspx page you will need to change it to Request[‘uid’]

Hope this helps 🙂

Taswar Bhatti:

View Comments (34)

  • I did the exemple... But i notice that i don't need the window.open(..) line since on submit it open a new window...

  • Hi,

    I've just modified your script a little bit to pass the names of the arguments like that:

    ......
    for (var i in params) {
    var input = document.createElement('input');
    input.type = 'hidden';
    input.name = params[i].Key;
    input.value = params[i].Value;
    form.appendChild(input);
    }
    .....

    And them, call it like that:

    var args = [{ Key : 'myfirstarg' : value : 'value1'}, { Key : 'mysecondarg', 'value2'}];
    OpenWindowWithPost(url, options, title, args);

    Anyway your script was very useful! Thanks a lot!

  • its great, but i don't want new window to appear, i want to grab the echo text on new page ( the response ) and display on same page?? please help?
    i.e. i send form post req. to "file.php", that php file echo "sucessfull" .. i want this echo string to be displayed on same screen ?

    • Just wondering why not just use ajax for that with jquery?

      $.post('/file.php', $(form).serialize(), function(data) { alert("got back" + data); } );

  • Thank you very much ! I did not use window.open. And changed method as "eridem" descriped higher with using
    var args = [{ Key: 'key1', Value: 'value1' }, { Key: 'key2', Value: 'value2' } ];

  • Your code to good... but for me its not workable actually.......

    its go to direcly home page i want to specifiy page but its not going that page its always goes Home page..........

    function OpenWindowWithPost(url, windowoption, name, params)
    {
    var form = document.createElement("sampleRegisterForm");
    form.setAttribute("method", "post");
    form.setAttribute("action", url);
    form.setAttribute("target", name);

    for (var i in params) {
    if (params.hasOwnProperty(i)) {
    var input = document.createElement('input');
    input.type = 'hidden';
    input.name = i;

    input.value = params[i];
    form.appendChild(input);
    //alert(input);
    }
    }

    document.body.appendChild(form);
    //note I am using a post.htm page since I did not want to make double request to the page
    //it might have some Page_Load call which might screw things up.
    window.open("{$SCRIPT_NAME}", name, windowoption);

    form.submit();

    document.body.removeChild(form);
    }
    var param = { 'param6' : 'Inspector','param7' : 'Add','param8' : 'param9','c' : 'C'};

    OpenWindowWithPost("{$SCRIPT_NAME}","width=730,height=345,left=100,top=100,resizable=yes,scrollbars=yes",
    "NewFile", param);
    **********************
    This is my code ples late me know where i m going wrong..

    Thank You!!

  • Thanks for your code.
    But I wanted to know how we can access the java script post data in the redirected window.
    Can you please help me with it.

    Thanks.

Related Post