oujood.com

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

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

chercher |

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.

Exemple :       Copier 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 :

Exemple :       Copier 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

Voir aussi nos tutoriel :

fonction print, print

Affiche une chaîne de caractères

fonction substr_compare, substr_compare

Compare deux chaînes depuis un offset jusqu' une longueur en caractères

Application en Cache

Application en Cache Applications Web hors connexion