SocialEnemy

Membuat AJAX form submit dengan jQuery

// February 27th, 2010 // 41 Comments // Life

jQuery merupakan framework javascript yang memudahkan developer dalam membuat aplikasinya. Seperti dalam contoh berikut akan saya jelaskan cara membuat form submit secara AJAX dengan menggunakan jQuery hanya dalam beberapa baris kode.

AJAX form ini bersifat unobstructive, sehingga jika tidak ada javascript di browser pengguna, form akan tetap bisa tersimpan.

Yang diperlukan

Anda sudah memiliki sebuah script html form dan sebuah handler dari form, sebut saja namanya proses.php

<form action="proses.php" method="post"> id="ajax_form"
	<div>
		Nama:
	</div>
	<div>
		<input type="text" name="nama"/>
	</div>
	<br style="clear:both;"/>

	<div>
		Jenis Kelamin:
	</div>
	<div>
		<input type="radio" name="gender" value="pria"/> Pria
		<input type="radio" name="gender" value="wanita"/> Wanita
	</div>
	<br style="clear:both;"/>

	<div>
		Pekerjaan:
	</div>
	<div>
		<select name="pekerjaan">
			<option value="pelajar">Pelajar</option>
			<option value="pns">PNS</option>
			<option value="Swasta">Swasta</option>
		</select>
	</div>
	<br style="clear:both;"/>

	<div>
		Komentar:
	</div>
	<div>
		<textarea name="komentar"></textarea>
	</div>
	<br style="clear:both;"/>

	<div>
		<input type="submit" value="Kirim"/>
	</div>

</form>

Form ini sudah jalan normal, hanya saja, anda ingin membuatnya menjadi AJAXMisalnya anda sudah punya form post biasa, yang akan diproses oleh script php proses.php

Membuat form jQuery AJAX

Pertama yang dilakukan, anda harus meng-include kan file jQuery di dalam document anda

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>

Disini saya menggunakan file jQuery dari google repository. Anda dapat mendownloadnya dan meletakkannya di folder kerja anda, pastikan pathnya tepat.

Yang kedua, anda harus memasukkan script enkapsulasi berikut. Script berikut akan menjalankan script jQuery pada saat document ready

jQuery(function($){
     // kode disini
})

Ketiga, masukkan script berikut ini ke script enkapsulasi diatas

$("#ajax_form").submit( function() {
	var post_data = $(this).serialize();
	var form_action = $(this).attr("action");
	var form_method = $(this).attr("method");
	$.ajax( {
		type :form_method,
		url :form_action,
		cache :false,
		data :post_data,
		success : function() {
			alert("Data berhasil dimasukkan.");
		},
		error : function() {
			alert("Data gagal dimasukkan.");
		}
	});
	return false;
});

Saya akan menjelaskan per bagian:

$("#ajax_form").submit( function() {

Menandakan fungsi yang dijalankan saat element dengan id ajax_form (dalam hal ini berarti form) pada saat submit, perhatikan saya memberi id=”ajax_form” pada form html diatas. Untuk penjelasan tentang selector lainnya anda dapat pelajari disini

var post_data = $(this).serialize();

Ini adalah bagian yang saya suka, fungsi ini akan mempopulate semua form input value ke dalam Name Value Pair (NVP), yang nantinya akan di kirim melalui proses AJAX

var form_action = $(this).attr("action");
var form_method = $(this).attr("method");

Variable ini menandakan form action dan form method yang digunakan

$.ajax( { ... } )

Bagian ini kayaknya cukup self explaining.

Demo