[jquery] jQuery to serialize only elements within a div

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 result :

single=Single2&multiple=Multiple&radio=radio1

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

What about my solution:

function serializeDiv( $div, serialize_method )
{
    // Accepts 'serialize', 'serializeArray'; Implicit 'serialize'
    serialize_method = serialize_method || 'serialize';

    // Unique selector for wrapper forms
    var inner_wrapper_class = 'any_unique_class_for_wrapped_content';

    // Wrap content with a form
    $div.wrapInner( "<form class='"+inner_wrapper_class+"'></form>" );

    // Serialize inputs
    var result = $('.'+inner_wrapper_class, $div)[serialize_method]();

    // Eliminate newly created form
    $('.script_wrap_inner_div_form', $div).contents().unwrap();

    // Return result
    return result;
}

/* USE: */

// For: $('#div').serialize()
serializeDiv($('#div')); /* or */ serializeDiv($('#div'), 'serialize');

// For: $('#div').serializeArray()
serializeDiv($('#div'), 'serializeArray');

function serializeDiv( $div, serialize_method )_x000D_
{_x000D_
 // Accepts 'serialize', 'serializeArray'; Implicit 'serialize'_x000D_
 serialize_method = serialize_method || 'serialize';_x000D_
_x000D_
 // Unique selector for wrapper forms_x000D_
 var inner_wrapper_class = 'any_unique_class_for_wrapped_content';_x000D_
_x000D_
 // Wrap content with a form_x000D_
 $div.wrapInner( "<form class='"+inner_wrapper_class+"'></form>" );_x000D_
_x000D_
 // Serialize inputs_x000D_
 var result = $('.'+inner_wrapper_class, $div)[serialize_method]();_x000D_
_x000D_
 // Eliminate newly created form_x000D_
 $('.script_wrap_inner_div_form', $div).contents().unwrap();_x000D_
_x000D_
 // Return result_x000D_
 return result;_x000D_
}_x000D_
_x000D_
/* USE: */_x000D_
_x000D_
var r = serializeDiv($('#div')); /* or serializeDiv($('#div'), 'serialize'); */_x000D_
console.log("For: $('#div').serialize()");_x000D_
console.log(r);_x000D_
_x000D_
var r = serializeDiv($('#div'), 'serializeArray');_x000D_
console.log("For: $('#div').serializeArray()");_x000D_
console.log(r);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<div id="div">_x000D_
  <input name="input1" value="input1_value">_x000D_
  <textarea name="textarea1">textarea_value</textarea>_x000D_
</div>

Try also this:

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

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.

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

If those elements have a common class name, one may also use this:

$('#your_div .your_classname').serialize()

This way you can avoid selection of buttons, which will be selected using the jQuery selector :input. Though this can also be avoided by using $('#your_div :input:not(:button)').serialize();

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