Serialize form data to JSON

Question

I want to do some pre-server-validation of a form in a Backbone js  model  To do this I need to get the user input from a form into usable data  I found three methods to do this    var input       inputId   val    var input      form login   serialize    var input      form login   serializeArray      Unfortunately  none of the provide a good reabable and developable JSON object which I require  I already looked through several questions on Stack nbsp Overflow  but I found only some extra libraries    Doesn t Underscore js  the current jQuery or Backbone js provide a helper method   I can t imagine there is no request for such a function   HTML   lt form class  login  gt       lt label for   user name  gt username  lt  label gt       lt input type  text  id   user name  name  user name   value  dev pus    gt       lt label for   user pass  gt password  lt  label gt       lt input type  password  id   user pass  name  user pass   value  1234    gt       lt button type  submit  gt login lt  button gt   lt  form gt    JavaScript  var formData      form login   serializeObject    console log formData     Outputs         name    dev pus        pass    1234      Backbone js model  var user   new User formData   user save

User · Answer

Well  here s a handy plugin for it  https   github com macek jquery-serialize-object The issue for it is   Moving ahead  on top of core serialization   serializeObject will support correct serializaton for boolean and number values  resulting valid types for both cases  Look forward to these in  gt   2 1 0

User · Answer

I couldn t find an answer that would solve this     name  Vehicle Make   value   Honda     name  Vehicle VIN   value   123      This calls for this object    Vehicle   Make   Honda    VIN    123      So I had to write a serializer of my own that would solve this   function formArray           var obj                 each formArray  function i  pair               var cObj   obj  pObj  cpName                each pair name split       function i  pName                   pObj   cObj                  cpName   pName                  cObj   cObj pName    cObj pName     cObj pName                                     pObj cpName    pair value                      return obj          Maybe it will help somebody

User · Answer

Trying to solve the same problem  validation without getting into complex plugins and libraries   I created jQuery serializeJSON  that improves serializeArray to support any kind of nested objects   This plugin got very popular  but in another project I was using Backbone js  where I would like to write the validation logic in the Backbone js models  Then I created Backbone Formwell  which allows you to show the errors returned by the validation method directly in the form

User · Answer

Use   var config       jQuery form  serializeArray   map function item        if   config item name              if   typeof config item name        string                  config item name     config item name                      config item name  push item value         else           config item name    item value

User · Answer

You can do this       x000D   x000D  function onSubmit  form    x000D    var data   JSON stringify    form  serializeArray           lt ----------- x000D   x000D    console log  data    x000D    return false    don t submit x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   lt form onsubmit  return onSubmit this   gt  x000D     lt input name  user  placeholder  user  gt  lt br gt  x000D     lt input name  password  type  password  placeholder  password  gt  lt br gt  x000D     lt button type  submit  gt Try lt  button gt  x000D   lt  form gt  x000D   x000D   x000D    see this  http   www json org js html

User · Answer

Here is what I use for this situation as a module  in my formhelper js     define function        FormHelper            FormHelper parseForm   function  form           var serialized    form serializeArray            var s               var data               for s in serialized               data serialized s   name      serialized s   value                     return JSON stringify data              return FormHelper        It kind of sucks that I can t seem to find another way to do what I want to do    This does return this JSON for me      first name   John   last name   Smith   age   30

User · Answer

Using Underscore js   function serializeForm  form       return   object   map  form serializeArray    function item  return  item name  item value

User · Answer

If you do not care about repetitive form elements with the same name  then you can do   var data      form login   serializeArray    var formData     object   pluck data   name      pluck data   value       I am using Underscore js here

User · Answer

I know this doesn t meet the helper function requirement  but the way I ve done this is using jQuery s   each   method  var loginForm       login   serializeArray    var loginFormObject         each loginForm      function i  v            loginFormObject v name    v value            Then I can pass loginFormObject to my backend  or you could create a userobject and save   it in backbone as well

User · Answer

Here s a function for this use case   function getFormData  form       var unindexed array    form serializeArray        var indexed array              map unindexed array  function n  i           indexed array n  name      n  value                 return indexed array      Usage   var  form       form data    var data   getFormData  form

User · Answer

Using jQuery and avoiding serializeArray  the following code serializes and sends the form data in JSON format       commentsForm   submit function event       var formJqObj       commentsForm        var formDataObj            function            formJqObj find   input   not   type  submit     not   type  reset     each function                var thisInput     this               formDataObj thisInput attr  name      thisInput val                                ajax           type   POST           url  YOUR URL HERE          data  JSON stringify formDataObj           contentType   application json              done function data  textStatus  jqXHR           console log  Ajax completed      data               fail function jqXHR  textStatus  errorThrown           console log  Ajax problem      textStatus          errorThrown               event preventDefault

User · Answer

The below code should help you out        The function is based on http   css-tricks com snippets jquery serialize-form-to-json    lt script src  quot   code jquery com jquery-2 1 0 min js quot  gt  lt  script gt    lt script gt        fn serializeObject   function             var o               var a   this serializeArray              each a  function                 if  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                function                form login   on  submit   function e              e preventDefault               var formData     this  serializeObject              console log formData                 datahere   html formData                        lt  script gt

User · Answer

My contribution   function serializeToJson serializer       var  string            for var ix in serializer                var row   serializer ix            string          row name           row value                   var end   string length - 1       string    string substr 0  end        string             console log   string      string       return JSON parse  string      var params       frmPreguntas input   serializeArray    params   serializeToJson params

User · Answer

If you are sending the form with JSON you must remove    in the sending 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

Found one possible helper   https   github com theironcook Backbone ModelBinder  and for people who don t want to get in contact with forms at all  https   github com powmedia backbone-forms  I will take a closer look at the first link and than give some feedback

[jquery] Serialize form data to JSON

Examples related to jquery

Examples related to backbone.js

Examples related to underscore.js