Obtain form input fields using jQuery

Question

I have a form with many input fields   When I catch the submit form event with jQuery  is it possible to get all the input fields of that form in an associative array

User · Answer

http   api jquery com serializearray       form   on  submit   function         var data     this  serializeArray          This can also be done without jQuery using the XMLHttpRequest Level 2 FormData object  http   www w3 org TR 2010 WD-XMLHttpRequest2-20100907  the-formdata-interface  var data   new FormData  form

User · Answer

Sometimes I find getting one at a time is more useful   For that  there s this   var input name    firstname   var input       form id  input name    input name

User · Answer

Don t forget the checkboxes and radio buttons -  var inputs       myForm  input    var obj     map inputs  function n  i      var o         if  n type     radio     n type     checkbox       o n id      n  attr  checked      else     o n id      n  val      return o      return obj

User · Answer

Try the following code   jQuery   form   serializeArray   filter obje   gt   obje value      map aobj  gt aobj name     aobj value  join   amp

User · Answer

All answers are good  but if there s a field that you like to ignore in that function  Easy  give the field a property  for example ignore this    lt input type  text  name  some name  ignore this gt    And in your Serialize Function   if    name  prop  ignorar        do your thing      That s the way you ignore some fields

User · Answer

When I needed to do an ajax call with all the form fields  I had problems with the  input selector returning all checkboxes whether or not they were checked  I added a new selector to just get the submit-able form elements     extend   expr            submitable  function a           if   a  is   checkbox not  checked                           return false                    else if   a  is   input                          return true                    else                       return false                        usage       form id  submitable      I ve not tested it with multiple select boxes yet though but It works for getting all the form fields in the way a standard submit would   I used this when customising the product options on an OpenCart site to include checkboxes and text fields as well as the standard select box type

User · Answer

If you need to get multiple values from inputs and you re using    s to define the inputs with multiple values  you can use the following       contentform   find  input  textarea  select   each function x  field        if  field name            if  field name indexOf       gt 0                if     isArray data field name                     data field name  new Array                              data field name  push field value             else               data field name  field value

User · Answer

Associative  Not without some work  but you can use generic selectors   var items   new Array         form id input   each function  el        items el name    el

User · Answer

myForm   submit function            get all the inputs into an array      var  inputs       myForm  input            not sure if you wanted this  but I thought I d add it         get an associative array of just the values      var values            inputs each function             values this name      this  val                     Thanks to the tip from Simon Weaver  here is another way you could do it  using serializeArray   var values         each     myForm   serializeArray    function i  field        values field name    field value        Note that this snippet will fail on  lt select multiple gt  elements   It appears that the new HTML 5 form inputs don t work with serializeArray in jQuery version 1 3  This works in version 1 4

User · Answer

Here is another solution  this way you can fetch all data about the form and use it in a serverside call or something       form   on  submit   function  e         var form      this       this will resolve to the form submitted        action   form attr   action              type   form attr   method              data                Make sure you use the  name  field on the inputs you want to grab      form find    name     each  function  i   v          var input      this       resolves to current input element            name   input attr   name               value   input val          data name    value               Code which makes use of  data     e preventDefault        You can then use this with ajax calls   function sendRequest action  type  data             ajax               url  action             type  type             data  data                   done function  returnedHtml                     responseDiv    append  returnedHtml                      fail function                     responseDiv    append   This failed                    Hope this is of any use for any of you

User · Answer

The jquery form plugin may help with what others are looking for that end up on this question  I m not sure if it directly does what you want or not    There is also the serializeArray function

User · Answer

Hope this helps somebody         This html      lt form id  someCoolForm  gt      lt input type  text  class  form-control  name  username  value          gt          lt input type  text  class  form-control  name  profile first name  value          gt      lt input type  text  class  form-control  name  profile last name  value          gt          lt input type  text  class  form-control  name  emails    value         gt      lt input type  text  class  form-control  name  emails    value        gt      lt input type  text  class  form-control  name  emails    value       gt      lt  form gt         With this js         var form1   parseForm     someCoolForm        console log form1          Will output something like          username   test2     emails       0         com       1               com     profile  Object      first name             last name                    So  function below   var parseForm   function  form         var formdata   form serializeArray         var data              each formdata  function  element             var value     values element               Parsing field arrays          if  value 0  indexOf        gt  0                var key   value 0  replace                         if   data key                   data key                     data value 0  replace            push value 1              else             Parsing nested objects          if  value 0  indexOf       gt  0                 var parent   value 0  substring 0  value 0  indexOf                    var child   value 0  substring value 0  lastIndexOf        1                if   data parent                   data parent                     data parent  child    value 1             else               data value 0     value 1                          return data

User · Answer

I hope this is helpful  as well as easiest one        form   submit function  e         e preventDefault        input values      this  serializeArray

User · Answer

Had a similar issue with a slight twist and I thought I d throw this out  I have a callback function that gets the form so I had a form object already and couldn t easy variants on    form input    Instead I came up with       var dataValues           form find  input   each          function unusedIndex  child                dataValues child name    child value                Its similar but not identical situation  but I found this thread very useful and thought I d tuck this on the end and hope someone else found it useful

User · Answer

Seems strange that nobody has upvoted or proposed a concise solution to getting list data  Hardly any forms are going to be single-dimension objects    The downside of this solution is  of course  that your singleton objects are going to have to be accessed at the  0  index  But IMO that s way better than using one of the dozen-line mapping solutions   var formData       formId   serializeArray   reduce function  obj  item        if  obj item name     null            obj item name                   obj item name  push item value       return obj

User · Answer

I am using this code without each loop       subscribe-form   submit function e       var arr   this  serializeArray        var values         for i in arr  values arr i   name    arr i   value        console log values       return false

User · Answer

myForm   bind  submit   function        var elements   this elements       The elements variable will contain all the inputs  selects  textareas and fieldsets within the form

User · Answer

I had the same problem and solved it in a different way   var arr   new Array        input   each function      arr push   this  val         arr    It returns the value of all input fields  You could change the     input   to be more specific

User · Answer

Late to the party on this question  but this is even easier       myForm   submit function            Get all the forms elements and their values in one step     var values     this  serialize

User · Answer

Same solution as given by nickf  but with array input names taken into account eg    lt input type  text  name  array      gt   values           something  input   each function       if  this name search          gt  0    search for    in name         if  typeof values this name      undefined           values this name    values this name  concat    this  val           else         values this name       this  val               else       values this name      this  val

User · Answer

This piece of code will work instead of name  email enter your form fields name    document  ready function          form id   submit function event       event preventDefault        var name      input name  name    this  val        var email      input name  email    this  val

User · Answer

serialize   is the best method    Christopher Parker say that Nickf s anwser accomplishes more  however it does not take into account that the form may contain textarea and select menus   It is far better to use serialize   and then manipulate that as you need to   Data from serialize   can be used in either an Ajax post or get  so there is no issue there

User · Answer

jQuery s serializeArray does not include disabled fields  so if you need those too  try   var data          form my-form   find  input  textarea  select   each function i  field        data field name    field value

User · Answer

form-id   submit function  e       e preventDefault      inputs       input serialized      this  serializeArray      input serialized forEach field   gt        inputs field name    field value         console log inputs

User · Answer

For multiple select elements   lt select multiple  multiple  gt    I modified the solution from  Jason Norwood-Young to get it working   The answer  as posted  only takes the value from the first element that was selected  not all of them  It also didn t initialize or return data  the former throwing a JavaScript error   Here is the new version   function  get values form      let data           form  find  input  textarea  select   each function x  field        if  field name          if  field name indexOf        gt  0            if     isArray data field name                data field name    new Array                      for  let i   0  i  lt  field selectedOptions length  i                data field name  push field selectedOptions i  value                      else           data field name    field value                         return data     Usage    get values     form      Note  You just need to ensure that the name of your select has    appended to the end of it  for example    lt select name  favorite colors    multiple  multiple  gt     lt option value  red  gt Red lt  option gt     lt option value  green  gt Green lt  option gt     lt option value  blue  gt Blue lt  option gt   lt  select gt

User · Answer

Inspired by answers of Lance Rushing and Simon Weaver  this is my favourite solution       myForm   submit  function  event         var values     this  serializeArray           In my case  I need to fetch these data before custom actions     event preventDefault          The output is an array of objects  e g     name   start-time   value   11 01     name   end-time   value   11 11      With the code below   var inputs         each values  function k  v       inputs v name   v value        its final output would be    start-time   11 01    end-time   11 01

[javascript] Obtain form input fields using jQuery?

Examples related to javascript

Examples related to jquery