jQuery AJAX la méthode serializeArray() Coder un ensemble d'éléments de formulaire comme un tableau de noms et de valeurs.

Définition et Usage la méthode serializeArray()

jQuery cours tutorial

La méthode serializeArray() crée un tableau d'objets (nom et valeur) en sérialisant les valeurs d'un formulaire.

Vous pouvez sélectionner un ou plusieurs éléments de formulaire, ou l'élément  formulaire lui-même.
Syntaxe

$(selector).serializeArray()

Exemple Obtenir les valeurs d'un formulaire, effectuer une itération à travers eux et ajouter à un affichage des résultats.

Sélectionner le code

<!DOCTYPE html>
<html>
<head>
   <title>jQuery methode serializeArray </title>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
<style>
body, select { font-size:14px; }
form { margin:5px; }
p { color:#f00; margin:5px; }
b { color:#00f; }
</style>
</head>
<body>
<p><b>Resultat:</b> <span id="resultat"></span></p>
<form>
   <select name="Simple">
     <option>Simple</option>
     <option>Simple2</option>
   </select>
   <select name="multiple" multiple="multiple">
     <option selected="selected">Multiple</option>
     <option>Multiple2</option>
     <option selected="selected">Multiple3</option>
   </select><br/>
   <input type="checkbox" name="check" value="coché1" id="ch1"/>
   <label for="ch1">coché1</label>
   <input type="checkbox" name="check" value="coché2" checked="checked" id="ch2"/>
   <label for="ch2">coché2</label>
   <input type="radio" name="radio" value="option1" checked="checked" id="r1"/>
   <label for="r1">option1</label>
   <input type="radio" name="radio" value="option2" id="r2"/>
   <label for="r2">option2</label>
</form>
<script>
   function showValues() {
     var fields = $(":input").serializeArray();
     $("#resultat").empty();
     jQuery.each(fields, function(i, field){
       $("#resultat").append(field.value + " ");
     });
   }
   $(":checkbox, :radio").click(showValues);
   $("select").change(showValues);
   showValues();
</script>
</body>
</html>
 

Exemple Sortie le résultat de valeurs formulaire sérialisé en tant que tableaux :

Sélectionner le code

<!DOCTYPE   html>
<html>
<head>
   <title>jQuery demo ajax </title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  </script>
<script>
$(document).ready(function(){
 $("button").click(function(){
   x=$("form").serializeArray();
   $.each(x, function(i,
  field){
     $("#results").append(field.name + ":" + field.value
  + " ");
   });
 });
});
</script>
</head>
<body>
<form
  action="">
Nom: <input
  type="text" name="Nom" value="Mickey" /><br />
Prénom:
  <input type="text" name="Prenom"
  value="Mouse" /><br />
</form>
<button>Execute</button>
<div
  id="results"></div>
</body>
</html>
 



Par gerywa 25 juillet 2014