Home About

Submit Form Dengan Ajax Menggunakan jQuery

29 Jul 2008

Jika pada artikel sebelumnya saya sudah menulis tentang cara menampilkan halaman dengan AJAX (menggunakan fungsi load() pada jQuery), maka kali ini adalah contoh penggunaan AJAX untuk mengirimkan data dalam sebuah form dan memprosesnya. Salah satu kelebihan menggunakan form berbasis AJAX dibandingkan form konvensional adalah: kita tidak perlu meninggalkan form selama form dikirimkan/diproses.

Untuk contoh ini, saya menggunakan dua buah file, yang pertama adalah file ajaxform.html untuk menampilkan form nya, dan file proses.php untuk memproses data yang dikirimkan dan menampilkan hasilnya.

Script pada file ajaxform.html nya adalah sbb:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

$(document).ready(function() {
 
	$().ajaxStart(function() {
		$('#loading').show();
		$('#result').hide();
	}).ajaxStop(function() {
		$('#loading').hide();
		$('#result').fadeIn('slow');
	});
 
	$('#myForm').submit(function() {
		$.ajax({
			type: 'POST',
			url: $(this).attr('action'),
			data: $(this).serialize(),
			success: function(data) {
				$('#result').html(data);
			}
		})
		return false;
	});
})

Untuk mengimplementasikan AJAX, pada file form.html ini saya menggunakan fungsi ajax () pada jQuery. Fungsi ini memiliki sebuah argumen yaitu berupa object (pasangan key/value), dan yang akan saya gunakan di antaranya sbb:

  • type: jenis request yang dipakai, bisa ‘POST’ atau ‘GET’
  • url: url yang akan digunakan untuk memproses data. karena pada form sudah terdapat nilai action (proses.php) maka saya tinggal mengambil nilai dari action tsb menggunakan $(this).attr(’action’)
  • data: data yang dikirimkan, dalam format querystring. untuk menghasilkan querystring dari form, saya menggunakan fungsi serialize()
  • success: fungsi yang akan dijalankan jika request berhasil, dengan sebuah argumen berupa data yang dikembalikan dari server, dalam hal ini adalah hasil output dari file proses.php (hasil output ini akan saya tampilkan ke dalam sebuah div dengan id=”result” )

Sedangkan file proses.php yang akan memproses data yang dikirimkan, isinya adalah sbb:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<?php
//validasi
if (trim($_POST['nim']) == '') {
	$error[] = '- NIM harus diisi';
}
if (trim($_POST['nama']) == '') {
	$error[] = '- Nama harus diisi';
}
if (trim($_POST['tempat_lahir']) == '') {
	$error[] = '- Tempat Lahir harus diisi';
}
//dan seterusnya
 
if ($error) {
	echo '<b>Error</b>: <br />'.implode('<br />', $error);
} else {
	/*
	jika data mau dimasukkan ke database,
	maka perintah SQL INSERT bisa ditulis di sini
	*/
 
	echo '<b>Form berhasil disubmit. Berikut ini data anda:</b>';
	echo '<br />';
	foreach ($_POST as $k => $v) {
		$data .= "$k : $v<br />";
	}
	echo $data;
}
die();
?>

Setelah file proses.php ini berhasil dijalankan maka hasil outputnya akan ditampilkan pada element div yang berada pada file ajaxform.html

Untuk lebih jelasnya silakan lihat demo:
Demo Ajax Form

Dan anda bisa mendownload source code nya di sini:
Download jQuery AJAX Form

Downloaded a total of 231 times

Artikel terkait:
Submit form sederhana dengan ajax menggunakan mootools

Tags: , , , , , , , , , , , ,

Posted in Programming


16 Responses

  • Ogi

    31 Jul 2008 at 09:40

    weittss, dah jadi master e ajax sekarang:P

  • rifqi

    31 Jul 2008 at 16:53

    master!, tambahi lg tutoriale. ok. sing akeh

  • gawibowo

    02 Aug 2008 at 17:13

    weittss.. aku belum jadi master kok.. baru aja jadi sarjana :p

  • Akhmad Fathonih

    04 Aug 2008 at 14:46

    Ajax? hmm, yummy .. :)

    jangan lupa check visualjquery.com, lumayan bermanfaat buat lookup referensi. Siapa tahu belum ada di bookmark kamu :D

  • gawibowo

    04 Aug 2008 at 14:54

    visualjquery? tentu saja sudah jadi tontonan sehari-hari :D

  • Naya

    13 Aug 2008 at 20:23

    mas mau nanya nih…
    gmana yah cara bikin animasi loading ajax seperti di gmail..? yg di kanan atas warna merah itu lho
    thans :)

  • gawibowo

    16 Aug 2008 at 22:44

    untuk bikin animasi loading seperti gmail, kurang lebih seperti ini:
    Buat di HTML untuk tulisan loading nya, dan secara default tidak ditampilkan:

    1

    <div id="loading" style="display:none">Loading...</div>

    Berikan CSS untuk tulisan loading tsb:

    1
2
3
4
5
6
7

    #loading {
	position: fixed;
	top: 0;
	right: 0;
	color: white;
	background-color: red;
}

    Dan script jQuery nya,

    1
2
3
4
5

    $('#loading').ajaxStart(function(){
	$(this).show();
}).ajaxStop(function(){
	$(this).hide();
});

    contohnya bisa dilihat di sini
    semoga membantu :)

    CATATAN:
    CSS position: fixed (supaya posisi nya tetap walaupun browser di scroll) tidak bisa berjalan di Internet Explorer 6
    anda bisa mencari solusi untuk ini di google

  • Danie

    23 Aug 2008 at 00:07

    Mas Gatot kamu itu gak hanya manual berjalan, tapi manual ONLINE :D
    mas gatot, kpn ya nyusul pinternya..
    bosen aku oon terus!

  • Paulo

    21 Sep 2008 at 21:27

    Good job. thanks.
    Paulo

  • atoeyz

    23 Sep 2008 at 11:19

    mas mau minta source ajaxform.html yang lengkapnya dunk klo boleh!. klo boleh juga semuanya satu project yg Submit Form Dengan Ajax Menggunakan jQuery !!url buat donlot nya ya, klo ga kirim email :D

  • gawibowo

    23 Sep 2008 at 18:16

    @atoeyz:
    boleh aja..
    link downloadnya sudah saya sediakan.
    silakan didownload sepuasnya…
    :D

  • atoeyz

    24 Sep 2008 at 09:03

    halagh akhirnya,. hehe
    baru mau belajar ajax ni terimakasih ya :D

  • dj

    17 Oct 2008 at 16:31

    TOP nih.. , thank nya…

  • Rivai

    09 Nov 2008 at 18:03

    nice tutorial :)
    lagi belajar ajax juga nih.. :D

    izin bookmark ;p

  • widi

    20 Nov 2008 at 15:27

    kalao saya pakai mootools
    ,apakah cara nya juga sama? masih bisa digunakan juga kah script ini?

  • gawibowo

    20 Nov 2008 at 23:06

    kalo script php dan html nya masih bisa dipake, tapi javascript nya jelas berbeda..
    tutorial submit form menggunakan mootools bisa dilihat di sini

Leave a Comment

Powered by Wordpress