Menggunakan fungsi Serialize pada script Registrasi dengan jQuery AJAX

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.
Download script Registrasi dengan jQuery AJAX


Komentar pembaca

JoeArtikel yg menarik, bisa dipelajari untuk nambah ilmu. Mantapp.. dari www.belihewan.composting pada :2016-07-28 13:27:46
adiartikel yang bagusposting pada :2016-08-30 08:59:26
Burhan Abdiillahakhir nya saya paham fungsi dari function serialize jquery setelah membaca artikel mas, terimakasihposting pada :2017-04-07 11:02:31
joeterima kasih buat tutorialnya,..sangat membantuposting pada :2017-04-25 15:28:40
         
     
         
 
         
   
         
   
 

Tulis komentar