form serialize javascript no framework

Question

Wondering is there a function in javascript without jquery or any framework that allows me to serialize the form and access the serialized version

User · Answer

Works in all browsers    x000D   x000D  const formSerialize   formElement   gt    x000D    const values       x000D    const inputs   formElement elements  x000D   x000D    for  let i   0  i  lt  inputs length  i      x000D      values inputs i  name    inputs i  value  x000D      x000D    return values  x000D    x000D   x000D  const dumpValues   form   gt       gt    x000D     x000D    const r   formSerialize form   x000D    console log r   x000D    console log JSON stringify r    x000D    x000D   x000D  const form   document querySelector  form    x000D   x000D  dumpValues form     x000D   x000D  form addEventListener  change  dumpValues form    x000D   lt form action   my-handling-form-page  method  post  gt  x000D     lt div gt  x000D       lt label for  name  gt Name  lt  label gt  x000D       lt input type  text  id  name  name  user name  value  John  gt  x000D     lt  div gt  x000D     lt div gt  x000D       lt label for  mail  gt E-mail  lt  label gt  x000D       lt input type  email  id  mail  name  user mail  value  john jonhson j  gt  x000D     lt  div gt  x000D     lt div gt  x000D       lt label for  interests  gt Interest  lt  label gt  x000D       lt select required     id  interests  name  interests  gt  x000D         lt option value    selected  selected  gt - None - lt  option gt  x000D         lt option value  drums  gt Drums lt  option gt  x000D         lt option value  js  gt Javascript lt  option gt  x000D         lt option value  sports  gt Sports lt  option gt  x000D         lt option value  trekking  gt Trekking lt  option gt  x000D       lt  select gt  x000D     lt  div gt  x000D     lt div gt  x000D       lt label for  msg  gt Message  lt  label gt  x000D       lt textarea id  msg  name  user message  gt Hello My Friend lt  textarea gt  x000D     lt  div gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

This could be done by very simple function as follows  x000D   x000D  function serialize form            let requestArray               form querySelectorAll   name    forEach  elem    gt                requestArray push elem name         elem value                       if requestArray length  gt  0              return requestArray join   amp             else             return false          serialized   serialize document querySelector  form      console log serialized   x000D   lt form gt      lt input type  text  name  fname  value  Johne   gt     lt input type  text  name  lname  value  Doe   gt     lt input type  text  name  contact    value  99999999   gt     lt input type  text  name  contact    value  34423434345   gt    lt  form gt  x000D   x000D   x000D

User · Answer

my way    const myForm   document forms  form-name    myForm onsubmit e  gt        e preventDefault       for testing       let data   Array from new FormData myForm                      reduce  r  k v    gt  r k  v return r                                                   same code  for beginners    let data        Array from new FormData myForm    entry    gt    data  entry 0      entry 1                                                                              console log data

User · Answer

For debugging purposes this might help you   function print form data form        const form data   new FormData form        for  const item of form data entries              console log item              return false

User · Answer

I started with the answer from Johndave Decano   This should fix a few of the issues mentioned in replies to his function    Replace  20 with a   symbol  Submit Button types will only be submitted if they were clicked to submit the form  Reset buttons will be ignored  The code seemed redundant to me since it is doing essentially the same thing regardless of the field types  Not to mention incompatibility with HTML5 field types such as  tel  and  email   thus I removed most of the specifics with the switch statements    Button types will still be ignored if they don t have a name value   function serialize form  evt       var evt      evt    window event      evt target   evt target    evt srcElement    null      var field  query         if typeof form     object   amp  amp  form nodeName     FORM            for i form elements length-1  i gt  0  i--               field   form elements i               if field name  amp  amp  field type     file   amp  amp  field type     reset                    if field type     select-multiple                        for j form elements i  options length-1  j gt  0  j--                           if field options j  selected                               query      amp     field name         encodeURIComponent field options j  value  replace   20 g                                                                                         else                      if  field type     submit   amp  amp  field type     button      evt target    field                           if  field type     checkbox   amp  amp  field type     radio      field checked                               query      amp     field name         encodeURIComponent field value  replace   20 g                                                                                                              return query substr 1       This is how I am currently using this function    lt form onsubmit  myAjax  http   example com services email php    POST   serialize this  event    gt

User · Answer

The miniature from-serialize library doesn t rely on a framework  Other than something like that  you ll need to implement the serialization function yourself   though at a weight of 1 2 kilobytes  why not use it

User · Answer

HTMLElement prototype serialize   function        var obj           var elements   this querySelectorAll   input  select  textarea         for  var i   0  i  lt  elements length    i             var element   elements i           var name   element name          var value   element value           if  name                 obj  name     value                      return JSON stringify  obj        To use like this   var dataToSend   document querySelector  form   serialize      I hope I have helped

User · Answer

I hope this will work  var serializeForm    formElement    gt      const formData         const inputs   formElement elements     for  let i   0  i  lt  inputs length  i          if inputs i  name               formData inputs i  name    inputs i  value        return formData

User · Answer

supports IE8 and IE9    function serialize form        var inputs   form elements      var array           for i 0  i  lt  inputs length  i            var inputNameValue   inputs i  name         inputs i  value        array push inputNameValue             return array join   amp            using the serialize function written above  var form   document getElementById  form     get the id of your form  i am assuming the id to be named form   var form data   serialize form    var xhr   new XMLHttpRequest     xhr send form data       does not work with IE8 AND IE9  var form   document querySelector  form     var data   new FormData form    var xhr   new XMLHttpRequest     xhr send data

User · Answer

function serialize  form        if   form    form nodeName      FORM                 return            var i  j  q           for  i   form elements length - 1  i  gt   0  i   i - 1            if  form elements i  name                       continue                    switch  form elements i  nodeName                case  INPUT                   switch  form elements i  type                        case  text                       case  tel                       case  email                       case  hidden                       case  password                       case  button                       case  reset                       case  submit                           q push form elements i  name         encodeURIComponent form elements i  value                            break                      case  checkbox                       case  radio                           if  form elements i  checked                                    q push form elements i  name         encodeURIComponent form elements i  value                                                                                                     break                                    break                  case  file                   break               case  TEXTAREA                       q push form elements i  name         encodeURIComponent form elements i  value                        break              case  SELECT                   switch  form elements i  type                        case  select-one                           q push form elements i  name         encodeURIComponent form elements i  value                            break                      case  select-multiple                           for  j   form elements i  options length - 1  j  gt   0  j   j - 1                                if  form elements i  options j  selected                                        q push form elements i  name         encodeURIComponent form elements i  options j  value                                                                                    break                                    break              case  BUTTON                   switch  form elements i  type                        case  reset                       case  submit                       case  button                           q push form elements i  name         encodeURIComponent form elements i  value                            break                                    break                              return q join   amp         Source  http   code google com p form-serialize source browse trunk serialize-0 1 js

User · Answer

If you are looking to serialize the inputs on an event  Here s a pure JavaScript approach I use      serialize form var data       var inputs      slice call e target getElementsByTagName  input     inputs forEach input   gt      data input name    input value        Data will be a JavaScript object of the inputs

User · Answer

Here is pure JavaScript approach   var form   document querySelector  form    var data   new FormData form   var req   new XMLHttpRequest    req send data     Though it seems to be working only for POST requests   https   developer mozilla org en-US docs Web API FormData

User · Answer

Here s a slightly modified version of TibTibs    function serialize form        var field  s           if  typeof form     object   amp  amp  form nodeName     FORM             var len   form elements length          for  i 0  i lt len  i                  field   form elements i               if  field name  amp  amp   field disabled  amp  amp  field type     file   amp  amp  field type     reset   amp  amp  field type     submit   amp  amp  field type     button                     if  field type     select-multiple                         for  j form elements i  options length-1  j gt  0  j--                            if field options j  selected                              s s length    encodeURIComponent field name          encodeURIComponent field options j  value                                           else if   field type     checkbox   amp  amp  field type     radio      field checked                        s s length    encodeURIComponent field name          encodeURIComponent field value                                                       return s join   amp    replace   20 g            Disabled fields are discarded and names are also URL encoded  Regex replace of  20 characters takes place only once  before returning the string   The query string is in identical form to the result from jQuery s   serialize   method

User · Answer

I could be crazy but I m finding these answers seriously bloated  Here s my solution  function serialiseForm form      var input   form getElementsByTagName  input      var formData         for  var i   0  i  lt  input length  i          formData input i  name    input i  value        return formData   JSON stringify formData

User · Answer

I ve grabbed the  entries   method of formData from  moison answer and from MDN it s said that       The FormData entries   method returns an iterator allowing to go   through all key value pairs contained in this object  The key of each   pair is a USVString object  the value either a USVString  or a Blob    but the only issue is that mobile browser  android and safari are not supported   and IE and Safari desktop too   but basically here is my approach    let theForm    document getElementById  contact      theForm onsubmit   function event        event preventDefault         let rawData   new FormData theForm       let data           for let pair of rawData entries           data pair 0     pair 1              let contactData   JSON stringify data       console warn contactData         here you can send a post request with content-type   application json        the code can be found here

User · Answer

Here is pure JavaScript approach  var form   document querySelector  form    var data   new FormData form      var xhttp   new XMLHttpRequest      xhttp onreadystatechange   function         if  this readyState    4  amp  amp  this status    200           console log this responseText                xhttp open  quot POST quot    quot  lt YOUR-URL gt  quot   true     xhttp send data

User · Answer

Using JavaScript reduce function should do a trick for all browsers  including IE9     Array prototype slice call form elements     convert form elements to array      reduce function acc cur        reduce          var o    type   cur type  name   cur name  value   cur value      get needed keys         if   checkbox   radio   indexOf cur type     -1               o checked   cur checked            else if cur type      select-multiple                o value                 for i 0 i lt cur length i                     o value push                       value   cur options i  value                      selected   cur options i  selected                                                     acc push o           return acc            Live example bellow    x000D   x000D  var  formId   document getElementById  formId    x000D      formData   Array prototype slice call  formId elements  reduce function acc cur indx arr   x000D          var i o    type   cur type  name   cur name  value   cur value   x000D          if   checkbox   radio   indexOf cur type     -1   x000D              o checked   cur checked  x000D            else if cur type      select-multiple    x000D              o value     x000D              for i 0 i lt cur length i     x000D                  o value push   x000D                      value   cur options i  value  x000D                      selected   cur options i  selected x000D                      x000D                x000D            x000D          acc push o   x000D          return acc  x000D             x000D   x000D     view x000D  document getElementById  formOutput   innerHTML   JSON stringify formData  null  4   x000D   lt form id  formId  gt  x000D       lt input type  text  name  texttype  value  some text  gt  x000D       lt select gt  x000D           lt option value  Opt 1  gt Opt 1 lt  option gt  x000D           lt option value  Opt 2  selected gt Opt 2 lt  option gt  x000D           lt option value  Opt 3  gt Opt 3 lt  option gt  x000D       lt  select gt  x000D       lt input type  checkbox  name  checkboxtype  value  Checkbox 1  checked gt  Checkbox 1 x000D       lt input type  checkbox  name  checkboxtype  value  Checkbox 2  gt  Checkbox 2 x000D       lt input type  radio  name  radiotype  value  Radio Btn 1  gt  Radio Btn 1 x000D       lt input type  radio  name  radiotype  value  Radio Btn 2  checked gt  Radio Btn 2 x000D       lt select multiple gt  x000D           lt option value  Multi 1  selected gt Multi 1 lt  option gt  x000D           lt option value  Multi 2  gt Saab lt  option gt  x000D           lt option value  Multi 3  selected gt Multi 3 lt  option gt  x000D       lt  select gt  x000D   lt  form gt  x000D   lt pre gt  lt code id  formOutput  gt  lt  code gt  lt  pre gt  x000D   x000D   x000D

User · Answer

A refactored version of  SimonSteinberger s code using less variables and taking advantage of the speed of forEach loops  which are a bit faster than fors   function serialize form        var result           if  typeof form      object   amp  amp  form nodeName      FORM           Array prototype slice call form elements  forEach function control                if                   control name  amp  amp                    control disabled  amp  amp                     file    reset    submit    button   indexOf control type      -1                               if  control type      select-multiple                       Array prototype slice call control options  forEach function option                            if  option selected                               result push encodeURIComponent control name          encodeURIComponent option value                                            else if                         checkbox    radio   indexOf control type      -1                         control checked                   result push encodeURIComponent control name          encodeURIComponent control value                        return result join   amp    replace   20 g

User · Answer

Improving upon David Lemon s answer   This converts form data to JSON and allows you to set the form from a data object    x000D   x000D  const main        gt    x000D    const form   document forms  info    x000D    const data     x000D       user name           John   x000D       user email          john jonhson com   x000D       user created        2020-03-24   x000D       user age           42  x000D       user subscribed    true  x000D       user interests      sports   x000D       user message        Hello My Friend  x000D       x000D   x000D    populateForm form  data   x000D    updateJsonView form   x000D    form addEventListener  change    e    gt  updateJsonView form    x000D    x000D   x000D  const getFieldValue    field  opts    gt    x000D    let type   field getAttribute  type    x000D    if  type    x000D      switch  type    x000D        case  checkbox   x000D          return field checked  x000D        case  number   x000D          return field value includes      x000D              parseFloat field value  x000D              parseInt field value  10   x000D        x000D      x000D    if  opts  amp  amp  opts field name   amp  amp  opts field name  type    x000D      switch  opts field name  type    x000D        case  int   x000D          return parseInt field value  10   x000D        case  float   x000D          return parseFloat field value   x000D        x000D      x000D    return field value  x000D    x000D   x000D  const setFieldValue    field  value    gt    x000D    let type   field getAttribute  type    x000D    if  type    x000D      switch  type    x000D        case  checkbox   x000D          field checked   value  x000D          break  x000D        default  x000D          field value   value  x000D          break  x000D        x000D      else   x000D      field value   value  x000D      x000D    x000D   x000D  const extractFormData    form  opts    gt    x000D    return Array from form elements  reduce  data  element    gt    x000D      return Object assign data     element name    getFieldValue element  opts      x000D            x000D     x000D   x000D  const populateForm    form  data    gt    x000D    return Array from form elements  forEach  element    gt    x000D      setFieldValue element  data element name    x000D        x000D     x000D   x000D  const updateJsonView    form    gt    x000D    let fieldOptions       x000D    let formData   extractFormData form  fieldOptions   x000D    let serializedData   JSON stringify formData  null  2   x000D    document querySelector   json-view   textContent   serializedData  x000D     x000D   x000D  main    x000D   form-field   x000D    margin-bottom  0 5em  x000D    x000D   x000D   form-field label   x000D    display  inline-block  x000D    font-weight  bold  x000D    width  7em  x000D    vertical-align  top  x000D    x000D   x000D   json-view   x000D    position  absolute  x000D    top  0 667em  x000D    right  0 667em  x000D    border  thin solid grey  x000D    padding  0 5em  x000D    white-space  pre  x000D    font-family  monospace  x000D    overflow  scroll-y  x000D    max-height  100   x000D    x000D   lt form name  info  action   my-handling-form-page  method  post  gt  x000D     lt div class  form-field  gt  x000D       lt label for  name  gt Name  lt  label gt  x000D       lt input type  text  id  name  name  user name  gt  x000D     lt  div gt  x000D     lt div class  form-field  gt  x000D       lt label for  mail  gt E-mail  lt  label gt  x000D       lt input type  email  id  mail  name  user email  gt  x000D     lt  div gt  x000D     lt div class  form-field  gt  x000D       lt label for  created  gt Date of Birth  lt  label gt  x000D       lt input type  date  id  created  name  user created  gt  x000D     lt  div gt  x000D     lt div class  form-field  gt  x000D       lt label for  age  gt Age  lt  label gt  x000D       lt input type  number  id  age  name  user age  gt  x000D     lt  div gt  x000D     lt div class  form-field  gt  x000D       lt label for  subscribe  gt Subscribe  lt  label gt  x000D       lt input type  checkbox  id  subscribe  name  user subscribed  gt  x000D     lt  div gt  x000D     lt div class  form-field  gt  x000D       lt label for  interests  gt Interest  lt  label gt  x000D       lt select required     id  interests  name  user interests  gt  x000D         lt option value    selected  selected  gt - None - lt  option gt  x000D         lt option value  drums  gt Drums lt  option gt  x000D         lt option value  js  gt Javascript lt  option gt  x000D         lt option value  sports  gt Sports lt  option gt  x000D         lt option value  trekking  gt Trekking lt  option gt  x000D       lt  select gt  x000D     lt  div gt  x000D     lt div class  form-field  gt  x000D       lt label for  msg  gt Message  lt  label gt  x000D       lt textarea id  msg  name  user message  gt  lt  textarea gt  x000D     lt  div gt  x000D   lt  form gt  x000D   lt div class  json-view  gt  lt  div gt  x000D   x000D   x000D

User · Answer

I refactored TibTibs answer into something that s much clearer to read  It is a bit longer because of the 80 character width and a few comments   Additionally  it ignores blank field names and blank values      Serialize the specified form into a query string        Returns a blank string if  form  is not actually a form element  function  serialize form  evt      if typeof form       object   amp  amp  form nodeName      FORM       return        var evt      evt    window event      target  null      evt target   evt target    evt srcElement    null    var field  query             Transform a form field into a query-string-friendly      serialized form             NOTE   Replaces blank spaces from its standard   20  representation              into the non-standard  though widely used         var encode   function field  name        if  field disabled  return          return   amp      name    field name                     encodeURIComponent field value  replace   20 g                 Fields without names can t be serialized    var hasName   function el        return  el name  amp  amp  el name length  gt  0            Ignore the usual suspects  file inputs  reset buttons       buttons that did not submit the form and unchecked      radio buttons and checkboxes    var ignorableField   function el  evt        return   el type     file     el type     reset                el type     submit     el type     button    amp  amp  evt target    el               el type     checkbox     el type     radio    amp  amp   el checked          var parseMultiSelect   function field        var q            for  var j field options length-1  j gt  0  j--          if  field options j  selected            q    encode field options j   field name                      return q          for i   form elements length - 1  i  gt   0  i--        field   form elements i        if   hasName field     field value          ignorableField field  evt         continue       query     field type     select-multiple     parseMultiSelect field                                                   encode field          return  query length    0         query substr 1

User · Answer

For modern browsers only If you target browsers that support the URLSearchParams API  most recent browsers  and FormData formElement  constructor  most recent browsers   use this  new URLSearchParams new FormData formElement   toString    Everywhere except IE For browsers that support URLSearchParams but not the FormData formElement  constructor  use this FormData polyfill and this code  works everywhere except IE   new URLSearchParams Array from new FormData formElement    toString    Example  x000D   x000D  var form   document querySelector  form    var out   document querySelector  output     function updateResult       try       out textContent   new URLSearchParams Array from new FormData form         out className           catch  e        out textContent   e      out className    error          updateResult    form addEventListener  input   updateResult   x000D  body   font-family  Arial  sans-serif  display  flex  flex-wrap  wrap    input type  text     margin-left  6px  max-width  30px    label   label   margin-left  10px    output   font-family  monospace     error   color   c00    div   margin-right  30px    x000D   lt  -- FormData polyfill for older browsers -- gt   lt script src  https   unpkg com formdata-polyfill 3 0 17 formdata min js  gt  lt  script gt   lt div gt     lt h3 gt Form lt  h3 gt     lt form id  form  gt       lt label gt x  lt input type  text  name  x  value  1  gt  lt  label gt       lt label gt y  lt input type  text  name  y  value  2  gt  lt  label gt       lt label gt      z       lt select name  z  gt         lt option value  a  selected gt a lt  option gt         lt option value  b  selected gt b lt  option gt       lt  select gt     lt  label gt     lt  form gt   lt  div gt   lt div gt     lt h3 gt Query string lt  h3 gt     lt output for  form  gt  lt  output gt   lt  div gt  x000D   x000D   x000D   Compatible with IE 10 For even older browsers  e g  IE 10   use the FormData polyfill  an Array from polyfill if necessary and this code  Array from    new FormData formElement     e   gt  e map encodeURIComponent  join        join   amp

User · Answer

If you need to submit form  myForm  using POST in json format you can do   const formEntries   new FormData myForm  entries    const json   Object assign    Array from formEntries    x y     gt     x  y      fetch   api foo       method   POST     body  JSON stringify json        The second line converts from an array like      firstProp    firstValue      secondProp    secondValue       and so on           into a regular object  like     firstProp    firstValue    secondProp    secondValue      and so on            it does this conversion by passing in a mapFn into Array from    This mapFn is applied to each   a   b   pair and converts them into   a    b   so that the array contains a lot of object with only one property in each  The mapFn is using  destructuring  to get names of the first and second parts of the pair  and it is also using an ES6  ComputedPropertyName  to set the property name in the object returned by the mapFn  this is why is says   x   something  rather than just  x  something    All of these single property objects are then passed into arguments of the Object assign   function which merges all the single property objects into a single object that has all properties   Array from    https   developer mozilla org en-US docs Web JavaScript Reference Global Objects Array from  Destructuring in parameters  https   simonsmith io destructuring-objects-as-function-parameters-in-es6   More on computed property names here  Variable as the property name in a JavaScript object literal

[javascript] form serialize javascript (no framework)

Examples related to javascript

Examples related to forms

Examples related to serialization