After submitting a POST form open a new window showing the result

Question

JavaScript post request like a form submit shows you how to submit a form that you create via POST in JavaScript. Below is my modified code.

var form = document.createElement("form");

form.setAttribute("method", "post");
form.setAttribute("action", "test.jsp");

var hiddenField = document.createElement("input");  

hiddenField.setAttribute("name", "id");
hiddenField.setAttribute("value", "bob");
form.appendChild(hiddenField);
document.body.appendChild(form); // Not entirely sure if this is necessary          
form.submit();

What I would like to do is open the results in a new window. I am currently using something like this to open a page in a new window:

onclick = window.open(test.html, '', 'scrollbars=no,menubar=no,height=600,width=800,resizable=yes,toolbar=no,status=no');

Note that `document.body.appendChild(form)` **is** necessary, see https://stackoverflow.com/q/42053775/58241 — benrwb, Dec 14 '17 at 13:28

score 225 · Accepted Answer · answered Oct 07 '08 at 15:23

225

Add

<form target="_blank" ...></form>

or

form.setAttribute("target", "_blank");

to your form's definition.

answered Oct 07 '08 at 15:23

liggett78

11,260
2
29
29

1

Remember to add the attribute id to the form element, otherwise this doesn't work in Safari browser even though the popup blocker is turned off.
– Naren Jul 12 '17 at 16:09
Short and sweet. Thank!! – rahim.nagori Sep 29 '20 at 12:38
@Naren, i'm facing issues in Safari Browser and (iphone devices) while submitting the form via JS. i'm getting "network connection lost" while posting is happening. if i try to pause the debugger for some "x" seconds and release debugger then its working fine. could you please guide me on this. – Kishore Konangi May 25 '21 at 20:19
form.setAttribute is exactly what I was looking for. In my case, I only wanted the results in a new window in certain circumstances, so setting target inside the form was a no-go. – Jonathan Willcock Jun 06 '23 at 04:50

score 135 · Answer 2 · edited Dec 18 '15 at 07:28

135

If you want to create and submit your form from Javascript as is in your question and you want to create popup window with custom features I propose this solution (I put comments above the lines i added):

var form = document.createElement("form");
form.setAttribute("method", "post");
form.setAttribute("action", "test.jsp");

// setting form target to a window named 'formresult'
form.setAttribute("target", "formresult");

var hiddenField = document.createElement("input");              
hiddenField.setAttribute("name", "id");
hiddenField.setAttribute("value", "bob");
form.appendChild(hiddenField);
document.body.appendChild(form);

// creating the 'formresult' window with custom features prior to submitting the form
window.open('test.html', 'formresult', 'scrollbars=no,menubar=no,height=600,width=800,resizable=yes,toolbar=no,status=no');

form.submit();

edited Dec 18 '15 at 07:28

Sergey Telshevsky

12,077
6
55
78

answered Oct 08 '08 at 00:54

Marko Dumic

9,848
4
29
33

20

+1 Better than the accepted answer, since it actually puts the result in the popup with the options the OP wanted. – Nicole Mar 06 '10 at 01:34
Doesn't work for me on IE - it creates a new window with the specified attributes and then loads the results in another new window, leaving the previous window empty. – mjaggard Nov 16 '11 at 13:48
I've added a new line to make it work in IE - it's not nice, but it works. Firefox (which doesn't support readyState) will never have "loading" set. – mjaggard Nov 16 '11 at 14:14
1

@mjaggard: What did you add? It might be worth suggesting an edit to this answer. – Michael Myers Nov 21 '11 at 21:00
I did suggest an edit but I can't see it still. while (newWind.document.readyState == "loading") {} – mjaggard Nov 22 '11 at 16:00
1. Does this work across all browsers? 2. http://www.w3schools.com/tags/att_form_target.asp claims that the target attribute of the ```form``` element is deprecated. – Saurabh Nanda Jun 22 '12 at 16:31
3

@SaurabhNanda As far as I can tell, `target` attribute on `form` element is **not deprecated** in [HTML 4.01 Transitional](http://www.w3.org/TR/REC-html40/present/frames.html#h-16.3) and apparently is to stay in [HTML 5](http://www.w3.org/TR/html5/the-form-element.html#the-form-element). – Marko Dumic Jun 27 '12 at 13:58
1

A warning: I had to attach my form to the document body before this would work (in FF 17). Creating a fragment and trying to sumbit it didn't work. – voidstate Nov 28 '12 at 14:10
Remember to add the attribute id to the form element, otherwise this doesn't work in Safari browser even though the popup blocker is turned off.
– Naren Jul 12 '17 at 16:11
@MarkoDumic Little late to ask but .. i had the exact same problem and tried your code above. i am getting two pop ups intead of one. one for form submit (with actual url ) and another for window.open with test.html (tht gives 404). would you know why would that happen? – Night Monger Jan 04 '19 at 02:20
Also wanted to add that ours is a citrix based application so only IE . not sure if that makes a difference – Night Monger Jan 04 '19 at 02:36

score 8 · Answer 3 · answered Sep 24 '12 at 20:55

8

var urlAction = 'whatever.php';
var data = {param1:'value1'};

var $form = $('<form target="_blank" method="POST" action="' + urlAction + '">');
$.each(data, function(k,v){
    $form.append('<input type="hidden" name="' + k + '" value="' + v + '">');
});
$form.submit();

answered Sep 24 '12 at 20:55

luchaninov

6,792
6
60
75

Am I missing something, or do you still need to `.append` the close form tag? – john_science Oct 26 '12 at 21:29
I think this is incomplete after append the form you should remove it for a best practice. – ncubica Nov 16 '12 at 17:42
@theJollySin: By calling jQuery on the tag, it will turn into a real DOM element and would be closed when inserted into the DOM. – Janus Troelsen Jul 25 '13 at 20:39
1

I think there is a missing appendTo('body') and last line should be written as: `$form.appendTo('body').submit();` – PBrockmann Jun 02 '17 at 23:13

Grigory Kislin · Answer 4 · 2018-01-26T14:10:38.690

4

Simplest working solution for flow window (tested at Chrome):

<form action='...' method=post target="result" onsubmit="window.open('','result','width=800,height=400');">
    <input name="..">
    ....
</form>

edited Jan 26 '18 at 14:10

answered Jan 07 '17 at 20:43

Grigory Kislin

16,647
10
125
197

score 1 · Answer 5 · edited May 13 '15 at 14:05

1

I know this basic method:

1)

<input type=”image” src=”submit.png”> (in any place)

2)

<form name=”print”>
<input type=”hidden” name=”a” value=”<?= $a ?>”>
<input type=”hidden” name=”b” value=”<?= $b ?>”>
<input type=”hidden” name=”c” value=”<?= $c ?>”>
</form>

3)

<script>
$(‘#submit’).click(function(){
    open(”,”results”);
    with(document.print)
    {
        method = “POST”;
        action = “results.php”;
        target = “results”;
        submit();
    }
});
</script>

Works!

edited May 13 '15 at 14:05

StaNov

332
1
4
17

answered Mar 06 '10 at 01:21

Edu Carrega

19
2

3

thats with jquery ! he asks for pure JS – Nikola Sivkov Mar 06 '10 at 01:26

After submitting a POST form open a new window showing the result

5 Answers5

Linked

Related