and pass parameters by post method


Javascript Problem Overview

With method I open new site with parameters, which I have to pass by post method.I've found solution, but unfortunately it doesn't work. This is my code:

<script  type="text/javascript">    
function openWindowWithPost(url,name,keys,values)
    var newWindow =, name);

    if (!newWindow) return false;

    var html = "";
    html += "<html><head></head><body><form id='formid' method='post' action='" + url +"'>";

    if (keys && values && (keys.length == values.length))
        for (var i=0; i < keys.length; i++)
            html += "<input type='hidden' name='" + keys[i] + "' value='" + values[i] + "'/>";

    html += "</form><script type='text/javascript'>document.getElementById(\"formid\").submit()</sc"+"ript></body></html>";

    return newWindow;

Next, I create arrays:

<script type="text/javascript">    
var values= new Array("value1", "value2", "value3") 
var keys= new Array("a","b","c") 

And call function by:

<input id="Button1" type="button" value="Pass values" onclick="openWindowWithPost('test.asp','',keys,values)" />   

But, when I click on this button, the site test.asp is empty (of course I try get pass values - Request.Form("b")).

How could I solve this problem, why I can't get pass values?

Javascript Solutions

Solution 1 - Javascript

Instead of writing a form into the new window (which is tricky to get correct, with encoding of values in the HTML code), just open an empty window and post a form to it.


<form id="TheForm" method="post" action="test.asp" target="TheWindow">
<input type="hidden" name="something" value="something" />
<input type="hidden" name="more" value="something" />
<input type="hidden" name="other" value="something" />

<script type="text/javascript">'', 'TheWindow');

To set the values in the form dynamically, you can do like this:

function openWindowWithPost(something, additional, misc) {
  var f = document.getElementById('TheForm');
  f.something.value = something;
  f.more.value = additional;
  f.other.value = misc;'', 'TheWindow');

To post the form you call the function with the values, like openWindowWithPost('a','b','c');.

Note: I varied the parameter names in relation to the form names to show that they don't have to be the same. Usually you would keep them similar to each other to make it simpler to track the values.

Solution 2 - Javascript

Since you wanted the whole form inside the javascript, instead of writing it in tags, you can do this:

let windowName = 'w_' + + Math.floor(Math.random() * 100000).toString();
var form = document.createElement("form");
form.setAttribute("method", "post");
form.setAttribute("action", "");

form.setAttribute("target", windowName);

var hiddenField = document.createElement("input"); 
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", "message");
hiddenField.setAttribute("value", "val");
document.body.appendChild(form);'', windowName);


Solution 3 - Javascript

I completely agree with mercenary's answer posted above and created this function for me which works for me. It's not an answer, it's a comment on above post by mercenary

function openWindowWithPostRequest() {
  var winName='MyWindow';
  var winURL='search.action';
  var windowoption='resizable=yes,height=600,width=800,location=0,menubar=0,scrollbars=1';
  var params = { 'param1' : '1','param2' :'2'};	        
  var form = document.createElement("form");
  form.setAttribute("method", "post");
  form.setAttribute("action", winURL);
  for (var i in params) {
    if (params.hasOwnProperty(i)) {
      var input = document.createElement('input');
      input.type = 'hidden'; = i;
      input.value = params[i];
  document.body.appendChild(form);           	  '', winName,windowoption); = winName;

Solution 4 - Javascript

Even though I am 3 years late, but to simplify Guffa's example, you don't even need to have the form on the page at all:

$('<form method="post" action="test.asp" target="TheWindow">
       <input type="hidden" name="something" value="something">


$('<form method="post" action="test.asp" target="TheWindow">
       <input type="hidden" name="something" value="something">

Maybe a helpful tip for someone :)

Solution 5 - Javascript

You could simply use target="_blank" on the form.

<form action="action.php" method="post" target="_blank">
	<input type="hidden" name="something" value="some value">

Add hidden inputs in the way you prefer, and then simply submit the form with JS.

Solution 6 - Javascript

I created a function to generate a form, based on url, target and an object as the POST/GET data and submit method. It supports nested and mixed types within that object, so it can fully replicate any structure you feed it: PHP automatically parses it and returns it as a nested array. However, there is a single restriction: the brackets [ and ] must not be part of any key in the object (like {"this [key] is problematic" : "hello world"}). If someone knows how to escape it properly, please do tell!

Without further ado, here is the source:

function getForm(url, target, values, method) {
  function grabValues(x) {
    var path = [];
    var depth = 0;
    var results = [];

    function iterate(x) {
      switch (typeof x) {
        case 'function':
        case 'undefined':
        case 'null':
        case 'object':
          if (Array.isArray(x))
            for (var i = 0; i < x.length; i++) {
              path[depth++] = i;
            for (var i in x) {
              path[depth++] = i;
            path: path.slice(0),
            value: x
    return results;
  var form = document.createElement("form");
  form.method = method;
  form.action = url; = target;

  var values = grabValues(values);

  for (var j = 0; j < values.length; j++) {
    var input = document.createElement("input");
    input.type = "hidden";
    input.value = values[j].value; = values[j].path[0];
    for (var k = 1; k < values[j].path.length; k++) { += "[" + values[j].path[k] + "]";
  return form;

Usage example:

var obj = {
  "a": [1, 2, [3, 4]],
  "b": "a",
  "c": {
    "x": [1],
    "y": [2, 3],
    "z": [{
      "a": "Hello",
      "b": "World"
    }, {
      "a": "Hallo",
      "b": "Welt"

var form = getForm("", "_blank", obj, "post");


Solution 7 - Javascript

I found a better way to pass parameters to the popup window and even to retrieve parameters from it :

In the main page :

var popupwindow;
var sharedObject = {};

function openPopupWindow()
   // Define the datas you want to pass
   sharedObject.var1 = 
   sharedObject.var2 = 

   if (window.focus) { popupwindow.focus(); }

function closePopupWindow()

    // Retrieve the datas from the popup window
    = sharedObject.var1;
    = sharedObject.var2;

In the popup window :

var sharedObject = window.opener.sharedObject;

// function you have to to call to close the popup window
function myclose()
    //Define the parameters you want to pass to the main calling window
    sharedObject.var1 = 
    sharedObject.var2 = 

That's it !

And this is very convenient because:

  • You have not to set parameters in the URL of the popup window.
  • No form to define
  • You can use illimited parameters even objects.
  • Bi-directionnal : you can pass parameters AND, if you want you, can retreive new parameters.
  • Very easy to implement.

Have Fun!

Solution 8 - Javascript

I wanted to do this in React using plain Js and the fetch polyfill. OP didn't say he specifically wanted to create a form and invoke the submit method on it, so I have done it by posting the form values as json:

examplePostData = {
    method: 'POST',
    headers: {
       'Content-type' : 'application/json',
       'Accept' : 'text/html'
    body: JSON.stringify({
        someList: [1,2,3,4],
        someProperty: 'something',
        someObject: {some: 'object'}

asyncPostPopup = () => {

    //open a new window and set some text until the fetch completes

    //async load the data into the window
    fetch('../postUrl', this.examplePostData)
    .then((response) => response.text())
    .then((text) => writeToWindow(win,text))
    .catch((error) => console.log(error))

writeToWindow = (win,text) => {

Solution 9 - Javascript

The default submit Action is Ext.form.action.Submit, which uses an Ajax request to submit the form's values to a configured URL. To enable normal browser submission of an Ext form, use the standardSubmit config option.


solution: put standardSubmit :true in your config. Hope that this will help you :)

Solution 10 - Javascript

I've used this in the past, since we typically use razor syntax for coding

@using (Html.BeginForm("actionName", "controllerName", FormMethod.Post, new { target = "_blank" }))


// add hidden and form filed here



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
Questionluk4443View Question on Stackoverflow
Solution 1 - JavascriptGuffaView Answer on Stackoverflow
Solution 2 - JavascriptMercenaryView Answer on Stackoverflow
Solution 3 - JavascriptYoudhveerView Answer on Stackoverflow
Solution 4 - JavascriptAndrius NaruševičiusView Answer on Stackoverflow
Solution 5 - JavascriptPierView Answer on Stackoverflow
Solution 6 - JavascriptCeremonyView Answer on Stackoverflow
Solution 7 - JavascriptBlueManView Answer on Stackoverflow
Solution 8 - Javascriptuser1641172View Answer on Stackoverflow
Solution 9 - Javascriptuser2420964View Answer on Stackoverflow
Solution 10 - JavascriptransemsView Answer on Stackoverflow