Beranda > Ajax > Submit Form Dengan Ajax Menggunakan jQuery

Submit Form Dengan Ajax Menggunakan jQuery

Sehubungan dengan terselesaikannya UAS ajax minggu lalu, saya ingin memposting artikel sederhana submit form dengan ajax tentunya, hehe ..

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
31
<?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 (isset($error)) {
	echo '<b>Error</b>: <br />'.implode('<br />', $error);
} else {
	/*
	jika data mau dimasukkan ke database,
	maka perintah SQL INSERT bisa ditulis di sini
	*/

	$data = '';
	foreach ($_POST as $k => $v) {
		$data .= "$k : $v<br />";
	}
	echo '<b>Form berhasil disubmit. Berikut ini data anda:</b>';
	echo '<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

Kategori:Ajax
  1. ade
    Februari 2, 2011 pukul 8:52 am

    Thank’s gan boleh dicoba nehh…

  2. Februari 2, 2011 pukul 12:23 pm

    Thanks Infonya sob..?

  3. Februari 3, 2011 pukul 4:55 am

    wah thx baget ya gan coding php ya..ntr mesti dicoba nih gan mau belajar lagi..

    • adlief
      Februari 3, 2011 pukul 7:37 am

      sipp”

  4. Februari 4, 2011 pukul 3:51 am

    Bisa dicoba nihh sabtu tar hohoho

  1. No trackbacks yet.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: