How to replace window.open(...) with a POST

Question

I currently have some code that runs a window.open(urlWithGetParams) line. As far as I'm aware, this is going to force me to use a GET request. I would like to do this with a POST request. Is there a workaround for this?

I'm not married to window.open(), either. I'm open to just about any alternative that allows me to spawn a new window via a POST request instead of a GET.

See http://stackoverflow.com/questions/5554896/window-open-post or http://stackoverflow.com/questions/3951768/window-open-and-pass-parameters-by-post-method-problem — Paul Roub, Jul 22 '13 at 16:58
The operation in the "duplicate" won't really work for me - I'd have to get those parameters into the new window somehow, and that would require sending them via... what? A GET request? O_o — corsiKa, Jul 22 '13 at 17:13

Denys Séguret · Accepted Answer · 2019-05-28T06:24:13.513

100

In fact I made a small "library" for this, open in POST a new window :

// Arguments :
//  verb : 'GET'|'POST'
//  target : an optional opening target (a name, or "_blank"), defaults to "_self"
window.io = {
    open: function(verb, url, data, target){
        var form = document.createElement("form");
        form.action = url;
        form.method = verb;
        form.target = target || "_self";
        if (data) {
            for (var key in data) {
                var input = document.createElement("textarea");
                input.name = key;
                input.value = typeof data[key] === "object"
                    ? JSON.stringify(data[key])
                    : data[key];
                form.appendChild(input);
            }
        }
        form.style.display = 'none';
        document.body.appendChild(form);
        form.submit();
        document.body.removeChild(form);
    }
};

Example :

io.open('POST', 'fileServer.jsp', {request: {key:"42", cols:[2, 3, 34]}});

To open in a new window, set the target parameter :

io.open('POST', someURL, someArgs, 'newwin');

or to ensure it's a new window/tab each time :

io.open('POST', someURL, someArgs, '_blank');

edited May 28 '19 at 06:24

answered Jul 22 '13 at 16:57

Denys Séguret

372,613
87
782
758

I like it, and it does run a post, but it doesn't open a new Window (at least, in IE 9.0.8112.16421 – corsiKa Jul 23 '13 at 15:10
@corsiKa It does open a new window if you set the target parameter : `open('POST', url, {}, 'newwin')` – Denys Séguret Jul 25 '13 at 07:52
Beautiful! I made it `var reportWindowName = Math.random().toString(36).substr(2,9);` so that if I click it multiple times, each report opens in a new window (well, probably :-)) – corsiKa Jul 25 '13 at 15:53
1

@corsiKa Simply use `'_blank'` as target to open in a new window/tab each time. – Denys Séguret Jul 25 '13 at 16:10
Nice approach - just what I was looking for, and works perfectly! – ProfNimrod Feb 14 '14 at 23:15
1

Does not support line breaks from text areas, since the transporting element created is a regular ``. – Radley Sustaire Mar 18 '14 at 21:56
1

@RadGH +1 As I use it only with JSON, I hadn't thought about that. I edited to use a textarea (untested). – Denys Séguret Mar 19 '14 at 06:01
1

A textarea does fix the linebreak issue, thanks for updating! – Radley Sustaire Mar 19 '14 at 16:10
Another way to solve the multi-line problem is to use `encodeURIComponent` on the string(ified JSON data). The you may also use a `hidden` input type then. – Blasius Secundus Oct 21 '14 at 13:56
10

Just a note: You may want to end with: document.body.removeChild(form); – Michael Cordingley Nov 11 '14 at 16:50
This is awesome!! one comment is you should make sure you also don't have any keys named "submit" - had some issues with that. – Matt Jan 28 '15 at 20:14
+1, it's best to dispose that temporary form element. one method is to add `formElement.outerHTML = "";` after submitting – Jossef Harush Kadouri Dec 24 '15 at 16:35
i was not able to retrieve the data through PHP from the target page, what I'm missing? – Plastic Feb 19 '16 at 17:09
Question: does this support complex object parameter? It seems like in your example you use complex object, but when i do it, it doesnt work! – andyh0316 Jun 16 '16 at 03:58
1

@DenysSéguret I am facing some issue , if my request data is something like - `data={reqName:'test' reqValuesList:[{name:'req1',value:'reqValue1'},{name:'req2',value:'reqValue2'}]}` in this case `reqName` is sent to server side properly , but `reqValuesList` is showing null. Can you help me out on this. – Viplock Mar 13 '17 at 07:13
What should be the input for the *data* for the function ? e.g. I want to send the &Type=dog&Name=doggy, what should be the format for it ? – Toshihiko Oct 17 '17 at 06:56

score 6 · Answer 2 · answered Jul 22 '13 at 16:56

6

What I do is that I do a javascript AJAX post and then I take the content that I get back and place it into a new window.

Something like this (using jQuery, but you can use any AJAX implementation):

$.post(URL, DATA, function(d){
    var new_window = window.open();
    $(new_window.document.body).append(d);
});

answered Jul 22 '13 at 16:56

Naftali

144,921
39
244
303

I should point out that I tried this and it worked minus one thing: something about crystal reports (which is what I was doing this for) wouldn't pass the parameters. It may have been how I implemented the suggestion, though. – corsiKa Mar 07 '14 at 16:15
3

I use this suggested code in Chrome version 38 and blocked by popup blocker! – Sayed Abolfazl Fatemi Nov 09 '14 at 15:37

How to replace window.open(...) with a POST

2 Answers2

Linked