Pernahkan anda mengetahui tentang fungsi Serialize pada jQuery ?
Berkenaan dengan pertanyaan pembaca pada Media Kreatif, kami berusaha
menyajikan tutorial penggunaan Serialized jQuery pada study kasus
pembuatan halaman registrasi berbasis jQuery.
Fungsi serialize pada jQuery dapat kita gunakan untuk mengambil elemen -
elemen dalam sebuah form untuk kemudian kita kirimkan dalam bentuk data
POST atau GET menggunakan AJAX. Fungsi ini sangat berguna untuk
memperingkas. Sebagai contoh, pada proses pengiriman data dengan ajax,
kita biasanya harus menyebutkan masing - masing variabel yang kemudian
kita susun seperti berikut :
var data= 'nama='+nama+'&alamat='+alamat+'&email='+email dst;
Hal tersebut tidak begitu berpengaruh untuk pengiriman variabel yang
tidak terlalu banyak, akan tetapi dapat anda bayangkan bagaimana susunan
datanya kalau Variabel yang kita kirimkan berjumlah 50, atau dalam
sebuah form komplex yang terdapat puluhan variabel
Untuk mengatasi masalah tersebut, kita bisa menggunakan fungsi
serialize jQuery, sehingga code menjadi lebih simpel meskipun jumlah
variabel yang akan dikirimkan berjumlah puluhan.
var data=$('id_atau_class_form').serialize()
Contoh kita punya kode form sebagai berikut :
<form method="post" name="frm" id="registrasi">
Nama : <input type="text" name="nama"/><br/>
Alamat: <input type="text" name="alamat"/><br/>
Email : <input type="text" name="email"/><br/>
</form>
Form yang kita buat mempunya id="registrasi" maka, kode jquery serialize yang kita gunakan akan menjadi :
var data=$('#registrasi').serialize()
Bagaimana bentuk data yang dikirimkan ? data yang dikirimkan adalah
data POST atau GET yang tersusun sesuai dengan nama masing - masing
elemen form seperti contoh berikut ini.
Array(
[nama]=>value [alamat]=>value [email]=>value
)
Untuk lebih jelasnya , mari kita perhatikan contoh script dibawah ini.
1. Buat halaman Registrasi
<html>
<head>
<title>jQuery Serialize</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
function kirim_data(formObj, url, responseDIV)
{
var image_load = "<div class='ajax_loading'><br />Wait. . . .</div>";
$.ajax({
url: url,
beforeSend: function(){
$(responseDIV).html(image_load);
},
data: $(formObj).serialize(),
type: "post",
dataType: "html",
success: function(response){
$(responseDIV).html(response);
},
error: function(){
alert("Terjadi kesalahan!");
},
});
return false;
}
</script>
<style type="text/css">
#eror{max-width:500px;border:red 1px solid;color:red;padding:5px;}
#msg{max-width:500px;border:green 1px solid;color:green;padding:5px;}
</style>
</head>
<body>
<div id="dom_ajax"></div>
<form method="post" id="frm" name="frm" action="">
<table>
<tr><td>Nama</td><td><input type="text" name="nama"/></td></tr>
<tr><td>Alamat</td><td><input type="text" name="alamat" size="35"/></td></tr>
<tr><td>Email</td><td><input type="text" name="email" size="25"/></td></tr>
<tr><td>Telp</td><td><input type="text" name="telp"/></td></tr>
<tr><td>Username</td><td><input type="text" name="username"/></td></tr>
<tr><td>Password</td><td><input type="password" name="password"/></td></tr>
<tr><td></td><td><input type="button" name="btn" value="kirim" onclick="kirim_data('#frm','serial_action.php','#dom_ajax');" /></td></tr>
</table>
</form>
</body>
</html>
Pada contoh script diatas, kita mempunyai form dengan ID = frm, maka pada function kirim_data terdapat perintah
data: $(formObj).serialize(),
Dimana formObj merupakan variabel function yang dikirimkan dengan event Onclick pada tombol kirim, yaitu :
<input type="button" name="btn" value="kirim" onclick="kirim_data('#frm','serial_action.php','#dom_ajax');" />
Perhatikan bagian :
onclick="kirim_data('#frm','serial_action.php','#dom_ajax');"
-
#frm » id dari form, yaitu frm
-
serial_action.php » merupakan script php yang memproses data registrasi
-
#dom_ajax » merupakan TAG DIV yang nantinya akan di inject dengan ajax untuk mencetak respon dari serial_action.php
2. Membuat script serial_action.php
<?php
$arr = $_POST;
print_r($arr);
//Uraikan data yang dikirim AJAX
$nama = $arr['nama'];
$alamat = $arr['alamat'];
$email = $arr['email'];
$telp = $arr['telp'];
$username = $arr['username'];
$password = $arr['password'];
//cek masing - masing data
$eror = false;
if(trim($nama)=='' or strlen($nama)<5){
$eror = true;
$pesan .='- Nama tidak boleh kosong dan tidak boleh kurang dari 5 huruf<br/>';
}
if(trim($alamat)=='' or strlen($alamat)<10){
$eror = true;
$pesan .='- Alamat tidak boleh kosong dan tidak boleh kurang dari 10 huruf<br/>';
}
//silahkan lanjutkan pemeriksaan form selanjutnya
//Jika ditemukan eror, cetak pesan
if($eror){
echo '<div id="eror">'.$eror.'</div>';
}
else{
//Tidak ditemukan eror, lanjutkan pemrosesan ke database
//Cetak pesan sukses disini
echo '<div id="msg">Proses Registrasi Berhasil</div>';
}
?>
Untuk mencoba contoh script diatas, silahkan download source code yang
sudah kami sediakan pada link download dibawah. Jangan lupa, click LIKE
jika menurut anda tutorial ini sangat berguna dalam proses pembelajaran
pembaca sekalian. Selamat mencoba dan salam kreatif.
