Hot to get all form elements values using jQuery

Question

Here is the HTML code   lt  DOCTYPE html gt  lt html xmlns  http   www w3 org 1999 xhtml   gt   lt head gt       lt title gt HTML Form Builder lt  title gt       lt link href  css font1 css  rel  stylesheet  type  text css  gt       lt link href  css font2 css  rel  stylesheet  type  text css  gt       lt link rel  stylesheet  href  css style min css  type  text css  media  all    gt       lt link rel  stylesheet  href  css form min css  type  text css  media  all    gt       lt link rel  stylesheet  href  css style1 css  type  text css  media  all  id  css-theme   gt       lt link type  text css  href  css redmond jquery-ui-1 8 23 custom css  rel  stylesheet    gt       lt link rel  stylesheet  href  css tipsy css  type  text css  media  all    gt       lt script type  text javascript  src  js jquery-1 8 0 min js  gt  lt  script gt       lt script type  text javascript  src  js jquery-ui-1 8 23 custom min js  gt  lt  script gt       lt script type  text javascript  src  js jquery metadata js  gt  lt  script gt       lt script type  text javascript  src  js jquery validate js  gt  lt  script gt       lt script type  text javascript  src  js jquery tipsy js  gt  lt  script gt       lt script type  text javascript  src  js jquery json-2 3 min js  gt  lt  script gt        lt script type  text javascript  src  js main min js  gt  lt  script gt       lt script type  text javascript  gt        function            changeInnerHTML  doctor id            changeInnerHTML  hospital id            changeInnerHTML  clinic id            changeInnerHTML  stockist id            changeInnerHTML  chemist id            changeInnerHTML  bloodbank id            changeInnerHTML  dialysis id                         function changeInnerHTML id                if     dialog box   id  length                        var tmp id split                      get  getDataValues php ref   tmp 0  function data status                       dialog box   id  html data                                        lt  script gt       lt  head gt       lt body gt       lt div id  container  gt                 lt h1 id  quot form-name quot  style  quot background-color  rgb 255  255  255   box-shadow  none  border  none  margin  8px 15px  quot  gt New Form lt  h1 gt           lt form method  quot POST quot  id  quot preview form quot  novalidate  quot novalidate quot  gt                                     lt div class  quot row quot  style  quot display  block  quot  gt  lt label class  quot field quot  for  quot textarea 1 quot  gt textarea 1 lt  label gt  lt span class  quot textArea quot  data  quot  quot  gt  lt textarea id  quot dialog box textarea 1 quot  name  quot textarea 1 quot  data  quot   amp quot validate amp quot    amp quot required amp quot  false  amp quot messages amp quot       quot  gt  lt  textarea gt  lt  span gt  lt  div gt  lt div class  quot row quot  style  quot display  block  quot  gt  lt label class  quot field quot  for  quot radiobutton 1 quot  gt radiobutton 1 lt  label gt  lt span class  quot radioButton quot  data  quot  quot  id  quot radiobutton 1 quot  gt  lt label class  quot option quot  for  quot radiobutton 1 option 1 quot  gt  lt input class  quot radio quot  id  quot dialog box radiobutton 1 option 1 quot  type  quot radio quot  name  quot radiobutton 1 quot  value  quot Option 1 quot  data  quot   amp quot validate amp quot    amp quot required amp quot  false  amp quot messages amp quot       quot  gt Option 1 lt  label gt  lt label class  quot option quot  for  quot radiobutton 1 option 2 quot  gt  lt input class  quot radio quot  id  quot radiobutton 1 option 2 quot  type  quot radio quot  name  quot radiobutton 1 quot  value  quot Option 2 quot  gt Option 2 lt  label gt  lt label class  quot option quot  for  quot radiobutton 1 option 3 quot  gt  lt input class  quot radio quot  id  quot radiobutton 1 option 3 quot  type  quot radio quot  name  quot radiobutton 1 quot  value  quot Option 3 quot  gt Option 3 lt  label gt  lt  span gt  lt  div gt  lt div class  quot row quot  style  quot display  block  quot  gt  lt label class  quot field quot  for  quot checkboxgroup 1 quot  gt checkboxgroup 1 lt  label gt  lt span class  quot checkBoxGroup quot  data  quot  quot  id  quot checkboxgroup 1 quot  gt  lt label class  quot option quot  for  quot checkboxgroup 1 option 1 quot  gt  lt input type  quot checkbox quot  class  quot checkbox quot  name  quot checkboxgroup 1   quot  id  quot dialog box checkboxgroup 1 option 1 quot  value  quot Option 1 quot  data  quot   amp quot validate amp quot    amp quot required amp quot  false  amp quot messages amp quot       quot  gt Option 1 lt  label gt  lt label class  quot option quot  for  quot checkboxgroup 1 option 2 quot  gt  lt input type  quot checkbox quot  class  quot checkbox quot  name  quot checkboxgroup 1   quot  id  quot checkboxgroup 1 option 2 quot  value  quot Option 2 quot  gt Option 2 lt  label gt  lt label class  quot option quot  for  quot checkboxgroup 1 option 3 quot  gt  lt input type  quot checkbox quot  class  quot checkbox quot  name  quot checkboxgroup 1   quot  id  quot checkboxgroup 1 option 3 quot  value  quot Option 3 quot  gt Option 3 lt  label gt  lt  span gt  lt  div gt  lt div class  quot row quot  style  quot display  block  quot  gt  lt label class  quot field quot  for  quot dropdown 1 quot  gt dropdown 1 lt  label gt  lt span class  quot dropDown quot  data  quot  quot  gt  lt select id  quot dialog box dropdown 1 quot  name  quot dropdown 1 quot  data  quot   amp quot validate amp quot    amp quot required amp quot  false  amp quot messages amp quot       quot  gt  lt option value  quot Option 1 quot  gt Option 1 lt  option gt  lt option value  quot Option 2 quot  gt Option 2 lt  option gt  lt option value  quot Option 3 quot  gt Option 3 lt  option gt  lt  select gt  lt  span gt  lt  div gt  lt input type  quot button quot  class  quot button blue quot  value  quot Submit quot  id  quot submit-form quot  gt  lt input type  hidden  id  tname  name  tname  value  surveyForm 2    gt  lt  form gt  lt  div gt   lt  --container-- gt    lt script type  text javascript  src  js form min js  gt  lt  script gt   lt  body gt   lt  html gt   Here the code which will get all form field values      quot  hidAll quot   append    quot  preview form  input quot   map function           if    this  val       Submit              if    this  is  select                   var aa     this  children  option   map function                       return   this  val                    get   join  quot   quot                 return   this  attr  name           aa             else if    this  is  input checkbox                   return   this  attr  name   substring 0    this  attr  name   length - 2            this  val               else                return   this  attr  name             this  val                          get   join  quot   quot      alert    quot  hidAll quot   html      From this I am getting the output value as follows  textfield 1 dgdfg  checkboxgroup 1 Option 1  checkboxgroup 1 Option 2  checkboxgroup 1 Option 3  radiobutton 1 Option 1  radiobutton 1 Option 2  radiobutton 1 Option 3  dropdown 1 Option 1 Option 2 Option 3  I want the out as following  textfield 1 dgdfg  checkboxgroup 1 Option 1 Option 2 Option 3  radiobutton 1 Option 1 Option 2 Option 3  dropdown 1 Option 1 Option 2 Option 3

User · Answer

Add this on to the end of it   var array       hidAll   html     x   array split       key s     for  i 0  i lt x length  i        oldkey   key    key   x i  split      0     if  oldkey  key  s         else s     n  key        s  x i  split      1     s   s substring 1       hidAll   html a

User · Answer

If you want to use   formName  serializeArray   or   formName  serialize    you must add name  inputName  on your input element  or will not work

User · Answer

I needed to get the form data as some sort of object  I used this       preview form   serializeArray   reduce  function acc  val      acc val name replace           replace             val value    return acc

User · Answer

The answer already been accepted  I just write a short technique for the same purpose   var fieldPair           input   each function    fieldPair      this  attr  name             this  val               console log fieldPair

User · Answer

I know you re using jQuery but for those who want a pure Javascript solution      Serialize form fields as URI argument HTTP POST data function serializeForm form        var kvpairs           for   var i   0  i  lt  form elements length  i               var e   form elements i           if  e name     e value  continue     Shortcut  may not be suitable for values   0  considered as false          switch  e type                case  text               case  textarea               case  password               case  hidden                   kvpairs push encodeURIComponent e name          encodeURIComponent e value                    break              case  radio               case  checkbox                   if  e checked  kvpairs push encodeURIComponent e name          encodeURIComponent e value                    break                  To be implemented if needed              case  select-one                       document forms x  elements y  options 0  selected                     break              case  select-multiple                   for  z   0  z  lt  document forms x  elements y  options length  z                              document forms x  elements y  options z  selected                                          break                      return kvpairs join   amp

User · Answer

if you want get all values from form in simple array you may be do something like this   function getValues form        var listvalues   new Array        var datastring           form  serializeArray        var data            for  var x   0  x  lt  datastring length  x              if  data                       data           datastring x  name              datastring x  value                           else               data            datastring x  name              datastring x  value                             data             data   JSON parse data       listvalues push data       return listvalues

User · Answer

Try this for getting form input text value to JavaScript object     var fieldPair           form  input   each function         if   this  attr  name   length  gt  0            fieldPair   this  attr  name        this  val               console log fieldPair

User · Answer

You can use a serialize   function of JQuery       var datastring       preview form   serialize              ajax               type   POST               url   your url php               data  datastring              success  function data                     alert  Data send                                And read in PHP   echo   POST  datastring    dialog box textarea 1    echo   POST  datastring    radiobutton 1               And get    data-     to tag HTML5 you can see this example    lt div id  texto  data-author  Ricardo Miranda  data-date  2012-06-21  gt   lt h4 gt Lorem ipsum lt  h4 gt     lt p gt      Lorem ipsum dolor sit amet  ius integre eligendi et      sea ut expetendis conclusionemque      mel at ornatus invenire  His ad moderatius definiebas omittantur      liber saepe albucius sea cu      Audire tamquam dolores vis ne  mediocrem consulatu eum ex      Duo te agam saepe convenire  et fugit iisque his    lt  p gt       lt script type  text javascript  gt    function         alert  The text is write         texto   data  author             And   lt div id  texto  data-author    nombre   Ricardo   apellido   Miranda    data-date  2012-06-21  gt          lt  div gt    lt script type  text javascript  gt    function         alert  The text is write         texto   data  author   apellido                     texto   data  author   nombre        lt  script gt

User · Answer

jQuery has very helpful function called serialize   Demo  http   jsfiddle net 55xnJ 2     Just type      preview form   serialize       to get result  single Single amp multiple Multiple amp multiple Multiple3 amp check check2 amp radio radio1

[javascript] Hot to get all form elements values using jQuery?

Examples related to javascript

Examples related to html

Examples related to jquery