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)
|
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.
|
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 🙂
I did the exemple… But i notice that i don’t need the window.open(..) line since on submit it open a new window…
Many tahnks for your sharing,hero,hehe
this is not working
which part is not working? what browser version?
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!
Thank you. 🙂 🙂 🙂 🙂 🙂 🙂 🙂 🙂 🙂
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!!
Saved my time.
Thanks it works good.
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.
Can we do this without using form. If we are using form, I do see resend confirmation on refresh in Firefox. Please suggest me how to submit data to new window without using form?
Thanks,
Maria
I am not sure if there is another way, one could also try an iframe and post the data over.
Hi… What relation between “form” and window.open(“post.htm”, name, windowoption) ??? I don’t know how it is working?? Can u explain me…
Thanks,
Raja
Correct me if I am wrong but from the code, it doesnt look like it will handle complex object parameter. By that I mean something like this:
{ Id: 5, Filter: { Region: “A”, District: “B” }};
Where there is nesting.
I dont know if there’s any demand for this but I am currently in need of it. Will you write one? If not, do you think it is achievable? Perhaps by using recursive functions?
You can try to flatten the object before, since html post will require a flatten hidden field to be sent.
Maybe try this.
var flattenObject = function(ob) {
var toReturn = {};
for (var i in ob) {
if (!ob.hasOwnProperty(i)) continue;
if ((typeof ob[i]) == ‘object’) {
var flatObject = flattenObject(ob[i]);
for (var x in flatObject) {
if (!flatObject.hasOwnProperty(x)) continue;
toReturn[i + ‘.’ + x] = flatObject[x];
}
} else {
toReturn[i] = ob[i];
}
}
return toReturn;
};
works fine for me. Thanks a lot
I think you can reduce this to:
window.open(‘javascript: document.write(‘ + form + ‘)’,name,windowoption);
..and you will not need the post.htm at all.
Worked perfectly :))))
In my case new window is not opening, can you help? I’ve written the same code.
can you give me more information, what type of browser you are using etc?
Thank you very much (Y)
For a new windows, we can pass ‘_blank’ in the name param.
And it worked for me without window.open and that was great.
Works perfectly!!!!
thank you ^_^
Came across this post – thank you for this nice script. Works like a charm!
nice post , indeed really had help me. thank you
This work!!!! Thanks you!!!!!!!!!!!!!!!!!
The original post and combine edited in comments have solved my problem perfectly, thanks all
Still works well thank you!! 🙂
Ten years later, and this is still the best answer, anywhere.
If the browser has pop up blocker … the POST loses its value. Have you experience this?
There is not much you can do where there is a popup blocker, other requesting to all popup
Works perfectly!!!!
after code changes, page is rendering but when I go to developer tool –> Network tab, there it is still showing as get request and page load status is pending.