ansaurus

Question

How to convert Jquery.serialize() data to JSON object?

Answer 1

+1 A:

SLaks 2010-07-18 23:36:12

Answer 2

A:

Include jQuery and the Form Plugin external script files and a short script to initialize the form when the DOM is ready:
<html> 
<head> 
    <script type="text/javascript" src="jquery-1.3.2.js"></script> 
    <script type="text/javascript" src="jquery.form.js"></script> 

    <script type="text/javascript"> 
        // wait for the DOM to be loaded 
        $(document).ready(function() { 
            // bind 'myForm' and provide a simple callback function 
            $('#myForm').ajaxForm(function() { 
                alert("Thank you for your comment!"); 
            }); 
        }); 
    </script> 
</head>

mano 2010-07-18 23:38:32

@mano, I don't think you have understood my question and your answer is not relevant to my question

Raf 2010-07-18 23:50:22

Answer 3

+1 A:

I have recently had this exact problem. Initially, we were using jQuery's serializeArray() method, but that does not include form elements that are disabled. We will often disable form elements that are "sync'd" to other sources on the page, but we still need to include the data in our serialized object. So serializeArray() is out. We used the :input selector to get all input elements (both enabled and disabled) in a given container, and then $.map() to create our object.

var inputs = $("#container :input");
var obj = $.map(inputs, function(n, i)
{
    var o = {};
    o[n.name] = $(n).val();
    return o;
});
console.log(obj);

Note that for this to work, each of your inputs will need a name attribute, which will be the name of the property of the resulting object.

That is actually slightly modified from what we used. We needed to create an object that was structured as a .NET IDictionary, so we used this: (I provide it here in case it's useful)

var obj = $.map(inputs, function(n, i)
{
    return { Key: n.name, Value: $(n).val() };
});
console.log(obj);

I like both of these solutions, because they are simple uses of the $.map() function, and you have complete control over your selector (so, which elements you end up including in your resulting object). Also, no extra plugin required. Plain old jQuery.

Samuel Meacham 2010-07-18 23:51:18

tried but didn't seem to work.

Raf 2010-07-19 00:24:42

I just noticed you're using ‘friendname[]‘ as the name of your input elements, to capture an array of values as opposed to a single value. I don't think ‘$.map()‘ would work well for that.

Samuel Meacham 2010-07-19 02:37:49

ansaurus

tags:

views:

answers:

How to convert Jquery.serialize() data to JSON object?

related questions