How can I get form data with JavaScript jQuery

Question

Is there a simple  one-line way to get the data of a form as it would be if it was to be submitted in the classic HTML-only way   For example    lt form gt       lt input type  radio  name  foo  value  1  checked  checked    gt       lt input type  radio  name  foo  value  0    gt       lt input name  bar  value  xxx    gt       lt select name  this  gt           lt option value  hi  selected  selected  gt Hi lt  option gt           lt option value  ho  gt Ho lt  option gt   lt  form gt    Output          foo    1        bar    xxx        this    hi      Something like this is too simple  since it does not  correctly  include textareas  selects  radio buttons and checkboxes       form input   each function          data theFieldName    theFieldValue

User · Answer

showing form input element fields and input file to submit your form without page refresh and grab all values with file include in it here it is

_x000D_

<form id="imageUploadForm"   action="" method="post" enctype="multipart/form-data">_x000D_
<input type="text" class="form-control" id="fname" name='fname' placeholder="First Name" >_x000D_
<input type="text" class="form-control" name='lname' id="lname" placeholder="Last Name">_x000D_
<input type="number" name='phoneno'  class="form-control" id="phoneno" placeholder="Phone Number">_x000D_
<textarea class="form-control" name='address' id="address" rows="5" cols="5" placeholder="Your Address"></textarea>_x000D_
<input type="file" name="file" id="file" >_x000D_
<input type="submit" id="sub" value="Registration">        _x000D_
</form>

_x000D_

_x000D_ on Submit button page will send ajax request to your php file.

_x000D_

$('#imageUploadForm').on('submit',(function(e) _x000D_
{_x000D_
     fname = $('#fname').val();_x000D_
     lname =  $('#lname').val();_x000D_
     address =  $('#address').val();_x000D_
     phoneno =  $('#phoneno').val();_x000D_
     file =  $('#file').val();_x000D_
     e.preventDefault();_x000D_
     var formData = new FormData(this);_x000D_
     formData.append('file', $('#file')[0]);_x000D_
     formData.append('fname',$('#fname').val());_x000D_
     formData.append('lname',$('#lname').val());_x000D_
     formData.append('phoneno',$('#phoneno').val());_x000D_
     formData.append('address',$('#address').val());_x000D_
     $.ajax({_x000D_
  type:'POST',_x000D_
                url: "test.php",_x000D_
                //url: '<?php echo base_url().'edit_profile/edit_profile2';?>',_x000D_
_x000D_
                data:formData,_x000D_
                cache:false,_x000D_
                contentType: false,_x000D_
                processData: false,_x000D_
                success:function(data)_x000D_
                {_x000D_
                     alert('Data with file are submitted !');_x000D_
_x000D_
                }_x000D_
_x000D_
     });_x000D_
_x000D_
}))

_x000D_

User · Answer

I have included the answer to also give back the object required   function getFormData form    var rawJson   form serializeArray    var model          map rawJson  function  n  i        model n  name      n  value         return model

User · Answer

Use    form   serializeArray    which returns an array         name   foo   value   1        name   bar   value   xxx        name   this   value   hi       Other option is    form   serialize    which returns a string    foo 1 amp bar xxx amp this hi    Take a look at this jsfiddle demo

User · Answer

var formData   new FormData     form-id     params         form-id   serializeArray       each params  function i  val        formData append val name  val value

User · Answer

Updated answer for 2014  HTML5 FormData does this  var formData   new FormData document querySelector  form      You can then post formData exactly as it is - it contains all names and values used in the form

User · Answer

You can also use the FormData Objects  The FormData object lets you compile a set of key value pairs to send using XMLHttpRequest  Its primarily intended for use in sending form data  but can be used independently from forms in order to transmit keyed data           var formElement   document getElementById  myform id            var formData   new FormData formElement           console log formData

User · Answer

Here s a really simple and short soluton that even doesn t require Jquery   var formElements document getElementById  myForm   elements      var postData     for  var i 0  i lt formElements length  i        if  formElements i  type   submit    we dont want to include the submit-buttom         postData formElements i  name  formElements i  value

User · Answer

Based on neuront s response I created a simple JQuery method that gets the form data in key-value pairs but it works for multi-selects and for array inputs with name  example      This is how it is used   var form data       form   getFormObject      You can find an example below of its definition and how it works    x000D   x000D     Function start x000D    fn getFormObject   function     x000D      var object     this  serializeArray   reduce function obj  item    x000D          var name   item name replace            x000D          if   typeof obj name       undefined      x000D              if    Array isArray obj name       x000D                  obj name      obj name   item value    x000D                else   x000D                 obj name  push item value   x000D                x000D            else   x000D              obj name    item value  x000D            x000D          return obj  x000D              x000D      return object  x000D    x000D     Function ends x000D   x000D     This is how it s used x000D      getObject   click  function     x000D    var form data       form   getFormObject    x000D    console log form data   x000D      x000D     Only to make view better       x000D   getObject   x000D    padding  10px  x000D    cursor pointer  x000D    background  0098EE  x000D    color white  x000D    display inline-block  x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 2 1 3 jquery min js  gt  lt  script gt  x000D   lt form id  form  gt  x000D     lt input type  text  name  text  value  Hola amigo    gt   x000D     x000D     lt input type  text  name  text array    value  Array 1    gt   x000D     lt input type  text  name  text array    value  Array 2    gt   x000D     lt input type  text  name  text array    value  Array 3    gt   x000D     x000D     lt select name  multiselect  multiple gt  x000D       lt option name  option1  selected gt  option 1  lt  option gt  x000D       lt option name  option2  selected gt  option 2  lt  option gt  x000D     lt  select gt  x000D     x000D     lt input type  checkbox  name  checkbox  value  checkbox1  checked  gt  x000D     lt input type  checkbox  name  checkbox  value  checkbox2  checked  gt  x000D     x000D     lt input type  radio  name  radio  value  radio1  checked  gt  x000D     lt input type  radio  name  radio  value  radio2   gt  x000D   x000D   lt  form gt  x000D   x000D   lt div id  getObject  gt  Get object  check the console    lt  div gt  x000D   x000D   x000D

User · Answer

use  serializeArray   to get the data in array format and then convert it into an object   function getFormObj formId        var formObj           var inputs         formId  serializeArray          each inputs  function  i  input            formObj input name    input value              return formObj

User · Answer

form input   form select   form textarea   each function      data theFieldName    theFieldValue        other than that  you might want to look at serialize

User · Answer

You are all not fully correct  You cannot write   formObj input name    input value    Because this way if you have multiselect list - its values will be overwritten with the last one  since it s transmitted as   param1     value1    param1     value2    So  correct approach is   if  formData input name      undefined        formData input name    input value    else       var inputFieldArray     merge       isArray formData input name     formData input name     formData input name           merge inputFieldArray   input value        formData input name      merge     inputFieldArray

User · Answer

I wrote a function that takes care of multiple checkboxes and multiple selects  In those cases it returns an array   function getFormData formId        return         formId  serializeArray   reduce function  obj  item            var name   item name              value   item value           if  obj hasOwnProperty name                 if  typeof obj name      string                     obj name     obj name                    obj name  push value                 else                   obj name  push value                           else               obj name    value                    return obj

User · Answer

It is 2019 and there s a better way to do this   const form   document querySelector  form    const data   new URLSearchParams new FormData form  entries       or if you want a plain Object instead  const form   document querySelector  form    const data   Object fromEntries new FormData form  entries       although note that this won t work with duplicate keys like you get from multi-select and duplicate checkboxes with the same name

User · Answer

x000D   x000D      form    bind   submit   function e    x000D      e preventDefault    x000D       x000D      console log     this  serializeObject          x000D   x000D        console log     this  serialize      x000D        console log     this  serializeArray      x000D   x000D      x000D   x000D   x000D    fn serializeObject   function     x000D      var o       x000D      var a   this serializeArray    x000D   x000D        each  a  function     x000D          if   o this name      undefined   x000D            x000D              if     o this name  push    x000D                x000D                  o this name     o this name    x000D                x000D              o this name  push this value         x000D            x000D          else  x000D            x000D              o this name    this value        x000D            x000D          x000D   x000D      return o  x000D     x000D   lt script src  https   ajax googleapis com ajax libs jquery 3 4 1 jquery min js  gt  lt  script gt  x000D   x000D   lt form gt  x000D   x000D       lt input type  radio  name  foo  value  1  checked  checked    gt  x000D       lt input type  radio  name  foo  value  0    gt  x000D       lt input name  bar  value  xxx    gt  x000D   x000D       lt select name  this  gt  x000D           lt option value  hi  selected  selected  gt Hi lt  option gt  x000D           lt option value  ho  gt Ho lt  option gt  x000D       lt  select gt  x000D   x000D       lt input type  submit  value  Submit    gt  x000D   x000D   lt  form gt  x000D   x000D   x000D    Codepen

User · Answer

Here is a nice vanilla JS function I wrote to extract form data as an object  It also has options for inserting additions into the object  and for clearing the form input fields   const extractFormData      form  clear  add      gt      return    slice call form children  filter node   gt  node nodeName      INPUT      reduce  formData  input    gt        const value   input value     if  clear    input value            return            formData         input name   value            add      Here is an example of its use with a post request   submitGrudge e      e preventDefault      const form   e target   const add     id  Date now    forgiven  false     const grudge   extractFormData   form  add  clear  true          grudge            name    Example name          offense    Example string          date    2017-02-16          id   1487877281983         forgiven   false           fetch  http   localhost 3001 api grudge         method   post       headers     Content-Type    application json         body  JSON stringify grudge            then response   gt  response json         then grudges   gt  this setState   grudges          catch err   gt  console log  error     err

User · Answer

I wrote a library to solve this very problem  JSONForms  It takes a form  goes through each input and builds a JSON object you can easily read   Say you have the following form    lt form enctype  application json  gt     lt input name  places 0  city   value  New York City  gt     lt input type  number  name  places 0  population   value  8175133  gt     lt input name  places 1  city   value  Los Angeles  gt     lt input type  number  name  places 1  population   value  3792621  gt     lt input name  places 2  city   value  Chicago  gt     lt input type  number  name  places 2  population   value  2695598  gt   lt  form gt    Passing the form to JSONForms  encode method returns you the following object        places                  city    New York City          population   8175133                     city    Los Angeles          population   3792621                     city    Chicago          population   2695598               Here s demo with your form

User · Answer

document querySelector  form   addEventListener  submit    e    gt      const formData   new FormData e target        Now you can use formData get  foo    for example       Don t forget e preventDefault   if you want to stop normal form  submission       This is a nitpicky answer  but let me explain why this is a better solution    We re properly handling a form submit rather than a button press   Some people like to push enter on fields   Some people use alternative input devices such as speech input or other accessibility devices   Handle the form submit and you correctly solve it for everyone  We re digging into the form data for the actual form that was submitted   If you change your form selector later  you don t have to change the selectors for all the fields   Furthermore  you might have several forms with the same input names   No need to disambiguate with excessive IDs and what not  just track the inputs based on the form that was submitted   This also enables you to use a single event handler for multiple forms if that is appropriate for your situation  The FormData interface is fairly new  but is well supported by browsers   It s a great way to build that data collection to get the real values of what s in the form   Without it  you re going to have to loop through all the elements  such as with form elements  and figure out what s checked  what isn t  what the values are  etc   Totally possible if you need old browser support  but the FormData interface is simpler  I m using ES6 here    not a requirement by any means  so change it back to be ES5 compatible if you need old browser support

User · Answer

Here is a working JavaScript only implementation which correctly handles checkboxes  radio buttons  and sliders  probably other input types as well  but I ve only tested these    function setOrPush target  val        var result   val      if  target            result    target           result push val             return result     function getFormResults formElement        var formElements   formElement elements      var formParams           var i   0      var elem   null      for  i   0  i  lt  formElements length  i    1            elem   formElements i           switch  elem type                case  submit                   break              case  radio                   if  elem checked                        formParams elem name    elem value                                    break              case  checkbox                   if  elem checked                        formParams elem name    setOrPush formParams elem name   elem value                                     break              default                  formParams elem name    setOrPush formParams elem name   elem value                       return formParams      Working example    x000D   x000D      function setOrPush target  val    x000D        var result   val  x000D        if  target    x000D          result    target   x000D          result push val   x000D          x000D        return result  x000D        x000D   x000D      function getFormResults formElement    x000D        var formElements   formElement elements  x000D        var formParams       x000D        var i   0  x000D        var elem   null  x000D        for  i   0  i  lt  formElements length  i    1    x000D          elem   formElements i   x000D          switch  elem type    x000D            case  submit   x000D              break  x000D            case  radio   x000D              if  elem checked    x000D                formParams elem name    elem value  x000D                x000D              break  x000D            case  checkbox   x000D              if  elem checked    x000D                formParams elem name    setOrPush formParams elem name   elem value   x000D                x000D              break  x000D            default  x000D              formParams elem name    setOrPush formParams elem name   elem value   x000D            x000D          x000D        return formParams  x000D        x000D   x000D         x000D         Boilerplate for running the snippet form x000D         x000D   x000D      function ok     x000D        var params   getFormResults document getElementById  main form     x000D        document getElementById  results wrapper   innerHTML   JSON stringify params  null        x000D        x000D   x000D       function     x000D        var main form   document getElementById  main form    x000D        main form addEventListener  submit   function event    x000D          event preventDefault    x000D          ok    x000D           false   x000D            x000D   lt form id  main form  gt  x000D     lt div id  questions wrapper  gt  x000D       lt p gt what is a  lt  p gt  x000D       lt div gt  x000D         lt input type  radio  required    name  q 0  value  a  id  a 0  gt  x000D         lt label for  a 0  gt a lt  label gt  x000D         lt input type  radio  required    name  q 0  value  b  id  a 1  gt  x000D         lt label for  a 1  gt b lt  label gt  x000D         lt input type  radio  required    name  q 0  value  c  id  a 2  gt  x000D         lt label for  a 2  gt c lt  label gt  x000D         lt input type  radio  required    name  q 0  value  d  id  a 3  gt  x000D         lt label for  a 3  gt d lt  label gt  x000D       lt  div gt  x000D       lt div class  question range  gt  x000D         lt label for  a 13  gt A  lt  label gt  x000D         lt input type  range  required    name  q 3  id  a 13  min  0  max  10  step  1  list  q 3 dl  gt  x000D         lt datalist id  q 3 dl  gt  x000D           lt option value  0  gt  lt  option gt  x000D           lt option value  1  gt  lt  option gt  x000D           lt option value  2  gt  lt  option gt  x000D           lt option value  3  gt  lt  option gt  x000D           lt option value  4  gt  lt  option gt  x000D           lt option value  5  gt  lt  option gt  x000D           lt option value  6  gt  lt  option gt  x000D           lt option value  7  gt  lt  option gt  x000D           lt option value  8  gt  lt  option gt  x000D           lt option value  9  gt  lt  option gt  x000D           lt option value  10  gt  lt  option gt  x000D         lt  datalist gt  x000D       lt  div gt  x000D       lt p gt A and or B  lt  p gt  x000D       lt div gt  x000D         lt input type  checkbox  name  q 4  value  A  id  a 14  gt  x000D         lt label for  a 14  gt A lt  label gt  x000D         lt input type  checkbox  name  q 4  value  B  id  a 15  gt  x000D         lt label for  a 15  gt B lt  label gt  x000D       lt  div gt  x000D     lt  div gt  x000D     lt button id  btn  type  submit  gt OK lt  button gt  x000D   lt  form gt  x000D   lt div id  results wrapper  gt  lt  div gt  x000D   x000D   x000D    edit   If you re looking for a more complete implementation  then take a look at this section of the project I made this for  I ll update this question eventually with the complete solution I came up with  but maybe this will be helpful to someone

User · Answer

function getFormData  form       var unindexed array    form serializeArray        var indexed array              map unindexed array  function n  i           if indexed array n  name       undefined               indexed array n  name       n  value              else              indexed array n  name    push n  value                            return indexed array

User · Answer

Here s my version in vanilla JS  tested on Chrome  works with   name  quot input quot  name  quot form name  quot   creates an object  name  quot checkbox   quot   creates an object with an array  name  quot form checkbox    quot   creates an array  name  quot form select  name  quot   creates an object with an object containing only the selected value          Get the values from a form     param formId   ID without the         returns  object      function getFormValues  formId         let postData           let form   document forms formId       let formData   new FormData  form         for   const value of formData entries                   let container   postData          let key   value 0           let arrayKeys   key match       w -     g       Check for any arrays          if   arrayKeys     null                         arrayKeys unshift  key substr  0  key search                  prepend the first key to the list             for   let i   0  count   arrayKeys length  lastRun   count - 1  i  lt  count  i                                   let  key   arrayKeys i                    key    key replace   quot   quot        replace   quot   quot            Remove the brackets                    if    key                                                if     Array isArray  container                                                   container                                                   key   container length                                     if       key in container       Create an object for the key if it doesn t exist                                       if   i     lastRun  amp  amp  arrayKeys i   1                                                           container  key                                                  else                                               container  key                                                                 if   i     lastRun      Until we re the last item  swap container with it s child                                       container   container  key                                      key    key                                  container key    value 1      finally assign the value            return postData

User · Answer

For those of you who would prefer an Object as opposed to a serialized string  like the one returned by   form  serialize    and a slight improvement on   form  serializeArray     feel free to use the code below   var Form          form  null       validate  function            if  this  form    this  form tagName toLowerCase        form   return false          if  this  form elements length  return false          loopFields  function callback           var elements   this  form elements          for var i   0  i  lt  elements length  i                 var element   form elements i               if name                          callback this  valueOfField element                                    valueOfField  function element           var type   element type          var name   element name trim            var nodeName   element nodeName toLowerCase            switch nodeName               case  input                   if type      radio     type      checkbox                        if element checked                           return element value                                                          return element value                  break              case  select                   if type      select-multiple                        for var i   0  i  lt  element options length  i                             if options i  selected                               return element value                                                                                    return element value                  break              case  button                   switch type                       case  reset                        case  submit                        case  button                           return element value                          break                                    break                    serialize  function form           var data               this  form   form           if this  validate                 this  loopFields function value                   if value     null  data name    value                                    return data             To execute it  just use Form serialize form  and the function will return an Object similar to this    lt  --   username   username   password   password     -- gt   lt input type  text  value  username  gt   lt input type  password  value  password  gt    As a bonus  it means you don t have to install the entire bundle of jQuery just for one serialize function

User · Answer

form   serialize     this produces   foo 1 amp bar xxx amp this hi    demo

User · Answer

This will append all form fields to the JavaScript object  res    var res           form input   form select   form textarea   each function i  obj        res obj name      obj  val

User · Answer

you can use this function for have an object or a JSON from form   for use it    x000D   x000D  var object   formService getObjectFormFields   idform    x000D   x000D   x000D     x000D   x000D   function  getObjectFormFields formSelector  x000D            x000D                   lt summary gt Fun    o que retorna objeto com base nas propriedades name dos elementos do formul  rio  lt  summary gt  x000D                   lt param name  formSelector  type  String  gt Seletor do formul  rio lt  param gt  x000D   x000D              var form     formSelector   x000D   x000D              var result       x000D              var arrayAuxiliar       x000D              form find   input text   each function  index  element  x000D                x000D                  var name     element  attr  name    x000D   x000D                  var value     element  val    x000D                  result name    value  x000D                  x000D   x000D              form find   input type hidden    each function  index  element  x000D                x000D                  var name     element  attr  name    x000D                  var value     element  val    x000D                  result name    value  x000D                  x000D   x000D   x000D              form find   input checked   each function  index  element  x000D                x000D                  var name  x000D                  var value  x000D                  if    this  attr  type       radio   x000D                    x000D                      name     element  attr  name    x000D                      value     element  val    x000D                      result name    value  x000D                    x000D                  else if    this  attr  type       checkbox   x000D                    x000D                      name     element  attr  name    x000D                      value     element  val    x000D                      if  result name   x000D                        x000D                          if  Array isArray result name    x000D                            x000D                              result name  push value   x000D                            else x000D                            x000D                              var aux   result name   x000D                              result name        x000D                              result name  push aux   x000D                              result name  push value   x000D                            x000D   x000D                        else x000D                        x000D                          result name        x000D                          result name  push value   x000D                        x000D                    x000D   x000D                  x000D   x000D              form find  select option selected   each function  index  element  x000D                x000D                  var name     element  parent   attr  name    x000D                  var value     element  val    x000D                  result name    value  x000D   x000D                  x000D   x000D              arrayAuxiliar       x000D              form find  checkbox checked   each function  index  element  x000D                x000D                  var name     element  attr  name    x000D                  var value     element  val    x000D                  result name    arrayAuxiliar push value   x000D                  x000D   x000D              form find  textarea   each function  index  element  x000D                x000D                  var name     element  attr  name    x000D                  var value     element  val    x000D                  result name    value  x000D                  x000D   x000D              return result  x000D            x000D   x000D   x000D

User · Answer

form  serializeArray   reduce function  obj  item          if  obj item name                if    isArray obj item name                     obj item name  push item value                else                   var previousValue   obj item name                   obj item name     previousValue  item value                        else              obj item name    item value                return obj            It will fix issue couldn t work with multiselects

User · Answer

I use this   jQuery Plugin   function         fn getFormData   function        var data           var dataArray     this  serializeArray        for var i 0 i lt dataArray length i           data dataArray i  name    dataArray i  value            return data         jQuery     HTML Form   lt form id  myform  gt     lt input name  myVar1    gt     lt input name  myVar2    gt   lt  form gt    Get the Data  var myData       myForm   getFormData

User · Answer

If you are using jQuery  here is a little function that will do what you are looking for   First  add an ID to your form  unless it is the only form on the page  then you can just use  form  as the dom query    lt form id  some-form  gt    lt input type  radio  name  foo  value  1  checked  checked    gt    lt input type  radio  name  foo  value  0    gt    lt input name  bar  value  xxx    gt    lt select name  this  gt     lt option value  hi  selected  selected  gt Hi lt  option gt     lt option value  ho  gt Ho lt  option gt   lt  form gt    lt script gt    read in a form s data and convert it to a key value object function getFormData dom query       var out           var s data     dom query  serializeArray          transform into simple data value object     for var i   0  i lt s data length  i             var record   s data i           out record name    record value            return out     console log getFormData   some-form      lt  script gt    The output would look like       foo    1     bar    xxx     this    hi

User · Answer

Based on jQuery serializeArray  returns key-value pairs   var data       form   serializeArray   reduce function obj  item        obj item name    item value      return obj

User · Answer

This method should do it  It serializes the form data and then converts them to an object  Takes care of groups of checkboxes as well   function getFormObj formId      var formParams                 formId       serializeArray        forEach function item          if  formParams item name             formParams item name     formParams item name            formParams item name  push item value          else           formParams item name    item value                   return formParams

[javascript] How can I get form data with JavaScript/jQuery?

Examples related to javascript

Examples related to jquery

Examples related to forms