web-dev-qa-db-fra.com

jQuery pour ne sérialiser que les éléments d'une div

Je voudrais obtenir le même effet que jQuery.serialize() mais je voudrais renvoyer uniquement les éléments enfants d’un div donné.

Exemple de résultat: 

single=Single2&multiple=Multiple&radio=radio1
jqueryserialization
105
BrokeMyLegBiking

Aucun problème. Il suffit d'utiliser le suivant. Cela se comportera exactement comme si vous sérialisiez un formulaire mais que vous utilisiez plutôt le contenu d'un div.

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

Vérifiez http://jsbin.com/azodo pour une démonstration ( http://jsbin.com/azodo/edit pour le code)

259
jitter

Vous pouvez améliorer la vitesse de votre code si vous limitez les éléments que jQuery examinera.

Utilisez le sélecteur: entrée au lieu de * pour y parvenir.

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

Cela accélérera votre code car la liste des éléments est plus courte.

21
ThiagoPXP

serialize tous les éléments de formulaire contenus dans une div.

Vous pouvez le faire en ciblant le div #target-div-id dans votre form en utilisant:

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

J'espère que cela t'aides.

11
Zakaria Acharki

La fonction que j'utilise actuellement:

/**
 * 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;
}
4
Łukasz Frankowski

Essayez aussi ceci:

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

3
Alberto Buschettu

Qu'en est-il de ma 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 )
{
	// 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: */

var r = serializeDiv($('#div')); /* or serializeDiv($('#div'), 'serialize'); */
console.log("For: $('#div').serialize()");
console.log(r);

var r = serializeDiv($('#div'), 'serializeArray');
console.log("For: $('#div').serializeArray()");
console.log(r);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div">
  <input name="input1" value="input1_value">
  <textarea name="textarea1">textarea_value</textarea>
</div>

2
Briganti

Si ces éléments ont un nom de classe commun, on peut aussi utiliser ceci:

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

Vous éviterez ainsi la sélection de boutons, qui seront sélectionnés à l’aide du sélecteur jQuery :input. Bien que cela puisse aussi être évité en utilisant $('#your_div :input:not(:button)').serialize();

0
Yogesh Mistry
$('#divId > input, #divId > select, #divId > textarea').serialize();
0
jefissu