jQuery to serialize only elements within a div

Question

I would like to get the same effect as jQuery.serialize() but I would like to return only the child elments of a given div.

Sample

Answer 1

No problem. Just use the following. This will behave exactly like serializing a form but using a div's content instead.

$('#divId :input').serialize();

Check https://jsbin.com/xabureladi/1 for a demonstration (https://jsbin.com/xabureladi/1/edit for the code)

Answer 2

Try also this:

$('#divId').find('input').serialize()

Answer 3

You can improve the speed of your code if you restrict the items jQuery will look at.

Use the selector :input instead of * to achieve it.

$('#divId :input').serialize()

This will make your code faster because the list of items is shorter.

Answer 4

The function I use currently:

/**
 * Serializes form or any other element with jQuery.serialize
 * @param el
 */
serialize: function(el) {
    var serialized = $(el).serialize();
    if (!serialized) // not a form
        serialized = $(el).
          find('input[name],select[name],textarea[name]').serialize();
    return serialized;
}

Answer 5

$('#divId > input, #divId > select, #divId > textarea').serialize();

Answer 6

serialize all the form-elements within a div.

You could do that by targeting the div #target-div-id inside your form using :

$('#target-div-id').find('select, textarea, input').serialize();