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

JavascriptHtmlPost

Javascript Problem Overview


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');

Javascript Solutions


Solution 1 - Javascript

Add

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

or

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

to your form's definition.

Solution 2 - Javascript

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();

Solution 3 - Javascript

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();

Solution 4 - Javascript

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>

Solution 5 - Javascript

I know this basic method:

<input type=”image” src=”submit.png”> (in any place)
<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!

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionJohnView Question on Stackoverflow
Solution 1 - Javascriptliggett78View Answer on Stackoverflow
Solution 2 - JavascriptMarko DumicView Answer on Stackoverflow
Solution 3 - JavascriptluchaninovView Answer on Stackoverflow
Solution 4 - JavascriptGrigory KislinView Answer on Stackoverflow
Solution 5 - JavascriptEdu CarregaView Answer on Stackoverflow