Beberapa server web membatasi jumlah request sehingga form dengan jumlah input yang banyak tidak dapat dikirim meskipun ukuran data secara keseluruhan sangat kecil. Hal ini menimbulkan sebuah permasalahan bagi sebuah program. Salah satu cara untuk mengatasinya adalah dengan serialize form.

Serialize form adalah salah satu method pada jQuery untuk mendapatkan nilai semua input dari sebuah form. Nama berserta nilai input dari form tersebut dimasukkan ke dalam sebuah string yang dikodekan menurut standard URL. Fungsi ini sangat berguna terutama pada form dengan jumlah input yang sangat banyak. Nilai output dari fungsi ini dapat digunakan pada AJAX dan pengiriman form secara klasik.

Pada Pengiriman Form dengan AJAX

Sebagai contoh adalah sebuah form dengan jumlah input hingga ratusan. Fungsi serialize akan mempaketkan semua input beserta nilainya ke dalam sebuah string. String tersebut kemudian dikirim dengan method POST maupun GET.

<script language="javascript">
function submitFormAJAX(frm){
var data = $(frm).serialize();
$.post('simpan-data.php', {'simpan':'simpan', 'data':data}, function(answer){
alert('Data telah berhasil disimpan');
});
return false;
}
</script>

<form name="data-siswa" id="data-siswa" action="" method="post"
enctype="multipart/form-data" onsubmit="return submitFormAJAX(this)">
<!-- di sini input form -->
</form>

Tanpa menggunakan serialize form, jumlah data yang akan dikirim melalui AJAX menjadi sangat banyak. Selain itu, penambahan  input pada form juga membutuhkan perubahan pada fungsi pengiriman form. Dengan menggunakan serialize form, fungsi untuk mengirim form menjadi lebih ramping dan dapat dibuat statis.

Pada Pengiriman Form Klasik

Sebuah server web mungkin membatasi jumlah request yang diperbolehkan. Sebuah form dengan jumlah input yang banyak mungkin tidak dapat dikirim meskipun besar data yang dikirimkan masih di bawah toleransi. Serialize form merupakan solusi yang tepat untuk permasalahan ini.

Meskipun form tersebut tidak akan dikirim dengan menggunakan AJAX, serialize dapat digunakan untuk menggabungkan input yang banyak menjadi sebuah string. String tersebut kemudian dikirim oleh sebuah form lain. 

<script language="javascript">
function submitForm(frm){
var dt = $(frm).serialize()+'&simpan=simpan';
$('#data').val(dt);
document.formdikirim.submit();
return false;
}
</script>

<form name="formdikirim" id="formdikirim" action="" method="post"
enctype="multipart/form-data">
<input type="hidden" name="simpan" value="simpan" />
<input type="hidden" name="data" id="data" value="" />
</form>
<form name="data-siswa" id="data-siswa" action="" method="post"
enctype="multipart/form-data" onsubmit="return submitForm(this)">
<!-- di sini input form -->
</form>

Pada contoh di atas, form "data-siswa" sebenarnya tidak dikirim. Browser justru mengirimkan form "formdikirim". Fungsi "submitForm" harus mengembalikan nilai "false" dengan tipe boolen agar form "data-siswa" tidak terkirim. Perlu diberi tambahan pada data yang akan dikirim karena dikhawatirkan jQuery tidak memasukkan tombol "submit" ke dalam data tersebut. Data yang dimasukkan harus sesuai dengan atribut "name" dari tombol pengirim sehingga tidak terjadi banyak perubahan pada script di sisi server.

Lalu bagaimana dengan script di sisi server? Itu merupakan pertanyaan cerdas.

Pada sisi server, perlu ditambahkan kode untuk menguraikan data yang dikirim. Kode tersebut akan berbeda ketika form dikirim dengan method GET atau POST. Kode tersebut adalah sebagai berikut:

Untuk Method GET

if(strlen($_GET['data'])>4)
{
parse_str($_GET['data'], $_GET);
}

Untuk Method POST

if(strlen($_POST['data'])>4)
{
parse_str($_POST['data'], $_POST);
}

Dengan kode di atas, input yang dikirim dengan serialize diuraikan lagi ke dalam array dan disimpan pada variabel $_POST atau $_GET sehingga tidak perlu mengubah kode pada sisi server. Kode di atas diletakkan sebelum $_POST dan $_GET diproses.

Pada kode di atas, jika browser mengirimkan $_POST atau $_GET dengan nama 'data', maka nilai tersebut akan diuraikan ke dalam array. Akan tetapi jika browser tidak mengirimkan $_POST atau $_GET dengan nama 'data', mungkin disebabkan karena kesalahan pada sisi client atau JavaScript dimatikan sebelum form dikirim, maka server tetap dapat menerima form tersebut sebagaimana biasa.