Window open and pass parameters by post method

Question

With window open 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      lt script  type  text javascript  gt      function openWindowWithPost url name keys values        var newWindow   window open url  name        if   newWindow  return false       var html           html      lt html gt  lt head gt  lt  head gt  lt body gt  lt form id  formid  method  post  action      url     gt         if  keys  amp  amp  values  amp  amp   keys length    values length           for  var i 0  i  lt  keys length  i                html      lt input type  hidden  name      keys i       value      values i        gt         html      lt  form gt  lt script type  text javascript  gt document getElementById   formid    submit   lt  sc   ript gt  lt  body gt  lt  html gt         newWindow document write html       return newWindow     lt  script gt      Next  I create arrays      lt script type  text javascript  gt      var values  new Array  value1    value2    value3    var keys  new Array  a   b   c     lt  script gt      And call function by      lt input id  Button1  type  button  value  Pass values  onclick  openWindowWithPost  test asp     keys values     gt       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

User · Answer

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     form setAttribute  target  winName       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                            window open     winName windowoption     form target   winName    form submit                       document body removeChild form

User · Answer

Since you wanted the whole form inside the javascript  instead of writing it in tags  you can do this  let windowName    w     Date now     Math floor Math random     100000  toString    var form   document createElement  quot form quot    form setAttribute  quot method quot    quot post quot    form setAttribute  quot action quot    quot openData do quot     form setAttribute  quot target quot   windowName    var hiddenField   document createElement  quot input quot     hiddenField setAttribute  quot type quot    quot hidden quot    hiddenField setAttribute  quot name quot    quot message quot    hiddenField setAttribute  quot value quot    quot val quot    form appendChild hiddenField   document body appendChild form    window open     windowName    form submit

User · Answer

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

User · Answer

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        gt           open a new window and set some text until the fetch completes     let win window open  about blank       writeToWindow win  Loading             async load the data into the window     fetch     postUrl   this examplePostData       then  response    gt  response text         then  text    gt  writeToWindow win text        catch  error    gt  console log error      writeToWindow    win text    gt        win document open       win document write text      win document close

User · Answer

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   Example    lt form id  TheForm  method  post  action  test asp  target  TheWindow  gt   lt input type  hidden  name  something  value  something    gt   lt input type  hidden  name  more  value  something    gt   lt input type  hidden  name  other  value  something    gt   lt  form gt    lt script type  text javascript  gt  window open      TheWindow    document getElementById  TheForm   submit     lt  script gt    Edit   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    window open      TheWindow      f submit        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

User · Answer

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 = 
   ...

   // Open the popup window
   window.open(URL_OF_POPUP_WINDOW, NAME_OF_POPUP_WINDOW, POPUP_WINDOW_STYLE_PROPERTIES);
   if (window.focus) { popupwindow.focus(); }
}

function closePopupWindow()
{
    popupwindow.close();

    // 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 = 
    ...
    window.opener.closePopupWindow();
}

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!

User · Answer

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    x000D   x000D  function getForm url  target  values  method    x000D    function grabValues x    x000D      var path       x000D      var depth   0  x000D      var results       x000D   x000D      function iterate x    x000D        switch  typeof x    x000D          case  function   x000D          case  undefined   x000D          case  null   x000D            break  x000D          case  object   x000D            if  Array isArray x   x000D              for  var i   0  i  lt  x length  i      x000D                path depth      i  x000D                iterate x i    x000D                x000D            else x000D              for  var i in x    x000D                path depth      i  x000D                iterate x i    x000D                x000D            break  x000D          default  x000D            results push   x000D              path  path slice 0   x000D              value  x x000D               x000D            break  x000D          x000D        path splice --depth   x000D        x000D      iterate x   x000D      return results  x000D      x000D    var form   document createElement  form    x000D    form method   method  x000D    form action   url  x000D    form target   target  x000D   x000D    var values   grabValues values   x000D   x000D    for  var j   0  j  lt  values length  j      x000D      var input   document createElement  input    x000D      input type    hidden   x000D      input value   values j  value  x000D      input name   values j  path 0   x000D      for  var k   1  k  lt  values j  path length  k      x000D        input name          values j  path k         x000D        x000D      form appendChild input   x000D      x000D    return form  x000D    x000D   x000D   x000D    Usage example    x000D   x000D  document body onclick   function     x000D    var obj     x000D       a    1  2   3  4    x000D       b    a   x000D       c     x000D         x    1   x000D         y    2  3   x000D         z      x000D           a    Hello   x000D           b    World  x000D             x000D           a    Hallo   x000D           b    Welt  x000D           x000D        x000D       x000D   x000D    var form   getForm  http   example com     blank   obj   post    x000D   x000D    document body appendChild form   x000D    form submit    x000D    form parentNode removeChild form   x000D    x000D   x000D   x000D

User · Answer

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   Link  http   docs sencha com extjs 4 2 1    api Ext form Basic-cfg-standardSubmit  solution  put standardSubmit  true in your config  Hope that this will help you

User · Answer

You could simply use target   blank  on the form    lt form action  action php  method  post  target   blank  gt       lt input type  hidden  name  something  value  some value  gt   lt  form gt    Add hidden inputs in the way you prefer  and then simply submit the form with JS

User · Answer

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       lt form method  post  action  test asp  target  TheWindow  gt          lt input type  hidden  name  something  value  something  gt                 lt  form gt    submit      Edited       lt form method  post  action  test asp  target  TheWindow  gt          lt input type  hidden  name  something  value  something  gt                 lt  form gt    appendTo  body   submit   remove      Maybe a helpful tip for someone

[javascript] Window.open and pass parameters by post method

The answer is

Examples related to javascript

Tags