Serialize form data to JSON [duplicate]

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:

1. var input = $("#inputId").val();
2. var input = $("form.login").serialize();
3. 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 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

<form class="login">     <label for="_user_name">username:</label>     <input type="text" id="_user_name" name="user[name]" value="dev.pus" />     <label for="_user_pass">password:</label>     <input type="password" id="_user_pass" name="user[pass]" value="1234" />     <button type="submit">login</button> </form> 

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(); 

Answer 1

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); 

Answer 2

You can do this:

function onSubmit( form ){    var data = JSON.stringify( $(form).serializeArray() ); //  <-----------      console.log( data );    return false; //don't submit  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    <form onsubmit='return onSubmit(this)'>    <input name='user' placeholder='user'><br>    <input name='password' type='password' placeholder='password'><br>    <button type='submit'>Try</button>  </form>

see this: http://www.json.org/js.html