How to build query string with Javascript

Question

Just wondering if there is anything built-in to Javascript that can take a Form and return the query parameters  eg   var1 value amp var2 value2 amp arr   foo amp arr   bar      I ve been wondering this for years

User · Answer

You can do that nowadays with FormData and URLSearchParams without the need to loop over anything   const formData   new FormData form   const searchParams   new URLSearchParams formData   const queryString   searchParams toString      Older browsers will need a polyfill  though

User · Answer

If you re using jQuery you might want to check out jQuery param   http   api jquery com jQuery param   Example   var params         parameter1   value1       parameter2   value2       parameter3   value3       var query     param params   document write query

User · Answer

You don t actually need a form to do this with Prototype  Just use Object toQueryString function   Object toQueryString   action   ship   order id  123  fees    f1    f2     label    a demo         - gt   action ship amp order id 123 amp fees f1 amp fees f2 amp label a 20demo

User · Answer

Is is probably too late to answer your question   I had the same question and I didn t like to keep appending strings to create a URL  So  I started using   param as techhouse explained   I also found a URI js library that creates the URLs easily for you  There are several examples that will help you  URI js Documentation  Here is one of them   var uri   new URI   hello world    uri setSearch  hello    mars       returns the URI instance for chaining    uri      hello mars   uri setSearch   foo   bar   goodbye     world    mars          uri      hello mars amp foo bar amp goodbye world amp goodbye mars   uri setSearch  goodbye    sun       uri      hello mars amp foo bar amp goodbye sun      CAUTION  beware of arrays  the following are not quite the same    If you re dealing with PHP  you probably want the latter    uri setSearch  foo     bar    baz     uri setSearch  foo       bar    baz

User · Answer

This doesn t directly answer your question  but here s a generic function which will create a URL that contains query string parameters   The parameters  names and values  are safely escaped for inclusion in a URL   function buildUrl url  parameters     var qs         for var key in parameters        var value   parameters key       qs    encodeURIComponent key          encodeURIComponent value      amp          if  qs length  gt  0       qs   qs substring 0  qs length-1     chop off last   amp       url   url         qs        return url        example  var url    http   example com     var parameters       name   George Washington     dob   17320222      console log buildUrl url  parameters         gt  http   www example com  name George 20Washington amp dob 17320222

User · Answer

With jQuery you can do this by   param    param   action   ship   order id  123  fees    f1    f2     label    a demo         - gt   action ship amp order id 123 amp fees 5B 5D f1 amp fees 5B 5D f2 amp label a demo

User · Answer

You can do that nowadays with FormData and URLSearchParams without the need to loop over anything   const formData   new FormData form   const searchParams   new URLSearchParams formData   const queryString   searchParams toString      Older browsers will need a polyfill  though

User · Answer

If you don t want to use a library  this should cover most all of the same form element types   function serialize form      if   form     form elements  return     var serial       i  j  first    var add   function  name  value        serial push encodeURIComponent name          encodeURIComponent value           var elems   form elements    for  i   0  i  lt  elems length  i    1  first   false        if  elems i  name length  gt  0       don t include unnamed elements          switch  elems i  type            case  select-one   first   true          case  select-multiple             for  j   0  j  lt  elems i  options length  j    1              if  elems i  options j  selected                  add elems i  name  elems i  options j  value                 if  first  break     stop searching for select-one                            break          case  checkbox           case  radio   if   elems i  checked  break     else continue            default  add elems i  name  elems i  value   break                       return serial join   amp

User · Answer

I m not entirely certain myself  I recall seeing jQuery did it to an extent  but it doesn t handle hierarchical records at all  let alone in a php friendly way    One thing I do know for certain  is when building URLs and sticking the product into the dom  don t just use string-glue to do it  or you ll be opening yourself to a handy page breaker    For instance  certain advertising software in-lines the version string from whatever runs your flash  This is fine when its adobes generic simple string  but however  that s very naive  and blows up in an embarrasing mess for people whom have installed Gnash  as gnash es version string happens to contain a full blown GPL copyright licences  complete with URLs and  lt a href gt  tags  Using this in your string-glue advertiser generator  results in the page blowing open and having imbalanced HTML turning up in the dom   The moral of the story       var foo   document createElement  elementnamehere        foo attribute   allUserSpecifiedDataConsideredDangerousHere      somenode appendChild foo      Not       document write   lt elementnamehere attribute                ilovebrokenwebsites                gt              stringdata              lt  elementnamehere gt       Google need to learn this trick  I tried to report the problem  they appear not to care

User · Answer

You don t actually need a form to do this with Prototype  Just use Object toQueryString function   Object toQueryString   action   ship   order id  123  fees    f1    f2     label    a demo         - gt   action ship amp order id 123 amp fees f1 amp fees f2 amp label a 20demo

User · Answer

Might be a bit redundant but the cleanest way i found which builds on some of the answers here   const params       key1   value1      key2   value2      key3   value3      const esc   encodeURIComponent  const query   Object keys params     map k   gt  esc k          esc params k       join   amp      return fetch  my-url       method   POST     headers    Content-Type    application x-www-form-urlencoded      body  query       Source

User · Answer

I m not entirely certain myself  I recall seeing jQuery did it to an extent  but it doesn t handle hierarchical records at all  let alone in a php friendly way    One thing I do know for certain  is when building URLs and sticking the product into the dom  don t just use string-glue to do it  or you ll be opening yourself to a handy page breaker    For instance  certain advertising software in-lines the version string from whatever runs your flash  This is fine when its adobes generic simple string  but however  that s very naive  and blows up in an embarrasing mess for people whom have installed Gnash  as gnash es version string happens to contain a full blown GPL copyright licences  complete with URLs and  lt a href gt  tags  Using this in your string-glue advertiser generator  results in the page blowing open and having imbalanced HTML turning up in the dom   The moral of the story       var foo   document createElement  elementnamehere        foo attribute   allUserSpecifiedDataConsideredDangerousHere      somenode appendChild foo      Not       document write   lt elementnamehere attribute                ilovebrokenwebsites                gt              stringdata              lt  elementnamehere gt       Google need to learn this trick  I tried to report the problem  they appear not to care

User · Answer

For those of us who prefer jQuery  you would use the form plugin  http   plugins jquery com project form  which contains a formSerialize method

User · Answer

Might be a bit redundant but the cleanest way i found which builds on some of the answers here   const params       key1   value1      key2   value2      key3   value3      const esc   encodeURIComponent  const query   Object keys params     map k   gt  esc k          esc params k       join   amp      return fetch  my-url       method   POST     headers    Content-Type    application x-www-form-urlencoded      body  query       Source

User · Answer

These answers are very helpful  but i want to add another answer  that may help you build full URL   This can help you concat base url  path  hash and parameters   var url   buildUrl  http   mywebsite com             path   about           hash   contact           queryParams                 var1    value                var2    value2                arr       foo                        console log url     You can download via npm https   www npmjs com package build-url  Demo    x000D   x000D    function      x000D     use strict   x000D   x000D    var root   this  x000D    var previousBuildUrl   root buildUrl  x000D   x000D    var buildUrl   function  url  options    x000D      var queryString       x000D      var key  x000D      var builtUrl  x000D      var caseChange   x000D       x000D          lowerCase  parameter default   false    x000D      if  options  amp  amp  options lowerCase    x000D          caseChange     options lowerCase  x000D        else   x000D          caseChange   false  x000D        x000D   x000D      if  url     null    x000D        builtUrl       x000D        else if  typeof url       object     x000D        builtUrl       x000D        options   url  x000D        else   x000D        builtUrl   url  x000D        x000D   x000D      if builtUrl  amp  amp  builtUrl builtUrl length - 1             x000D        builtUrl   builtUrl slice 0  -1   x000D         x000D   x000D      if  options    x000D        if  options path    x000D            var localVar   String options path  trim     x000D            if  caseChange    x000D              localVar   localVar toLowerCase    x000D              x000D            if  localVar indexOf          0    x000D                builtUrl    localVar  x000D              else   x000D              builtUrl          localVar  x000D              x000D          x000D   x000D        if  options queryParams    x000D          for  key in options queryParams    x000D            if  options queryParams hasOwnProperty key   amp  amp  options queryParams key      void 0    x000D              var encodedParam  x000D              if  options disableCSV  amp  amp  Array isArray options queryParams key    amp  amp  options queryParams key  length    x000D                for var i   0  i  lt  options queryParams key  length  i      x000D                  encodedParam   encodeURIComponent String options queryParams key  i   trim     x000D                  queryString push key         encodedParam   x000D                  x000D                else                 x000D                if  caseChange    x000D                  encodedParam   encodeURIComponent String options queryParams key   trim   toLowerCase     x000D                  x000D                else   x000D                  encodedParam   encodeURIComponent String options queryParams key   trim     x000D                  x000D                queryString push key         encodedParam   x000D                x000D              x000D            x000D          builtUrl          queryString join   amp     x000D          x000D   x000D        if  options hash    x000D          if caseChange  x000D              builtUrl          String options hash  trim   toLowerCase    x000D          else x000D              builtUrl          String options hash  trim    x000D          x000D         x000D      return builtUrl  x000D       x000D   x000D    buildUrl noConflict   function      x000D      root buildUrl   previousBuildUrl  x000D      return buildUrl  x000D       x000D   x000D    if  typeof exports       undefined     x000D      if  typeof module       undefined   amp  amp  module exports    x000D        exports   module exports   buildUrl  x000D        x000D      exports buildUrl   buildUrl  x000D      else   x000D      root buildUrl   buildUrl  x000D      x000D     call this   x000D   x000D   x000D  var url   buildUrl  http   mywebsite com     x000D    path   about   x000D    hash   contact   x000D    queryParams    x000D      var1    value   x000D      var2    value2   x000D      arr       foo  x000D      x000D       x000D   console log url   x000D   x000D   x000D

User · Answer

The URLSearchParams API is available in all modern browsers  For example    x000D   x000D  const params   new URLSearchParams   x000D    var1   value   x000D    var2   value2   x000D    arr   foo   x000D      x000D  console log params toString     x000D    Prints  var1 value amp var2 value2 amp arr foo  x000D   x000D   x000D

User · Answer

No  I don t think standard JavaScript has that built in  but Prototype JS has that function  surely most other JS frameworks have too  but I don t know them   they call it serialize    I can reccomend Prototype JS  it works quite okay  The only drawback I ve really noticed it it s size  a few hundred kb  and scope  lots of code for ajax  dom  etc    Thus if you only want a form serializer it s overkill  and strictly speaking if you only want it s Ajax functionality  wich is mainly what I used it for  it s overkill  Unless you re careful you may find that it does a little too much  magic   like extending every dom element it touches with Prototype JS functions just to find elements  making it slow on extreme cases

User · Answer

2k20 update  use Josh s solution with URLSearchParams toString     Old answer     Without jQuery  var params         parameter1   value 1       parameter2   value 2       parameter3   value amp 3       var esc   encodeURIComponent  var query   Object keys params       map k   gt  esc k          esc params k         join   amp       For browsers that don t support arrow function syntax which requires ES5  change the  map    line to       map function k   return esc k          esc params k

User · Answer

As Stein says  you can use the prototype javascript library from http   www prototypejs org  Include the JS and it is very simple then     formName   serialize   will return what you want

User · Answer

As Stein says  you can use the prototype javascript library from http   www prototypejs org  Include the JS and it is very simple then     formName   serialize   will return what you want

User · Answer

Create an URL object and append the values to seachParameters let baseURL    quot http   www google com search quot   let url   new URL baseURL   let params   url searchParams      params append  quot q quot   quot This is seach query quot     console log  url toString

User · Answer

I m not entirely certain myself  I recall seeing jQuery did it to an extent  but it doesn t handle hierarchical records at all  let alone in a php friendly way    One thing I do know for certain  is when building URLs and sticking the product into the dom  don t just use string-glue to do it  or you ll be opening yourself to a handy page breaker    For instance  certain advertising software in-lines the version string from whatever runs your flash  This is fine when its adobes generic simple string  but however  that s very naive  and blows up in an embarrasing mess for people whom have installed Gnash  as gnash es version string happens to contain a full blown GPL copyright licences  complete with URLs and  lt a href gt  tags  Using this in your string-glue advertiser generator  results in the page blowing open and having imbalanced HTML turning up in the dom   The moral of the story       var foo   document createElement  elementnamehere        foo attribute   allUserSpecifiedDataConsideredDangerousHere      somenode appendChild foo      Not       document write   lt elementnamehere attribute                ilovebrokenwebsites                gt              stringdata              lt  elementnamehere gt       Google need to learn this trick  I tried to report the problem  they appear not to care

User · Answer

You don t actually need a form to do this with Prototype  Just use Object toQueryString function   Object toQueryString   action   ship   order id  123  fees    f1    f2     label    a demo         - gt   action ship amp order id 123 amp fees f1 amp fees f2 amp label a 20demo

User · Answer

2k20 update  use Josh s solution with URLSearchParams toString     Old answer     Without jQuery  var params         parameter1   value 1       parameter2   value 2       parameter3   value amp 3       var esc   encodeURIComponent  var query   Object keys params       map k   gt  esc k          esc params k         join   amp       For browsers that don t support arrow function syntax which requires ES5  change the  map    line to       map function k   return esc k          esc params k

User · Answer

I m not entirely certain myself  I recall seeing jQuery did it to an extent  but it doesn t handle hierarchical records at all  let alone in a php friendly way    One thing I do know for certain  is when building URLs and sticking the product into the dom  don t just use string-glue to do it  or you ll be opening yourself to a handy page breaker    For instance  certain advertising software in-lines the version string from whatever runs your flash  This is fine when its adobes generic simple string  but however  that s very naive  and blows up in an embarrasing mess for people whom have installed Gnash  as gnash es version string happens to contain a full blown GPL copyright licences  complete with URLs and  lt a href gt  tags  Using this in your string-glue advertiser generator  results in the page blowing open and having imbalanced HTML turning up in the dom   The moral of the story       var foo   document createElement  elementnamehere        foo attribute   allUserSpecifiedDataConsideredDangerousHere      somenode appendChild foo      Not       document write   lt elementnamehere attribute                ilovebrokenwebsites                gt              stringdata              lt  elementnamehere gt       Google need to learn this trick  I tried to report the problem  they appear not to care

User · Answer

You don t actually need a form to do this with Prototype  Just use Object toQueryString function   Object toQueryString   action   ship   order id  123  fees    f1    f2     label    a demo         - gt   action ship amp order id 123 amp fees f1 amp fees f2 amp label a 20demo

User · Answer

querystring can help   So  you can  const querystring   require  querystring    url          querystring stringify parameters

User · Answer

For those of us who prefer jQuery  you would use the form plugin  http   plugins jquery com project form  which contains a formSerialize method

User · Answer

As Stein says  you can use the prototype javascript library from http   www prototypejs org  Include the JS and it is very simple then     formName   serialize   will return what you want

User · Answer

ES2017  ES8   Making use of Object entries    which returns an array of object s  key  value  pairs  For example  for  a  1  b  2  it would return    a   1     b   2    It is not supported  and won t be  only by IE   Code   const buildURLQuery   obj   gt        Object entries obj               map pair   gt  pair map encodeURIComponent  join                    join   amp       Example   buildURLQuery  name   John   gender   male       Result    name John amp gender male

User · Answer

With jQuery you can do this by   param    param   action   ship   order id  123  fees    f1    f2     label    a demo         - gt   action ship amp order id 123 amp fees 5B 5D f1 amp fees 5B 5D f2 amp label a demo

User · Answer

No  I don t think standard JavaScript has that built in  but Prototype JS has that function  surely most other JS frameworks have too  but I don t know them   they call it serialize    I can reccomend Prototype JS  it works quite okay  The only drawback I ve really noticed it it s size  a few hundred kb  and scope  lots of code for ajax  dom  etc    Thus if you only want a form serializer it s overkill  and strictly speaking if you only want it s Ajax functionality  wich is mainly what I used it for  it s overkill  Unless you re careful you may find that it does a little too much  magic   like extending every dom element it touches with Prototype JS functions just to find elements  making it slow on extreme cases

User · Answer

If you don t want to use a library  this should cover most all of the same form element types   function serialize form      if   form     form elements  return     var serial       i  j  first    var add   function  name  value        serial push encodeURIComponent name          encodeURIComponent value           var elems   form elements    for  i   0  i  lt  elems length  i    1  first   false        if  elems i  name length  gt  0       don t include unnamed elements          switch  elems i  type            case  select-one   first   true          case  select-multiple             for  j   0  j  lt  elems i  options length  j    1              if  elems i  options j  selected                  add elems i  name  elems i  options j  value                 if  first  break     stop searching for select-one                            break          case  checkbox           case  radio   if   elems i  checked  break     else continue            default  add elems i  name  elems i  value   break                       return serial join   amp

User · Answer

Create an URL object and append the values to seachParameters let baseURL    quot http   www google com search quot   let url   new URL baseURL   let params   url searchParams      params append  quot q quot   quot This is seach query quot     console log  url toString

User · Answer

x000D   x000D  var params     width 1680  height 1050    x000D  var str   jQuery param  params    x000D   x000D  console log str  x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

I know this is very late answer but works very well     var obj     a  a   b  b     Object entries obj  map   key  val    gt    key    val    join   amp       note  object entries will return key values pairs        output from above line will be a a amp b b   Hope its helps someone   Happy Coding

User · Answer

As Stein says  you can use the prototype javascript library from http   www prototypejs org  Include the JS and it is very simple then     formName   serialize   will return what you want

User · Answer

For those of us who prefer jQuery  you would use the form plugin  http   plugins jquery com project form  which contains a formSerialize method

User · Answer

These answers are very helpful  but i want to add another answer  that may help you build full URL   This can help you concat base url  path  hash and parameters   var url   buildUrl  http   mywebsite com             path   about           hash   contact           queryParams                 var1    value                var2    value2                arr       foo                        console log url     You can download via npm https   www npmjs com package build-url  Demo    x000D   x000D    function      x000D     use strict   x000D   x000D    var root   this  x000D    var previousBuildUrl   root buildUrl  x000D   x000D    var buildUrl   function  url  options    x000D      var queryString       x000D      var key  x000D      var builtUrl  x000D      var caseChange   x000D       x000D          lowerCase  parameter default   false    x000D      if  options  amp  amp  options lowerCase    x000D          caseChange     options lowerCase  x000D        else   x000D          caseChange   false  x000D        x000D   x000D      if  url     null    x000D        builtUrl       x000D        else if  typeof url       object     x000D        builtUrl       x000D        options   url  x000D        else   x000D        builtUrl   url  x000D        x000D   x000D      if builtUrl  amp  amp  builtUrl builtUrl length - 1             x000D        builtUrl   builtUrl slice 0  -1   x000D         x000D   x000D      if  options    x000D        if  options path    x000D            var localVar   String options path  trim     x000D            if  caseChange    x000D              localVar   localVar toLowerCase    x000D              x000D            if  localVar indexOf          0    x000D                builtUrl    localVar  x000D              else   x000D              builtUrl          localVar  x000D              x000D          x000D   x000D        if  options queryParams    x000D          for  key in options queryParams    x000D            if  options queryParams hasOwnProperty key   amp  amp  options queryParams key      void 0    x000D              var encodedParam  x000D              if  options disableCSV  amp  amp  Array isArray options queryParams key    amp  amp  options queryParams key  length    x000D                for var i   0  i  lt  options queryParams key  length  i      x000D                  encodedParam   encodeURIComponent String options queryParams key  i   trim     x000D                  queryString push key         encodedParam   x000D                  x000D                else                 x000D                if  caseChange    x000D                  encodedParam   encodeURIComponent String options queryParams key   trim   toLowerCase     x000D                  x000D                else   x000D                  encodedParam   encodeURIComponent String options queryParams key   trim     x000D                  x000D                queryString push key         encodedParam   x000D                x000D              x000D            x000D          builtUrl          queryString join   amp     x000D          x000D   x000D        if  options hash    x000D          if caseChange  x000D              builtUrl          String options hash  trim   toLowerCase    x000D          else x000D              builtUrl          String options hash  trim    x000D          x000D         x000D      return builtUrl  x000D       x000D   x000D    buildUrl noConflict   function      x000D      root buildUrl   previousBuildUrl  x000D      return buildUrl  x000D       x000D   x000D    if  typeof exports       undefined     x000D      if  typeof module       undefined   amp  amp  module exports    x000D        exports   module exports   buildUrl  x000D        x000D      exports buildUrl   buildUrl  x000D      else   x000D      root buildUrl   buildUrl  x000D      x000D     call this   x000D   x000D   x000D  var url   buildUrl  http   mywebsite com     x000D    path   about   x000D    hash   contact   x000D    queryParams    x000D      var1    value   x000D      var2    value2   x000D      arr       foo  x000D      x000D       x000D   console log url   x000D   x000D   x000D

User · Answer

If you re using jQuery you might want to check out jQuery param   http   api jquery com jQuery param   Example   var params         parameter1   value1       parameter2   value2       parameter3   value3       var query     param params   document write query

User · Answer

No  I don t think standard JavaScript has that built in  but Prototype JS has that function  surely most other JS frameworks have too  but I don t know them   they call it serialize    I can reccomend Prototype JS  it works quite okay  The only drawback I ve really noticed it it s size  a few hundred kb  and scope  lots of code for ajax  dom  etc    Thus if you only want a form serializer it s overkill  and strictly speaking if you only want it s Ajax functionality  wich is mainly what I used it for  it s overkill  Unless you re careful you may find that it does a little too much  magic   like extending every dom element it touches with Prototype JS functions just to find elements  making it slow on extreme cases

User · Answer

The URLSearchParams API is available in all modern browsers  For example    x000D   x000D  const params   new URLSearchParams   x000D    var1   value   x000D    var2   value2   x000D    arr   foo   x000D      x000D  console log params toString     x000D    Prints  var1 value amp var2 value2 amp arr foo  x000D   x000D   x000D

User · Answer

I know this is very late answer but works very well     var obj     a  a   b  b     Object entries obj  map   key  val    gt    key    val    join   amp       note  object entries will return key values pairs        output from above line will be a a amp b b   Hope its helps someone   Happy Coding

User · Answer

ES2017  ES8   Making use of Object entries    which returns an array of object s  key  value  pairs  For example  for  a  1  b  2  it would return    a   1     b   2    It is not supported  and won t be  only by IE   Code   const buildURLQuery   obj   gt        Object entries obj               map pair   gt  pair map encodeURIComponent  join                    join   amp       Example   buildURLQuery  name   John   gender   male       Result    name John amp gender male

User · Answer

If you don t want to use a library  this should cover most all of the same form element types   function serialize form      if   form     form elements  return     var serial       i  j  first    var add   function  name  value        serial push encodeURIComponent name          encodeURIComponent value           var elems   form elements    for  i   0  i  lt  elems length  i    1  first   false        if  elems i  name length  gt  0       don t include unnamed elements          switch  elems i  type            case  select-one   first   true          case  select-multiple             for  j   0  j  lt  elems i  options length  j    1              if  elems i  options j  selected                  add elems i  name  elems i  options j  value                 if  first  break     stop searching for select-one                            break          case  checkbox           case  radio   if   elems i  checked  break     else continue            default  add elems i  name  elems i  value   break                       return serial join   amp

User · Answer

For those of us who prefer jQuery  you would use the form plugin  http   plugins jquery com project form  which contains a formSerialize method

User · Answer

querystring can help   So  you can  const querystring   require  querystring    url          querystring stringify parameters

User · Answer

This doesn t directly answer your question  but here s a generic function which will create a URL that contains query string parameters   The parameters  names and values  are safely escaped for inclusion in a URL   function buildUrl url  parameters     var qs         for var key in parameters        var value   parameters key       qs    encodeURIComponent key          encodeURIComponent value      amp          if  qs length  gt  0       qs   qs substring 0  qs length-1     chop off last   amp       url   url         qs        return url        example  var url    http   example com     var parameters       name   George Washington     dob   17320222      console log buildUrl url  parameters         gt  http   www example com  name George 20Washington amp dob 17320222

User · Answer

Is is probably too late to answer your question   I had the same question and I didn t like to keep appending strings to create a URL  So  I started using   param as techhouse explained   I also found a URI js library that creates the URLs easily for you  There are several examples that will help you  URI js Documentation  Here is one of them   var uri   new URI   hello world    uri setSearch  hello    mars       returns the URI instance for chaining    uri      hello mars   uri setSearch   foo   bar   goodbye     world    mars          uri      hello mars amp foo bar amp goodbye world amp goodbye mars   uri setSearch  goodbye    sun       uri      hello mars amp foo bar amp goodbye sun      CAUTION  beware of arrays  the following are not quite the same    If you re dealing with PHP  you probably want the latter    uri setSearch  foo     bar    baz     uri setSearch  foo       bar    baz

User · Answer

No  I don t think standard JavaScript has that built in  but Prototype JS has that function  surely most other JS frameworks have too  but I don t know them   they call it serialize    I can reccomend Prototype JS  it works quite okay  The only drawback I ve really noticed it it s size  a few hundred kb  and scope  lots of code for ajax  dom  etc    Thus if you only want a form serializer it s overkill  and strictly speaking if you only want it s Ajax functionality  wich is mainly what I used it for  it s overkill  Unless you re careful you may find that it does a little too much  magic   like extending every dom element it touches with Prototype JS functions just to find elements  making it slow on extreme cases

User · Answer

x000D   x000D  var params     width 1680  height 1050    x000D  var str   jQuery param  params    x000D   x000D  console log str  x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

If you don t want to use a library  this should cover most all of the same form element types   function serialize form      if   form     form elements  return     var serial       i  j  first    var add   function  name  value        serial push encodeURIComponent name          encodeURIComponent value           var elems   form elements    for  i   0  i  lt  elems length  i    1  first   false        if  elems i  name length  gt  0       don t include unnamed elements          switch  elems i  type            case  select-one   first   true          case  select-multiple             for  j   0  j  lt  elems i  options length  j    1              if  elems i  options j  selected                  add elems i  name  elems i  options j  value                 if  first  break     stop searching for select-one                            break          case  checkbox           case  radio   if   elems i  checked  break     else continue            default  add elems i  name  elems i  value   break                       return serial join   amp

[javascript] How to build query string with Javascript

Examples related to javascript

Examples related to string

Examples related to forms

Examples related to get