JavaScript post request like a form submit

Question

I m trying to direct a browser to a different page  If I wanted a GET request  I might say  document location href    http   example com q a     But the resource I m trying to access won t respond properly unless I use a POST request  If this were not dynamically generated  I might use the HTML   lt form action  http   example com   method  POST  gt     lt input type  hidden  name  q  value  a  gt   lt  form gt    Then I would just submit the form from the DOM   But really I would like JavaScript code that allows me to say  post to url  http   example com      q   a       What s the best cross browser implementation   Edit   I m sorry I was not clear  I need a solution that changes the location of the browser  just like submitting a form  If this is possible with XMLHttpRequest  it is not obvious  And this should not be asynchronous  nor use XML  so Ajax is not the answer

User · Answer

FormObject is an option  But FormObject is not supported by most browsers now

User · Answer

My solution will encode deeply nested objects  unlike the currently accepted solution by  RakeshPai   It uses the  qs  npm library and its stringify function to convert nested objects into parameters   This code works well with a Rails back-end  although you should be able to modify it to work with whatever backend you need by modifying the options passed to stringify   Rails requires that arrayFormat be set to  brackets    import qs from  qs   function normalPost url  params      var form   document createElement  form      form setAttribute  method    POST      form setAttribute  action   url      const keyValues   qs      stringify params    arrayFormat   brackets   encode  false         split   amp         map field   gt  field split           keyValues forEach field   gt        var key   field 0       var value   field 1       var hiddenField   document createElement  input        hiddenField setAttribute  type    hidden        hiddenField setAttribute  name   key       hiddenField setAttribute  value   value       form appendChild hiddenField           document body appendChild form     form submit        Example   normalPost   people new           people                        name   Chris             address   My address             dogs    Jordan    Elephant Man    Chicken Face              information    age  10  height   3 meters                                   name   Andrew             address   Underworld             dogs    Doug    Elf    Orange                                  name   Julian             address   In a hole             dogs    Please    Help                               Produces these Rails parameters     authenticity token   gt          people   gt       name   gt  Chris    address   gt  My address    dogs   gt   Jordan    Elephant Man    Chicken Face     information   gt   age   gt  10    height   gt  3 meters          name   gt  Andrew    address   gt  Underworld    dogs   gt   Doug    Elf    Orange          name   gt  Julian    address   gt  In a hole    dogs   gt   Please    Help

User · Answer

I d go down the Ajax route as others suggested with something like   var xmlHttpReq   false   var self   this     Mozilla Safari if  window XMLHttpRequest        self xmlHttpReq   new XMLHttpRequest         IE else if  window ActiveXObject        self xmlHttpReq   new ActiveXObject  Microsoft XMLHTTP       self xmlHttpReq open  POST    YourPageHere asp   true   self xmlHttpReq setRequestHeader  Content-Type    application x-www-form-urlencoded  charset UTF-8     self xmlHttpReq setRequestHeader  Content-length   QueryString length      self xmlHttpReq send   YourQueryString Value

User · Answer

jQuery plugin for redirect with POST or GET   https   github com mgalante jquery redirect blob master jquery redirect js  To test  include the above  js file or copy paste the class into your code  then use the code here  replacing  args  with your variable names  and  values  with the values of those respective variables     redirect  demo php     arg1    value1    arg2    value2

User · Answer

Here is how I do it   function redirectWithPost url  data           var form   document createElement  form            form method    POST           form action   url           for var key in data               var input   document createElement  input                input name   key              input value   data key               input type    hidden               form appendChild input                    document body appendChild form           form submit

User · Answer

Three options here    Standard JavaScript answer  Use a framework  Most Ajax frameworks will have abstracted you an easy way to make an XMLHTTPRequest POST  Make the XMLHTTPRequest request yourself  passing post into the open method instead of get   More information in Using POST method in XMLHTTPRequest  Ajax    Via JavaScript  dynamically create a form  add an action  add your inputs  and submit that

User · Answer

Yet another recursive solution  since some of others seem to be broken  I didn t test all of them   This one depends on lodash 3 x and ES6  jQuery not required    function createHiddenInput name  value        let input   document createElement  input        input setAttribute  type   hidden        input setAttribute  name  name       input setAttribute  value  value       return input     function appendInput form  name  value        if   isArray value               each value   v i    gt                appendInput form     name    i     v                     else if   isObject value               forOwn value   v p    gt                appendInput form     name    p     v                     else           form appendChild createHiddenInput name  value             function postToUrl url  data        let form   document createElement  form        form setAttribute  method    post        form setAttribute  action   url          forOwn data   value  name    gt            appendInput form  name  value                form submit

User · Answer

The method I use to post and direct a user automatically to another page is to just write a hidden form and then auto submit it   Be assured that the hidden form takes absolutely no space on the web page  The code would be something like this        lt form name  form1  method  post  action  somepage php  gt       lt input name  fielda  type  text  id  fielda  type  hidden  gt        lt textarea name  fieldb  id  fieldb  cols    rows    style  display none  gt  lt  textarea gt   lt  form gt      document getElementById  fielda   value  some text for field a       document getElementById  fieldb   innerHTML  some text for multiline fieldb       form1 submit      Application of auto submit  An application of an auto submit would be directing form values that the user automatically put in on the other page back to that page   Such an application would be like this   fieldapost  lt  php echo   post  fielda    gt  if  fieldapost         document write   lt form name  form1  method  post  action  previouspage php  gt     lt input name  fielda  type  text  id  fielda  type  hidden  gt   lt  form gt     document getElementById  fielda   value fieldapost  form1 submit

User · Answer

You could make an AJAX call  likely using a library such as using Prototype js or JQuery   AJAX can handle both GET and POST options

User · Answer

No  You can t have the JavaScript post request like a form submit   What you can have is a form in HTML  then submit it with the JavaScript   as explained many times on this page    You can create the HTML yourself  you don t need JavaScript to write the HTML  That would be silly if people suggested that    lt form id  ninja  action  http   example com   method  POST  gt     lt input id  donaldduck  type  hidden  name  q  value  a  gt   lt  form gt    Your function would just configure the form the way you want it   function postToURL a b c      document getElementById  ninja   action       a     document getElementById  donaldduck   name    b     document getElementById  donaldduck   value   c     document getElementById  ninja   submit        Then  use it like   postToURL  http   example com    q   a      But I would just leave out the function and just do   document getElementById  donaldduck   value    a   document getElementById  ninja   submit      Finally  the style decision goes in the ccs file    ninja     display none      Personally I think forms should be addressed by name but that is not important right now

User · Answer

None of the above solutions handled deep nested params with just jQuery  so here is my two cents solution   If you re using jQuery and you need to handle deep nested parameters  you can use this function below                  Original code found here  https   github com mgalante jquery redirect blob master jquery redirect js        I just simplified it for my own taste              function postForm parameters  url                generally we post the form with a blank action attribute         if   undefined      typeof url                url                             ----------------------------------------            SOME HELPER FUNCTIONS           ----------------------------------------         var getForm   function  url  values                 values   removeNulls values                var form       lt form gt                     attr  method    POST                    attr  action   url                iterateValues values      form  null               return form                      var removeNulls   function  values                var propNames   Object getOwnPropertyNames values               for  var i   0  i  lt  propNames length  i                      var propName   propNames i                   if  values propName      null    values propName      undefined                        delete values propName                     else if  typeof values propName       object                         values propName    removeNulls values propName                      else if  values propName  length  lt  1                        delete values propName                                               return values                      var iterateValues   function  values  parent  form  isArray                var i  iterateParent                   Object keys values  forEach function  i                    if  typeof values i       object                         iterateParent   parent slice                        iterateParent push i                       iterateValues values i   iterateParent  form  Array isArray values i                       else                       form append getInput i  values i   parent  isArray                                                          var getInput   function  name  value  parent  array                var parentString              if  parent length  gt  0                    parentString   parent 0                   var i                  for  i   1  i  lt  parent length  i    1                        parentString          parent i                                            if  array                        name   parentString         name                          else                       name   parentString         name                                                     return     lt input gt    attr  type    hidden                    attr  name   name                   attr  value   value                          ----------------------------------------            NOW THE SYNOPSIS           ----------------------------------------         var generatedForm   getForm url  parameters               body   append generatedForm           generatedForm submit            generatedForm remove            Here is an example of how to use it  The html code    lt button id  testButton  gt Button lt  button gt    lt script gt        document  ready function                  testButton   click function                  postForm                   csrf token   abcd                   rows                                                  user id  1                          permission group id  1                                                                      user id  1                          permission group id  2                                                          object                        apple                            color   red                           age   23 days                           types                                 golden                                opal                                                                                      the null  null     this will be dropped  like non-checked checkboxes are dropped                                      lt  script gt     And if you click the test button  it will post the form and you will get the following values in POST   array 3        csrf token     gt  string 4   abcd      rows     gt  array 2         0    gt  array 2            user id     gt  string 1   1          permission group id     gt  string 1   1             1    gt  array 2            user id     gt  string 1   1          permission group id     gt  string 1   2                object     gt  array 1          apple     gt  array 3            color     gt  string 3   red          age     gt  string 7   23 days          types     gt  array 2             0    gt  string 6   golden           1    gt  string 4   opal                        Note  if you want to post the form to another url than the current page  you can specify the url as the second argument of the postForm function   So for instance  to re-use your example    postForm   q   a     http   example com       Hope this helps   Note2  the code was taken from the redirect plugin  I basically just simplified it for my needs

User · Answer

This would be a version of the selected answer using jQuery      Post to the provided URL with the specified parameters  function post path  parameters        var form       lt form gt  lt  form gt          form attr  method    post        form attr  action   path          each parameters  function key  value            var field       lt input gt  lt  input gt              field attr  type    hidden            field attr  name   key           field attr  value   value            form append field                   The form needs to be a part of the document in        order for us to be able to submit it        document body  append form       form submit

User · Answer

Using the createElement function provided in this answer  which is necessary due to IE s brokenness with the name attribute on elements created normally with document createElement   function postToURL url  values        values   values             var form   createElement  form    action  url                                        method   POST                                         style   display  none         for  var property in values            if  values hasOwnProperty property                 var value   values property               if  value instanceof Array                    for  var i   0  l   value length  i  lt  l  i                          form appendChild createElement  input    type   hidden                                                                name  property                                                               value  value i                                                  else                   form appendChild createElement  input    type   hidden                                                            name  property                                                           value  value                                       document body appendChild form       form submit        document body removeChild form

User · Answer

You could use jQuery s trigger method to submit the form  just like you press a button  like so      form   trigger  submit     it will submit on the browser

User · Answer

The Prototype library includes a Hashtable object  with a   toQueryString    method  which allows you to easily turn a JavaScript object structure into a query-string style string  Since the post requires the  body  of the request to be a query-string formatted string  this allows your Ajax request to work properly as a post  Here s an example using Prototype    req   new Ajax Request  http   foo com bar php        method   post       parameters   H           name   Diodeus           question   JavaScript posts a request like a form request                      toQueryString

User · Answer

This is based on beauSD s code using jQuery  It is improved so it works recursively on objects   function post url  params  urlEncoded  newWindow        var form       lt form   gt    hide        form attr  action   url           attr  method    POST            attr  enctype   urlEncoded    application x-www-form-urlencoded     multipart form-data        if newWindow  form attr  target     blank         function addParam name  value  parent            var fullname    parent length  gt  0    parent         name          name           if value instanceof Object                for var i in value                    addParam i  value i   fullname                                   else     lt input type  hidden    gt    attr  name  fullname  value  value   appendTo form               addParam     params               body   append form       form submit

User · Answer

A simple quick-and-dirty implementation of  Aaron answer   document body innerHTML      lt form id  dynForm  action  http   example com   method  post  gt  lt input type  hidden  name  q  value  a  gt  lt  form gt    document getElementById  dynForm   submit      Of course  you should rather use a JavaScript framework such as Prototype or jQuery

User · Answer

This works perfectly in my case   document getElementById  form1   submit      You can use it in function like   function formSubmit          document getElementById  frmUserList   submit         Using this you can post all the values of inputs

User · Answer

this is the answer of rakesh  but with support for arrays  which is quite common in forms     plain javascript    function post to url path  params  method        method   method     post      Set method to post by default  if not specified          The rest of this code assumes you are not using a library         It can be made less wordy if you use one      var form   document createElement  form        form setAttribute  method   method       form setAttribute  action   path        var addField   function  key  value            var hiddenField   document createElement  input            hiddenField setAttribute  type    hidden            hiddenField setAttribute  name   key           hiddenField setAttribute  value   value             form appendChild hiddenField                for var key in params            if params hasOwnProperty key                 if  params key  instanceof Array                    for var i   0  i  lt  params key  length  i                         addField  key  params key  i                                                else                  addField  key  params key                                         document body appendChild form       form submit        oh  and here s the jquery version   slightly different code  but boils down to the same thing   function post to url path  params  method        method   method     post      Set method to post by default  if not specified       var form     document createElement   form              attr    method   method   action   path            each  params  function key value             each  value instanceof Array  value    value   function i val                 document createElement  input                     attr    type    hidden    name   key   value   val                     appendTo  form                                form appendTo  document body   submit

User · Answer

You could dynamically add the form using DHTML and then submit

User · Answer

Dynamically create  lt input gt s in a form and submit it         sends a request to the specified url from a form  this will change the window location      param  string  path the path to send the post request to     param  object  params the paramiters to add to the url     param  string   method post  the method to use on the form      function post path  params  method  post           The rest of this code assumes you are not using a library       It can be made less wordy if you use one    const form   document createElement  form      form method   method    form action   path     for  const key in params        if  params hasOwnProperty key           const hiddenField   document createElement  input          hiddenField type    hidden         hiddenField name   key        hiddenField value   params key          form appendChild hiddenField                document body appendChild form     form submit         Example   post   contact     name   Johnny Bravo       EDIT  Since this has gotten upvoted so much  I m guessing people will be copy-pasting this a lot  So I added the hasOwnProperty check to fix any inadvertent bugs

User · Answer

Well  wish I had read all the other posts so I didn t lose time creating this from Rakesh Pai s answer  Here s a recursive solution that works with arrays and objects   No dependency on jQuery   Added a segment to handle cases where the entire form should be submitted like an array   ie  where there s no wrapper object around a list of items          Posts javascript data to a url using form submit         Note  Handles json and arrays      param  string  path - url where the data should be sent      param  string  data - data as javascript object  JSON       param  object  options -- optional attributes               string  method  get post put etc         string  arrayName  name to post arraylike data   Only necessary when root data object is an array            example postToUrl   UpdateUser    Order  Id  1  FirstName   Sally          function postToUrl path  data  options        if  options     undefined            options                  var method   options method     post      Set method to post by default if not specified       var form   document createElement  form        form setAttribute  method   method       form setAttribute  action   path        function constructElements item  parentString            for  var key in item                if  item hasOwnProperty key   amp  amp  item key     null                    if  Object prototype toString call item key         object Array                          for  var i   0  i  lt  item key  length  i                              constructElements item key  i   parentString   key         i                                                  else if  Object prototype toString call item key         object Object                          constructElements item key   parentString   key                           else                       var hiddenField   document createElement  input                        hiddenField setAttribute  type    hidden                        hiddenField setAttribute  name   parentString   key                       hiddenField setAttribute  value   item key                        form appendChild hiddenField                                                          if the parent  data  object is an array we need to treat it a little differently     if  Object prototype toString call data        object Array              if  options arrayName     undefined  console warn  Posting array-type to url will doubtfully work without an arrayName defined in options               loop through each array item at the parent level         for  var i   0  i  lt  data length  i                  constructElements data i    options arrayName                i                          else             otherwise treat it normally         constructElements data                  document body appendChild form       form submit

User · Answer

If you have Prototype installed  you can tighten up the code to generate and submit the hidden form like this    var form   new Element  form                            method   post   action   http   example com       form insert new Element  input                             name   q   value   a   type   hidden         document body  insert form    form submit

User · Answer

If you have Prototype installed  you can tighten up the code to generate and submit the hidden form like this    var form   new Element  form                            method   post   action   http   example com       form insert new Element  input                             name   q   value   a   type   hidden         document body  insert form    form submit

User · Answer

One solution is to generate the form and submit it  One implementation is  function post to url url  params        var form   document createElement  form        form action   url      form method    POST        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                        form submit        So I can implement a URL shortening bookmarklet with a simple  javascript post to url  http   is gd create php     URL   location href

User · Answer

Rakesh Pai s answer is amazing  but there is an issue that occurs for me  in Safari  when I try to post a form with a field called submit  For example  post to url  http   google com     submit   submit        I have patched the function slightly to walk around this variable space collision       function post to url path  params  method            method   method     post            var form   document createElement  form               Move the submit function to another variable           so that it doesn t get overwritten          form  submit function    form submit           form setAttribute  method   method           form setAttribute  action   path            for var key in params                var hiddenField   document createElement  input                hiddenField setAttribute  type    hidden                hiddenField setAttribute  name   key               hiddenField setAttribute  value   params key                 form appendChild hiddenField                      document body appendChild form           form  submit function       Call the renamed function            post to url  http   google com      submit   submit         Works

User · Answer

Here is how I wrote it using jQuery  Tested in Firefox and Internet nbsp Explorer   function postToUrl url  params  newWindow        var form       lt form gt         form attr  action   url       form attr  method    POST        if newWindow   form attr  target     blank            var addParam   function paramName  paramValue          var input       lt input type  hidden  gt           input attr    id       paramName                    name     paramName                    value    paramValue           form append input                  Params is an Array      if params instanceof Array           for var i 0  i lt params length  i                  addParam i  params i                            Params is an Associative array or Object      if params instanceof Object            for var key in params               addParam key  params key                            Submit the form  then remove it from the page     form appendTo document body       form submit        form remove

User · Answer

This is like Alan s option 2  above   How to instantiate the httpobj is left as an excercise   httpobj open  POST   url  true   httpobj setRequestHeader  Content-Type   application x-www-form-urlencoded  charset UTF-8    httpobj onreadystatechange handler  httpobj send post

User · Answer

You could use a library like jQuery and its   post method

User · Answer

Try   x000D   x000D  function post to url url  obj    x000D    let id  form    new Date      x000D    document body innerHTML    x000D       lt form id    id   action    url   method  POST  gt  x000D          Object keys obj  map k  gt   x000D           lt input type  hidden  name    k   value    obj k    gt  x000D            x000D       lt  form gt   x000D    this id  submit      x000D    x000D   x000D     TEST - in second param object can have more keys x000D  function jump     post to url  https   example com      q   a       x000D  Open chrome gt networks and push button  x000D   lt button onclick  jump    gt Send POST lt  button gt  x000D   x000D   x000D

User · Answer

The easiest way is using Ajax Post Request     ajax       type   POST       url   http   www myrestserver com api       data  data      success  success      dataType  dataType           where    data is an object dataType is the data expected by the server  xml  json  script  text  html   url is the address of your RESt server or any function on the server side that accept the HTTP-POST    Then in the success handler redirect the browser with something like window location

User · Answer

I use the document forms java and loop it to get all the elements in the form  then send via xhttp  So this is my solution for javascript   ajax submit  with all html included as an example               lt  DOCTYPE html gt              lt html gt              lt body gt              lt form gt         First name   lt input type  text  name  fname  value  Donald  gt  lt br gt          Last name   lt input type  text  name  lname  value  Duck  gt  lt br gt            Addr1   lt input type  text  name  add  value  123 Pond Dr  gt  lt br gt             City   lt input type  text  name  city  value  Duckopolis  gt  lt br gt         lt  form gt                  lt button onclick  smc    gt Submit lt  button gt                       lt script gt               function smc                       var http   new XMLHttpRequest                           var url    yourphpfile php                        var x   document forms 0                             var xstr                                var ta                          var tb                      var i                 for  i   0  i  lt  x length  i           if  i  0  ta   x elements i  name      x elements i  value  else         tb   tb   amp    x elements i  name        x elements i  value                               xstr   ta tb        http open  POST   url  true          http setRequestHeader  Content-type    application x-www-form-urlencoded           http onreadystatechange   function               if http readyState    4  amp  amp  http status    200                do whatever you want to with the html output response here                                                   http send xstr                              lt  script gt             lt  body gt        lt  html gt

[javascript] JavaScript post request like a form submit

Examples related to javascript

Examples related to forms

Examples related to post

Examples related to submit