Convert form data to JavaScript object with jQuery

Question

How do I convert all elements of my form to a JavaScript object    I d like to have some way of automatically building a JavaScript object from my form  without having to loop over each element  I do not want a string  as returned by     formid   serialize     nor do I want the map returned by     formid   serializeArray

User · Answer

UPDATE 2020   With a simple oneliner in vanilla js that leverages fromEntries  as always  check browser support    Object fromEntries new FormData form

User · Answer

If you are using Underscore js you can use the relatively concise     object   map     myform   serializeArray      values

User · Answer

serializeArray already does exactly that  You just need to massage the data into your required format  function objectifyForm formArray          serialize data function     var returnArray           for  var i   0  i  lt  formArray length  i             returnArray formArray i   name      formArray i   value              return returnArray     Watch out for hidden fields which have the same name as real inputs as they will get overwritten

User · Answer

using lodash set  let serialized         key   data model  id    value  1        key   data model  name    value   product         key   sid   value   dh0un1hr4d        serialized reduce function res  item        set res  item key  item value     return res              returns      data          model            id   1         name    product                sid    dh0un1hr4d

User · Answer

My code from my library phery got a serialization routine that can deal with really complex forms  like in the demo https   github com pocesar phery blob master demo php L1664    and it s not a one-size-fits-all  It actually checks what the type of each field is  For example  a radio box isn t the same as a range  that isn t the same as keygen  that isn t the same as select multiple  My function covers it all  and you can see it at https   github com pocesar phery blob master phery js L1851   serializeForm function  opt        opt     extend     opt        if  typeof opt  disabled        undefined     opt  disabled       null            opt  disabled     false            if  typeof opt  all        undefined     opt  all       null            opt  all     false            if  typeof opt  empty        undefined     opt  empty       null            opt  empty     true             var          form     this           result               formValues                form                  find  input textarea select keygen                    filter function                          var ret   true                      if   opt  disabled                              ret    this disabled                                            return ret  amp  amp    trim this name                                       map function                          var                          this     this                           radios                          options                          value   null                       if   this is   type  radio         this is   type  checkbox                                if   this is   type  radio                                    radios    form find   type  radio   name      this name                                      if  radios filter   checked    size                                      value   radios filter   checked    val                                                            else if   this prop  checked                                  value    this is   value       this val     1                                                  else if   this is  select                              options    this find  option   filter   selected                            if   this prop  multiple                                  value   options map function                                      return this value    this innerHTML                                 get                              else                               value   options val                                                    else                           value    this val                                               return                            name  this name    null                           value  value                                           get         if  formValues            var             i              value              name               matches              len              offset              j              fields           for  i   0  i  lt  formValues length  i                  name   formValues i  name              value   formValues i  value               if   opt  all                      if  value     null                        continue                                  else                   if  value     null                        value                                                    if  value         amp  amp   opt  empty                      continue                             if   name                    continue                              matches   name split                     len    matches length               for  j   1  j  lt  len  j                       matches j     matches j  replace     g                                  fields                    for  j   0  j  lt  len  j                      if   matches j     j  lt  len - 1                        fields push  matches j  replace                                                         if   matches len - 1                            offset   assign object result  fields      true  false  false                    if  value constructor     Array                        offset 0  offset 1   concat value                     else                       offset 0  offset 1   push value                                   else                   assign object result  fields  value                                      return result      It s part of my library phery  but it can be ported to your own project  It creates arrays where there should be arrays  it gets the correct selected options from the select  normalize checkbox options  etc  If you want to convert it to JSON  a real JSON string   just do JSON stringify    form   serializeForm

User · Answer

I prefer this approach because  you don t have to iterate over 2 collections  you can get at things other than  name  and  value  if you need to  and you can sanitize your values before you store them in the object  if you have default values that you don t wish to store  for example      formObject   function  o        var o               real value   function  field                var val    field val                          additional cleaning here  if needed              return val                  if  typeof o     object              o     o                  input name     o  each function i  field            var  field     field               name    field attr  name                value   real value  field            if  o name                 if     isArray o name                      o name     o name                               o name  push value                      else               o name    value                         return o      Use like so   var obj     formObject     someForm       Only tested in Firefox

User · Answer

I like using Array prototype reduce because it s a one-liner  and it doesn t rely on Underscore js or the like       formid   serializeArray        reduce function a  x    a x name    x value  return a            This is similar to the answer using Array prototype map  but you don t need to clutter up your scope with an additional object variable  One-stop shopping   IMPORTANT NOTE  Forms with inputs that have duplicate name attributes are valid HTML  and is actually a common approach  Using any of the answers in this thread will be inappropriate in that case  since object keys must be unique

User · Answer

Taking advantage of ES6 goodness in a one liner      form   serializeArray   reduce  o   name  n  value  v     gt  Object assign o     n   v

User · Answer

const formData   new FormData form    let formDataJSON        for  const  key  value  of formData entries           formDataJSON key    value

User · Answer

I like samuels version  but I believe it has a small error  Normally JSON is sent as       coreSKU   PCGUYJS   name de   whatever        NOT as        coreSKU   PCGUYJS     name de   whatever         so the function IMO should read   App toJson   function  selector         var o             map     selector    function  n i                 o n name      n  val                     return o      and to wrap it in data array  as commonly expected  too   and finally send it as astring App stringify   data App toJson    cropform  input        For the stringify look at Question 3593046 for the lean version  at json2 js for the every-eventuality-covered version  That should cover it all

User · Answer

You might not need jQuery for this task  FormData is a perfect solution for this  Here is the code that use FormData to collect input values  and use dot-prop to transform the values into nested objects  CodeSandbox Demo

User · Answer

Using macek s solution  I modified it to work with the way ASP NET MVC handles their nested complex objects on the same form  All you have to do is modify the validate piece to this    validate      a-zA-Z  a-zA-Z0-9             d   a-zA-Z0-9               a-zA-Z  a-zA-Z0-9           This will match and then correctly map elements with names like    lt input type  text  name  zooName    gt    And   lt input type  text  name  zooAnimals 0  name    gt

User · Answer

This code working for me     var data       myForm input   myForm select   myForm textarea   toArray   reduce function  m  e                m e name      e  val                return m

User · Answer

Here s a one-liner using reduce   Reduce is a functional function that takes the return value of the passed function and passes it back to the passed function in the next iteration  along with the nth value from the list       formid   serializeArray   reduce  o p    gt       o   p name   p value      We have to use a few of tricks to get this to work       o  spread syntax  inserts all the key  value pairs from o Wrap the object we are returning in    to distinguish it from the    that denote a function Wrap the key  p name  in

User · Answer

the simplest and most accurate way i found for this problem was to use bbq plugin or this one  which is about 0 5K bytes size    it also works with multi dimensional arrays    x000D   x000D    fn serializeObject   function   x000D    x000D   return   deparam this serialize     x000D     x000D   x000D   x000D

User · Answer

Simplicity is best here  I ve used a simple string replace with a regular expression  and they worked like a charm thus far  I am not a regular expression expert  but I bet you can even populate very complex objects   var values     this  serialize    attributes        values replace      amp         amp     g  function  match  name  value        attributes name    value

User · Answer

Javascript   jQuery one-liner-ish - which works on older versions too  pre ES6        form   serializeArray   reduce  f c    gt   f c  name     f c  name        concat f c  name    c  value    c  value    return f

User · Answer

There is a plugin to do just that for jQuery  jquery serializeJSON  I have used it successfully on a few projects now  It works like a charm

User · Answer

So I used the accepted answer and found a major flaw  It doesn t support input arrays like      lt input type  checkbox  name  array    value  1   gt   lt input type  checkbox  name  array    value  2   gt   lt input type  checkbox  name  array    value  3   gt    This minor change should fix that     function objectifyForm inp       var rObject           for  var i   0  i  lt  inp length  i             if inp i   name   substr inp i   name   length - 2                        var tmp   inp i   name   substr 0  inp i   name   length-2               if Array isArray rObject tmp                     rObject tmp  push inp i   value                   else                  rObject tmp                        rObject tmp  push inp i   value                             else              rObject inp i   name      inp i   value                        return rObject      Remember to pass it the output from   this  serializeArray    otherwise it wont work

User · Answer

This function returns all values converted to the right type   bool string  integer floats  possible  Tho you kinda need jQuery for this  but since serializeArray is jQuery too  so no big deal imho          serialized a form to a json object        usage      myform   jsonSerialize             function           use strict         fn jsonSerialize   function             var json               var array     this  serializeArray              each array  function key  obj                var value    obj value          false   obj value              if value                       check if we have a number                 var isNum      d    test value                   if isNum  value   parseFloat value                      check if we have a boolean                 var isBool      false true     test value                   if isBool  value    value    false                              json obj name    value                      return json           jQuery

User · Answer

Use   function form to json  selector      var ary     selector  serializeArray      var obj         for  var a   0  a  lt  ary length  a    obj ary a  name    ary a  value    return obj      Output     myfield    myfield value    passwordfield    mypasswordvalue

User · Answer

I found a problem with Tobias Cohen s code  I don t have enough points to comment on it directly   which otherwise works for me  If you have two select options with the same name  both with value     the original code will produce  name     instead of  name           I think this can fixed by adding      o this name         to the first if condition     fn serializeObject   function         var o           var a   this serializeArray          each a  function             if  o this name     o this name                       if   o this name  push                    o this name     o this name                              o this name  push this value                   else               o this name    this value                              return o

User · Answer

If you are sending a form with JSON you must remove    in sending the string  You can do that with the jQuery function serializeObject     var frm     document myform   var data   JSON stringify frm serializeObject        fn serializeObject   function         var o             var a   this serializeArray          this  find  input type  hidden    input type  text    input type  password    input type  checkbox   checked  input type  radio   checked  select   each function             if    this  attr  type       hidden       If checkbox is checked do not take the hidden field             var  parent     this  parent                var  chb    parent find  input type  checkbox   name      this name replace     g        replace     g                             if   chb    null                    if   chb prop  checked    return                                  if  this name     null    this name     undefined    this name                     return          var elemValue   null          if    this  is  select                elemValue     this  find  option selected   val            else             elemValue   this value          if  o this name      undefined                if   o this name  push                    o this name     o this name                              o this name  push elemValue                           else               o this name    elemValue                              return o

User · Answer

What s wrong with    var data           form-selector   serializeArray   map function x  data x name    x value

User · Answer

A more modern way is to use reduce with serializeArray    in this way       formid   serializeArray        reduce  a  x    gt        a   x name   x value            It will help for many of the  normal  cases   For the very common instance where there are multiple tags with duplicate name attributes  this is not enough   Since inputs with duplicate name attributes are normally inside some  wrapper   div  ul  tr        like in this exemple      lt div class  wrapperClass  gt       lt input type  text  name  one  gt       lt input type  text  name  two  gt     lt  div gt     lt div class  wrapperClass  gt       lt input type  text  name  one  gt       lt input type  text  name  two  gt     lt  div gt    one can use reduce with the map operator to iterate on them       wrapperClass   map function        return   this  find      serializeArray        reduce  a  x    gt        a   x name   x value             get      The result will be an array of objects in the format                   one  valueOfOne        two  valueOfTwo                one  valueOfOne        two  valueOfTwo             The  get   operator is used in conjunction with map to get the basic array instead of the jQuery object which gives a cleaner result  jQuery docs

User · Answer

This is an improvement for Tobias Cohen s function  which works well with multidimensional arrays   http   jsfiddle net BNnwF 2   However  this is not a jQuery plugin  but it will only take a few seconds to make it into one if you wish to use it that way  simply replace the function declaration wrapper   function serializeFormObject form                with     fn serializeFormObject   function         var form   this               I guess it is similar to macek s solution in that it does the same thing  but i think this is a bit cleaner and simpler  I also included macek s test case inputs into the fiddle and added some additional ones  So far this works well for me   function serializeFormObject form        function trim str                return str replace    s   s   g                 var o           var a     form  serializeArray          each a  function             var nameParts   this name split               if  nameParts length    1                   New value is not an array - so we simply add the new                value to the result object             if  o this name      undefined                    if   o this name  push                        o this name     o this name                                      o this name  push this value                       else                   o this name    this value                                        else                  New value is an array - we need to merge it into the                existing result object               each nameParts  function  index                    nameParts index    this replace                                             This   each merges the new value in  part by part             var arrItem   this              var temp   o                each nameParts  function  index                    var next                  var nextNamePart                  if  index  gt   nameParts length - 1                      next   arrItem value                        else                       nextNamePart   nameParts index   1                       if  trim this         amp  amp  temp this      undefined                          next   temp this                       else                           if  trim nextNamePart                                     next                               else                             next                                                                if  trim this                               temp push next                     else                     temp this    next                   temp   next                                        return o

User · Answer

Create a map and cycle all fields  saving their values   var params           form   find    name    each function        params this getAttribute  name      this value

User · Answer

I found a problem with the selected solution   When using forms that have array based names the jQuery serializeArray   function actually dies   I have a PHP framework that uses array-based field names to allow for the same form to be put onto the same page multiple times in multiple views  This can be handy to put both add  edit and delete on the same page without conflicting form models   Since I wanted to seralize the forms without having to take this absolute base functionality out I decided to write my own seralizeArray             var  vals                    video edit form input   each function i               var name     this  attr  name   replace  editSingleForm   i                    name   name replace     i                    switch   this  attr  type                     case  text                        vals name      this  val                        break                  case  checkbox                       if   this  attr  checked                              vals name      this  val                                              break                  case  radio                       if   this  attr  checked                              vals name      this  val                                              break                  default                      break                              Please note  This also works outside of form submit   so if an error occurs in the rest of your code the form won t submit if you place on a link button saying  save changes    Also note that this function should never be used to validate the form only to gather the data to send to the server-side for validation  Using such weak and mass-assigned code WILL cause XSS  etc

User · Answer

From some older answer      form input  form select   toArray   reduce function m e  m e name      e  val    return m

User · Answer

One-liner  no dependencies other than jQuery   uses fixed object binding for function passsed to map method       form   serializeArray   map function x  this x name    x value  return this   bind      0    What it does    id 2 amp value 1 amp comment ok    gt  Object   id   2   value   1   comment   ok      suitable for progressive web apps  one can easily support both regular form submit action as well as ajax requests

User · Answer

I coded a form to a multidimensional JavaScript object myself to use it in production  The result is https   github com serbanghita formToObject js

User · Answer

Use this   var sf       mainForm   serialize       URL encoded string sf   sf replace    g                    Be sure all  s are escaped sf          sf replace   amp  g             Start  object   replace tupel delimiter  amp  sf   sf replace    g                    Replace equal sign  add closing  object      Test the  object  var formdata   eval       sf          console log formdata     It works like a charm  even on very complex forms

User · Answer

This solution is better  Some of the more popular options on here don t correct handle checkboxes when the checkbox is not checked          getData  function element            todo may need additional logic for radio buttons       var select     element  find  select          var input     element  find  input          var inputs     merge select input         var data               console log input  input            each inputs function            if   this  attr  type      undefined             switch   this  attr  type                 case  checkbox                 data   this  attr  name           this  attr  checked       checked       this  val   0                  break              default                data   this  attr  name        this  val                  break                                else            data   this  attr  name        this  val                             return data

User · Answer

Here s a non-jQuery way       var getFormData   function form              Ignore the submit button         var elements   Array prototype filter call form elements  function element                var type   element getAttribute  type                return  type    type toLowerCase        submit                 You can use it like this   function          var getFormData   function form              Ignore the submit button         var elements   Array prototype filter call form elements  function element                var type   element getAttribute  type                return  type    type toLowerCase        submit                          Make an object out of the form data   name  value          var data   elements reduce function data  element                data element name    element value              return data                           return data              var post   function action  data  callback            var request   new XMLHttpRequest            request onload   callback          request open  post   action           request setRequestHeader  Content-Type    application json charset UTF-8            request send JSON stringify data   true           request send                var submit   function e            e preventDefault            var form   e target          var action   form action          var data   getFormData form             change the third argument in order to do something           more intersting with the response than just print it         post action  data  console log bind console                 change formName below     document formName onsubmit   submit

User · Answer

A fixed version of Tobias Cohen s solution  This one correctly handles falsy values like 0 and       jQuery fn serializeObject   function       var arrayData  objectData    arrayData   this serializeArray      objectData            each arrayData  function         var value       if  this value    null          value   this value        else         value                  if  objectData this name     null          if   objectData this name  push            objectData this name     objectData this name                   objectData this name  push value         else         objectData this name    value                 return objectData       And a CoffeeScript version for your coding convenience   jQuery fn serializeObject   - gt    arrayData    serializeArray     objectData           each arrayData  - gt      if  value        value    value     else       value           if objectData  name         unless objectData  name  push         objectData  name     objectData  name          objectData  name  push value     else       objectData  name    value    return objectData

User · Answer

I had the same problem lately and came out with this  toJSON jQuery plugin which converts a form into a JSON object with the same structure  This is also expecially useful for dynamically generated forms where you want to let your user add more fields in specific places   The point is you may actually want to build a form so that it has a structure itself  so let s say you want to make a form where the user inserts his favourite places in town  you can imagine this form to represent a  lt places gt     lt  places gt  XML element containing a list of places the user likes thus a list of  lt place gt     lt  place gt  elements each one containing for example a  lt name gt     lt  name gt  element  a  lt type gt     lt  type gt  element and then a list of  lt activity gt     lt  activity gt  elements to represent the activities you can perform in such a place  So your XML structure would be like this    lt places gt        lt place gt            lt name gt Home lt  name gt           lt type gt dwelling lt  type gt            lt activity gt sleep lt  activity gt           lt activity gt eat lt  activity gt           lt activity gt watch TV lt  activity gt        lt  place gt        lt place gt     lt  place gt        lt place gt     lt  place gt    lt  places gt    How cool would it be to have a JSON object out of this which would represent this exact structure so you ll be able to either    Store this object as it is in any CouchDB-like database Read it from your   POST   server side and retrive a correctly nested array you can then semantically manipulate Use some server-side script to convert it into a well-formed XML file  even if you don t know its exact structure a-priori  Just somehow use it as it is in any Node js-like server script   OK  so now we need to think how a form can represent an XML file   Of course the  lt form gt  tag is the root  but then we have that  lt place gt  element which is a container and not a data element itself  so we cannot use an input tag for it   Here s where the  lt fieldset gt  tag comes in handy  We ll use  lt fieldset gt  tags to represent all container elements in our form XML representation and so getting to a result like this    lt form name  places  gt        lt fieldset name  place  gt            lt input type  text  name  name   gt           lt select name  type  gt               lt option value  dwelling  gt Dwelling lt  option gt               lt option value  restoration  gt Restoration lt  option gt               lt option value  sport  gt Sport lt  option gt               lt option value  administrative  gt Administrative lt  option gt           lt  select gt            lt input type  text  name  activity   gt           lt input type  text  name  activity   gt           lt input type  text  name  activity   gt        lt  fieldset gt    lt  form gt    As you can see in this form  we re breaking the rule of unique names  but this is OK because they ll be converted into an array of element thus they ll be referenced only by their index inside the array   At this point you can see how there s no name  array    like name inside the form and everything is pretty  simple and semantic   Now we want this form to be converted into a JSON object which will look like this     places          place                             name    Home                type    dwelling                 activity                       sleep                     eat                     watch TV                                                                         To do this I have developed this jQuery plugin here which someone helped optimizing in this Code Review thread and looks like this     fn toJSO   function          var obj                kids     this  children   name         if    kids length            return   this  val               kids each function              var  el     this               name    el attr  name            if   el siblings   name     name        length                if    radio checkbox i test  el attr  type        el prop  checked                      obj name    obj name                         obj name  push  el toJSO                             else               obj name     el toJSO                          return obj       I also made this one blog post to explain this more   This converts everything in a form to JSON  even radio and check boxes  and all you ll have left to do is call    post  script php    form   toJSO            I know there s plenty of ways to convert forms into JSON objects and sure  serialize   and  serializeArray   work great in most cases and are mostly intended to be used  but I think this whole idea of writing a form as an XML structure with meaningful names and converting it into a well-formed JSON object is worth the try  also the fact you can add same-name input tags without worrying is very useful if you need to retrive dynamically generated forms data   I hope this helps someone

User · Answer

Another answer   x000D   x000D  document addEventListener  DOMContentLoaded   function     x000D    setInterval function     x000D      var form   document getElementById  form      document querySelector  form name  userprofile      x000D      var json   Array from new FormData form   map function e i   this e 0   e 1   return this   bind      0   x000D       x000D      console log json  x000D      document querySelector   asJSON   value   JSON stringify json   x000D       1000   x000D     x000D   lt form name  userprofile  id  form  gt  x000D     lt p gt Name  lt input type  text  name  firstname  value  John   gt  lt  p gt  x000D     lt p gt Family name  lt input name  lastname  value  Smith   gt  lt  p gt  x000D     lt p gt Work  lt input name  employment name   value  inc  Inc    gt  lt  p gt  x000D     lt p gt Works since  lt input name  employment since   value  2017    gt  lt  p gt  x000D     lt p gt Photo  lt input type  file    gt  lt  p gt  x000D     lt p gt Send  lt input type  submit    gt  lt  p gt  x000D   lt  form gt  x000D   x000D  JSON   lt textarea id  asJSON  gt  lt  textarea gt  x000D   x000D   x000D    FormData  https   developer mozilla org en-US docs Web API FormData

User · Answer

The serialize function take JSON object as a parameter and return serialize String   function serialize object                var  SPECIAL CHARS          x00- x1f x7f- x9f u00ad u0600- u0604 u070f u17b4 u17b5 u200c- u200f u2028- u202f u2060- u206f ufeff ufff0- uffff  g   CHARS                       b       b                     t       t                     n       n                     f       f                     r       r                                                                             EMPTY       OPEN O        CLOSE O        OPEN A        CLOSE A        COMMA        COMMA CR      n   CR     n   COLON        space       COLON SP         stack       QUOTE                    function  char c                    if    CHARS c                          CHARS c       u      0000       c charCodeAt 0    toString 16                            slice -4                                     return  CHARS c                             function  string s                    return QUOTE   s replace  SPECIAL CHARS   char    QUOTE                     return str replace          replace                                      function serialize h  key                    var value   h key   a       colon        arr  i  keys  t  k  v                  arr   value instanceof Array                  stack push value                   keys   value                  i   0                  t   typeof value                  switch  t                        case  object                            if value  null                               return null                                                    break                      case  string                            return  string value                       case  number                            return isFinite value    value   EMPTY   NULL                      case  boolean                            return value   EMPTY                      case  null                            return null                      default                           return undefined                                    arr   value length     undefined   false   true                   if  arr       Array                     for  i   value length - 1  i  gt   0  --i                            a i    serialize value  i     NULL                                                          else      Object                     i   0                      for  k in keys                            if  keys hasOwnProperty k                                 v   serialize value  k                               if  v                                    a i       string k    colon   v                                                                                                                   stack pop                    if  space  amp  amp  a length                         return arr                                  indent a join COMMA CR   space      n                                n     indent a join COMMA CR   space      n                                      else                       return arr         a join COMMA                a join COMMA                                                                             return serialize                        object

User · Answer

I wouldn t use this on a live site due to XSS attacks and probably plenty of other issues  but here s a quick example of what you could do       myform   submit function        var arr     this  serializeArray        var json           jQuery each arr  function            jQuery each this  function i  val               if  i   name                     json          val                       else if  i   value                     json          val replace    g                                                       json         json substring 0  json length - 1                do something with json     return false

User · Answer

I wrote a jQuery module  jsForm  that can do this bidirectional even for quite complicated forms  allows collections and other more complex structures as well    It uses the name of the fields  plus a few special classes for collections  and matches a JSON object  It allows automatic replication of DOM-elements for collections and data handling    lt html gt       lt head gt           lt script src  http   ajax googleapis com ajax libs jquery 1 9 1 jquery min js  gt  lt  script gt           lt script src  https   raw github com corinis jsForm master src jquery jsForm js  gt  lt  script gt           lt script gt            function                   Some JSON data             var jsonData                     name   TestName        Standard inputs                 description   long Description nMultiline      Textarea                 links    href  http   stackoverflow com  description  StackOverflow     href  http   www github com   description  GitHub          Lists                 active  true       Checkbox                 state   VISIBLE        Selects  enums                                 Initialize the form  prefix is optional and defaults to data                 details   jsForm                   data jsonData                                  show   click function                        Show the JSON data                 alert JSON stringify     details   jsForm  get    null                                              lt  script gt       lt  head gt       lt body gt           lt h1 gt Simpel Form Test lt  h1 gt           lt div id  details  gt              Name   lt input name  data name   gt  lt br  gt               lt input type  checkbox  name  data active   gt  active lt br  gt               lt textarea name  data description  gt  lt  textarea gt  lt br  gt               lt select name  data state  gt                   lt option value  VISIBLE  gt visible lt  option gt                   lt option value  IMPORTANT  gt important lt  option gt                   lt option value  HIDDEN  gt hidden lt  option gt               lt  select gt               lt fieldset gt                   lt legend gt Links lt  legend gt                   lt ul class  collection  data-field  data links  gt                       lt li gt  lt span class  field  gt links description lt  span gt  Link   lt input name  links href   gt   lt button class  delete  gt x lt  button gt  lt  li gt                   lt  ul gt               lt  fieldset gt               lt button class  add  data-field  data links  gt add a link lt  button gt  lt br  gt              Additional field   lt input name  data addedField   gt           lt  div gt           lt button id  show  gt Show Object lt  button gt       lt  body gt   lt  html gt

User · Answer

Tobias s solution above is the correct one  however  as commenter  macek pointed out  it does not handle inputs of type foo bar  and split them into sub-objects   This is a PHP-only feature  but I still find it very useful to be able to generate the same structure in JavaScript   I simply modified Tobias s code above  so all credit goes to him  This can probably be made cleaner  but I just whipped it up in five minutes and thought it might be useful   It does not handle multidimensional arrays or numerically indexed arrays at this time  That is  it will only work with names foo bar  and not foo     jQuery fn serializeObjectPHP   function         var o           var re                         var a   this serializeArray        var n      jQuery each a  function             var name   this name          if   n   re exec this name    amp  amp  n 2                 if  o n 1       undefined                    o n 1                         o n 1   n 2     this value                      else if  o n 1   n 2       undefined                    o n 1   n 2     this value                      else                   if  o n 1   n 2   push                        o n 1   n 2       o n 1   n 2                                        o n 1   n 2   push this value                                 else               if  n  amp  amp   n 2                     name   n 1                             if  o name      undefined                    if   o name  push                        o name     o name                                      o name  push this value                       else                   o name    this value                                            return o

User · Answer

Turn anything into an object  not unit tested    lt script type  text javascript  gt  string        string repeat   function string  count        return new Array count 1  join string      string count   function string        var count   0       for  var i 1  i lt arguments length  i                  var results   string match new RegExp arguments i    g             count    results   results length   0             return count     array        array merge   function arr1  arr2        for  var i in arr2                if  arr1 i   amp  amp  typeof arr1 i      object   amp  amp  typeof arr2 i      object               arr1 i    array merge arr1 i   arr2 i            else             arr1 i    arr2 i             return arr1     array print   function obj        var arr             each obj  function key  val            var next   key                 next      isPlainObject val    array print val    val          arr push  next                   return         arr join                  node        node objectify   function node  params        if   params          params            if   params selector          params selector             if   params key          params key    name        if   params value          params value    value        var o           var indexes              node  find params selector     params key      each function                 var name     this  attr params key               value     this  attr params value            var obj     parseJSON     name replace             function                         return     arguments 1                  replace            gi  function                         if  arguments 1  length    0                                var index   arguments 3  substring 0  arguments 2                    indexes index    indexes index      undefined   indexes index  1   0                   return       indexes index                                 else                 return       escape arguments 1                        value replace        gi  function                         return      arguments 0                   string repeat      string count name                       o   array merge o  obj                return o     lt  script gt    The output of test     document  ready function         console log array print node objectify    form               console log array print node objectify    form     selector   select             on   lt form gt       lt input name  input a   type  text  value  text   gt       lt select name  input b   gt           lt option gt select lt  option gt       lt  select gt        lt input name  otherinput c  a   value  a   gt       lt input name  otherinput c     value  b   gt       lt input name  otherinput d  b   value  c   gt       lt input name  otherinput c     value  d   gt        lt input type  hidden  name  anotherinput  value  hidden   gt       lt input type  hidden  name  anotherinput  value  1   gt        lt input type  submit  value  submit   gt   lt  form gt    will yield     input    a  text  b  select    otherinput    c    a  a  0  b  1  d    d    b  c      anotherinput  1     input    b  select

User · Answer

Ok  I know this already has a highly upvoted answer  but another similar question was asked recently  and I was directed to this question as well   I d like to offer my solution as well  because it offers an advantage over the accepted solution   You can include disabled form elements  which is sometimes important  depending on how your UI functions   Here is my answer from the other SO question   Initially  we were using jQuery s serializeArray   method  but that does not include form elements that are disabled   We will often disable form elements that are  sync d  to other sources on the page  but we still need to include the data in our serialized object   So serializeArray   is out   We used the  input selector to get all input elements  both enabled and disabled  in a given container  and then   map   to create our object   var inputs       container  input    var obj     map inputs  function n  i        var o           o n name      n  val        return o      console log obj     Note that for this to work  each of your inputs will need a name attribute  which will be the name of the property of the resulting object   That is actually slightly modified from what we used   We needed to create an object that was structured as a  NET IDictionary  so we used this   I provide it here in case it s useful   var obj     map inputs  function n  i        return   Key  n name  Value    n  val          console log obj     I like both of these solutions  because they are simple uses of the   map   function  and you have complete control over your selector  so  which elements you end up including in your resulting object    Also  no extra plugin required   Plain old jQuery

User · Answer

Convert forms to JSON like a boss    The current source is on GitHub and Bower        bower install jquery-serialize-object     The following code is now deprecated   The following code can take work with all sorts of input names  and handle them just as you d expect   For example    lt  -- All of these will work  -- gt   lt input name  honey badger   value  a  gt   lt input name  wombat    value  b  gt   lt input name  hello panda     value  c  gt   lt input name  animals 0  name   value  d  gt   lt input name  animals 0  breed   value  e  gt   lt input name  crazy 1    wonky   value  f  gt   lt input name  dream as  vividly  as  you  can   value  g  gt       Output      honey         badger   a          wombat    b       hello         panda    c           animals                 name   d          breed   e                crazy        null                wonky   f                 dream         as           vividly             as               you                 can   g                                              Usage      my-form   serializeObject      The Sorcery  JavaScript    function           fn serializeObject   function             var self   this              json                   push counters                   patterns                      validate      a-zA-Z  a-zA-Z0-9            d   a-zA-Z0-9                             key          a-zA-Z0-9             g                   push                              fixed         d                      named         a-zA-Z0-9                               this build   function base  key  value               base key    value              return base                      this push counter   function key               if push counters key      undefined                   push counters key    0                            return push counters key                           each   this  serializeArray    function                    Skip invalid keys             if  patterns validate test this name                    return                             var k                  keys   this name match patterns key                   merge   this value                  reverse key   this name               while  k   keys pop        undefined                       Adjust reverse key                 reverse key   reverse key replace new RegExp         k                                     Push                 if k match patterns push                        merge   self build     self push counter reverse key   merge                                         Fixed                 else if k match patterns fixed                        merge   self build     k  merge                                         Named                 else if k match patterns named                        merge   self build     k  merge                                                json     extend true  json  merge                        return json            jQuery

User · Answer

You can do this   var frm     document myform   var data   JSON stringify frm serializeArray       See JSON

User · Answer

I checked that there is a problem with all the other answers  that if the input name is as an array  such as name key   then it should be generated like this   name   key   value      For example  If you have an HTML form similar to the one below    lt form gt       lt input name  name  value  value   gt       lt input name  name1 key1   value  value1   gt       lt input name  name2 key2   value  value2   gt       lt input name  name3 key3   value  value3   gt   lt  form gt    But it should be generated just like the JSON below  and does not become an object like the following with all the other answers  So if anyone wants to bring something like the following JSON  try the JS code below         name     value       name1     key1    value1         name2     key2    value2         name3     key2    value2         x000D   x000D    fn getForm2obj   function     x000D    var         x000D      map this serializeArray    function n    x000D      const keys   n name match   a-zA-Z0-9             g   x000D      if  keys length  gt  1    x000D        let tmp      x000D        pop   keys pop    x000D        for  let i   0  i  lt  keys length  j   keys i   i      x000D          tmp j      tmp j     pop                    tmp j    tmp   tmp j   x000D          x000D        if  pop        tmp     Array isArray tmp         tmp   tmp push n value   x000D        else tmp pop    n value  x000D        else   keys pop      n value  x000D        x000D    return    x000D    x000D  console log    form   getForm2obj     x000D     form input   change function     x000D    console clear    x000D    console log    form   getForm2obj     x000D      x000D   lt script src  https   code jquery com jquery-3 2 1 min js  gt  lt  script gt  x000D   lt form gt  x000D     lt input name  name  value  value  gt  x000D     lt input type  checkbox  name  name1    value  1  checked  checked  gt 1 x000D     lt input type  checkbox  name  name1    value  2  gt 2 x000D     lt input type  checkbox  name  name1    value  3  gt 3 lt br gt  x000D     lt input type  radio  name  gender  value  male  checked  checked  gt male x000D     lt input type  radio  name  gender  value  female  gt  female x000D     lt input name  name2 key1   value  value1  gt  x000D     lt input name  one another  another one   value  value4  gt  x000D     lt input name  name3 1  name   value  value4  gt  x000D     lt input name  name3 2  name   value  value4  gt  x000D     lt input name      value  value5  gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

I recently had the same problem so I developed a function that allows parsing a form s controls to obtain control id value and convert that to JSON   It is flexible enough to allow adding more controls  You just need to specify the control type and the attribute that you want to interpreted as value   You can find the full script here   The advantage is that it only takes the data you actually need  without dragging the whole object   The dissadvantage is that if you have nested options  you need to prefix the IDs accordingly so you can use a duplicate option to its specific group   I hope this helps

User · Answer

I had to shameless self-promote my form library   transForm js  It does things like  serialize  deserialize  clear  amp  submit forms   The reason why I made this is form2js js2form is not maintained and is not as flexible  amp  fast as I would like  We use it in production because this is form2js js2form compatible

User · Answer

For a quick  modern solution  use the JSONify jQuery plugin  The example below is taken verbatim from the GitHub README  All credit to Kushal Pandya  author of the plugin   Given    lt form id  myform  gt       lt label gt Name  lt  label gt       lt input type  text  name  name   gt       lt label gt Email lt  label gt       lt input type  text  name  email   gt       lt label gt Password lt  label gt       lt input type  password  name  password   gt   lt  form gt    Running       myform   jsonify      Produces     name   Joe User   email   joe example com   password   mypass     If you want to do a jQuery POST with this JSON object       mybutton   click function           post   api user   JSON stringify     myform   jsonify

User · Answer

There really is no way to do this without examining each of the elements   What you really want to know is  has someone else already written a method that converts a form to a JSON object     Something like the following should work -- note that it will only give you the form elements that would be returned via a POST  must have a name    This is not tested   function formToJSON  selector          var form              selector  find   input name  enabled   each  function              var self     this            var name   self attr  name             if  form name                 form name    form name          self val                        else               form name    self val                              return form

User · Answer

This function should handle multidimensional arrays along with multiple elements with the same name    I ve been using it for a couple years so far   jQuery fn serializeJSON function       var json         jQuery map jQuery this  serializeArray    function n  i        var     n name indexOf           if     gt  -1          var o   json         name   n name replace     gi      split             for  var i 0  len  name length  i lt len  i              if  i    len-1              if  o  name i                  if  typeof o  name i       string                   o  name i      o  name i                               o  name i   push n value                         else o  name i     n value                          else o   o  name i     o  name i                            else         if  json n name      undefined            if   json n name  push              json n name     json n name                      json n name  push n value                       else json n name    n value                            return json

User · Answer

If you want to convert a form to a javascript object  then the easiest solution  at this time  is to use jQuery s each and serializeArray function-methods     fn serializeObject   function        var form           each   this  serializeArray    function  i  field        form field name    field value                 return form       Plugin hosted on GitHub  https   github com tfmontague form-object blob master README md  Can be installed with Bower  bower install git   github com tfmontague form-object git

User · Answer

All of these answers seemed so over the top to me  There s something to be said for simplicity  As long as all your form inputs have the name attribute set this should work just jim dandy       form myform   submit function        var  this     this        viewArr    this serializeArray         view          for  var i in viewArr        view viewArr i  name    viewArr i  value           Do stuff with view object here  e g  JSON stringify

[javascript] Convert form data to JavaScript object with jQuery

[UPDATE 2020]

Examples related to javascript

Examples related to jquery

Examples related to json

Examples related to serialization