Javascript http post data to new window or pop up

Posted in ASP .NET, javascript on July 8th, 2010 by taswar

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 onclick=”javascript:NewFile()”>New File</a>
(Note I know this is not good again its legacy code)

?View Code JAVASCRIPT
1
2
3
4

   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.

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

   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 :)

Share

8 Responses

  1. brainthegrinch Says:
    September 2nd, 2010 at 8:05 am

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

  2. pop up Says:
    October 7th, 2010 at 10:06 pm

    Many tahnks for your sharing,hero,hehe

  3. rajeev Says:
    July 3rd, 2012 at 8:28 pm

    this is not working

  4. taswar Says:
    July 4th, 2012 at 7:46 am

    which part is not working? what browser version?

  5. eridem Says:
    August 20th, 2012 at 3:03 am

    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!

  6. Nick Says:
    October 5th, 2012 at 4:43 am

    Thank you. :) :) :) :) :) :) :) :) :)

  7. AliNawaz Says:
    December 18th, 2012 at 10:42 am

    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 ?

  8. taswar Says:
    December 18th, 2012 at 10:51 am

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

    $.post(‘/file.php’, $(form).serialize(), function(data) { alert(“got back” + data); } );

Leave a Comment