.serializeArray()

.serializeArray() Dönen Değer : String
Açıklama : Form elemanlarından oluşan bir seti isim ve değerlerden oluşan bir array'e dönüştürür.

.serializeArray()
Bu metod bir parametre almaz.

.serializeArray() metodu nesnelerden oluşan ve bir JSON string olarak işlenebilecek bir JavaScript array üretir. JQuery formları ve form kontrollerinden oluşan bir jQuery kolleksiyonunda çalıştırılır. Kontroller farklı farklı türlerde olabilir.

<form>
  <div><input type="text" name="a" value="1" id="a"></div>
  <div><input type="text" name="b" value="2" id="b"></div>
  <div><input type="hidden" name="c" value="3" id="c"></div>
  <div>
    <textarea name="d" rows="8" cols="40">4</textarea>
  </div>
  <div><select name="e">
    <option value="5" selected="selected">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
  </select></div>
  <div>
    <input type="checkbox" name="f" value="8" id="f">
  </div>
  <div>
    <input type="submit" name="g" value="Submit" id="g">
  </div>
</form>

.serializeArray() metodu içinde olabilecek kontroller için standart W3C geçerli form kontrolleri kuralı geçerlidir, özellikle eleman disable edilemez ve name bağlı özelliğine sahip olmalıdır. Submit butonu dönüştürülmez. Dosya seçim elemanlarının verisi de çıktıya alınmaz. value özelliğine sahip olmayan elemanlar boş string değeriyle ifade edilir.

Bu metod ayrı ayrı form elemanlarının <input>, <textarea> ve <select> gibi tek tek seçilmesiyle çalışabildiği gibi komple <form> elemanını seçerek de kullanılabilir.

$( "form" ).on( "submit", function( event ) {
  console.log( $( this ).serializeArray() );
  event.preventDefault();
} );

Bu kod tarayıcı konsolunda şu çıktıyı yazar.

[
  {
    name: "a",
    value: "1"
  },
  {
    name: "b",
    value: "2"
  },
  {
    name: "c",
    value: "3"
  },
  {
    name: "d",
    value: "4"
  },
  {
    name: "e",
    value: "5"
  }
]


Örnekler:

Bir formdan değerleri okur , üzerinde iterasyon yapar ve çıktı olarak yazar.

<style>
   body, select {
      font-size: 14px;
   }
   form {
      margin: 5px;
   }
   p {
      color: red;
      margin: 5px;
   }
   b {
      color: blue;
   }
</style>
<p><b>Sonuçlar:</b> <span id="results"></span></p>
<form>
   <select name="single">
      <option>Single</option>
      <option>Single2</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="check1" id="ch1">
   <label for="ch1">check1</label>
   <input type="checkbox" name="check" value="check2" checked="checked" id="ch2">
   <label for="ch2">check2</label>
   <input type="radio" name="radio" value="radio1" checked="checked" id="r1">
   <label for="r1">radio1</label>
   <input type="radio" name="radio" value="radio2" id="r2">
   <label for="r2">radio2</label>
</form>
<script>
   function showValues() {
      var fields = $( ":input" ).serializeArray();
      $( "#results" ).empty();
      jQuery.each( fields, function( i, field ) {
         $( "#results" ).append( field.value + " " );
      } );
   }
   
   $( ":checkbox, :radio" ).on( "click", showValues );
   $( "select" ).on( "change", showValues );
   showValues();
</script>

Sonuçlar:


.

.