Using serializeArray for non-form objects?

Question

I'm trying to post some data built from some non-form elements but I can't seem to crack it.

How can I create an array in the same format as serializeArray() does with form fields?

I've tried several variations on this but it only picks up the last .active tag.

$('li.tag.active').each(function() {
    values = {};
    values['tagID'] = $(this).attr('id');
});

$.post("/scripts/php/process.php",{     
    'data': data,
    funcName : 'tagResults'
},function(results){
    $("#results").html(results);
})

score 6 · Accepted Answer · answered Sep 20 '10 at 16:19

ok - found this in the end which works exactly as if it was input fields with serializeArray()...

function getTags(){

        var data = new Array();

        $('li.tag.active').each(function() {
                data.push({ 'name':$(this).attr("name"), 'value':$(this).attr("id")});
         });

         $.post("/scripts/php/process.php",{ 
             'data': data,
             funcName : 'tagResults'
        }) 

}

Dutchie432 · Answer 2 · 2010-09-20T15:46:33.720

2

Adding this function to your JS code allows you to serialize any object with "name" and "value" attributes.. I usually use it to serialize forms. I know you said these controls are formless, but I would imagine, this could be used to serialize any object with a name/value attribute. It also looks easy enough to change it to look for other attributes of an object, like ID. It's hard to tell exactly what you're doing there as you do not show the definition of "data" or the usage of "values"

    $.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;
    };

Then just add it to your url string

var dataToPassToAjax = 'allData=' + myObject.serializeObject();

If you are only passing ONE value, you don't need to serialize.

$.post("/scripts/php/process.php",{ 'data': 'data=' + $('li.tag.active').id, funcName : 'tagResults' }).

then in process.php, just get the value of $_REQUEST['data'] and it will have your ID

edited Sep 20 '10 at 15:46

answered Sep 20 '10 at 15:32

Dutchie432

28,798
20
92
109

That's nice. I gotta try that myself :) – T.P. Sep 20 '10 at 15:39
thanks dutchie - tried this but don't seem to get anything back but maybe i've used it wrong? is – v3nt Sep 20 '10 at 15:39
$.post("/scripts/php/process.php",{ 'data': $('li.tag.active').serializeObject(), funcName : 'tagResults' }) the correct way? – v3nt Sep 20 '10 at 15:39
if you're just passing one object, you don't need to serialize. $.post("/scripts/php/process.php",{ 'data': 'data=' + $('li.tag.active').id, funcName : 'tagResults' }). then in process.php, just get the value of $_REQUEST['data'] and it will have your ID – Dutchie432 Sep 20 '10 at 15:43
i'm trying to serialize all the li.tag.active objects so it is more than one object i want to serialize. Basically i normally use; var data = $("input.toPost").serializeArray(); which works fine with any input with .toPost class. i'm presuming that $('li.tag.active').serializeObject() would work the same way but it doesn't seem to? the li elements are
TAG TITLE
TAG TITLE 2
TAG TITLE 3

v3nt

Sep 20 '10 at 16:05

You'll want to change serializeObject to look for ID instead of name. – Dutchie432 Sep 20 '10 at 18:55

score 1 · Answer 3 · edited May 23 '17 at 10:28

1

Best answer I've seen from Ob. and Guntram: jQuery serialize / serializeArray from an element that is not a form

$('div :input').serializeArray()

In addition to inputs, this picks up select and textarea. Sweet.

edited May 23 '17 at 10:28

Community

1
1

answered Sep 03 '14 at 18:58

gordon

1,152
1
12
18

pepkin88 · Answer 4 · 2014-07-19T11:38:39.323

0

With this function you can make any set of elements serializable:

function makeSerializable(elem) {
  return $(elem).prop('elements', $('*', elem).andSelf().get());
}

Then you can use it like this:

var arr = makeSerializable('li.tag.active').serializeArray();

or

var $elem = $('li.tag.active');
var data = makeSerializable($elem).serialize();

edited Jul 19 '14 at 11:38

answered Jul 19 '14 at 11:14

pepkin88

2,742
20
19

Using serializeArray for non-form objects?

4 Answers4