almuth.web.id » Javascript http://www.almuth.web.id sekedar tempat berbagi Tue, 15 Jun 2010 08:52:38 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Submit form sederhana dengan ajax menggunakan mootools http://www.almuth.web.id/2008/04/30/submit-form-sederhana-dengan-ajax-menggunakan-mootools.html http://www.almuth.web.id/2008/04/30/submit-form-sederhana-dengan-ajax-menggunakan-mootools.html#comments Wed, 30 Apr 2008 15:49:53 +0000 almuth http://www.almuth.web.id/2008/04/30/submit-form-sederhana-dengan-ajax-menggunakan-mootools.html Saat ini ajax merupakan teknologi dalam bidang web yang sedang naik daun. Load yang lebih cepat karena tidak perlu meload semua halaman menjadi salah satu keunggulan dari teknologi ajax ini. Saat membuat website direktori saya coba untuk menerapkan teknologi ajax ini pada website tersebut. Emang tidak semua menggunakan ajax tetapi hanya pada form daftarkan website saya gunakan teknologi ajax untuk mensubmit form tersebut.

Saya menggunakan mootools sebagai framework javascript yang cukup mudah untuk digunakan. Kamu dapat membaca postingan ini untuk mengenal lebih jauh tentang mootols. Kamu dapat mendownload mootools di sini. Ada dua cara yang dapat kita digunakan untuk mensubmit form dengan ajax menggunakan mootools. Sebelum membahas kedua cara tersebut hal yang perlu disiapkan adalah file untuk form dan file action. Contoh file form adalah sebagai berikut.

1
2
3
4
5
6
7
8
9

<div id="response"></div>
<form action="action.php" method="post" name="form" id="form" onsubmit="submit_form(); return false;">
		<label for="name">Nama: </label>
<input name="name" size="30" id="name" type="text" />
 
		<label for="name">Alamat email: </label>
<input name="email" size="30" id="email" type="text" />
<input name="task" id="task" value="Submit" type="submit" />
	</form>

dan contoh file action adalah sebagai berikut.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<?php
if( $_POST ){
	if( trim($_POST['name']) == '' ){
		echo 'Silahkan masukkan nama Anda.';
	}
	elseif( trim($_POST['email']) == '' ){
		echo 'Silahkan masukkan alamat email Anda.';
	}
	else{
		// kamu dapat melakukan aksi di sini, misal-nya masukin ke database atau yang lain.
		echo 'Terima kasih telah mengisi form. Berikut adalah data Anda:';
		echo 'Nama Anda: '.$_POST['name'];
		echo 'Email Anda: '.$_POST['email'];
	}
}
?>

1. Cara pertama adalah menggunakan fungsi javascript
Cara ini adalah dengan membuat fungsi javascript untuk melakukan action ketika form disubmit. Contoh fungsi tersebut adalah:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function submit_form(){
	var fn = function(){
		$('task').disabled=false;
		$('response').removeClass('ajax-loading').addClass('response');
	}
 
	var html = "Harap menunggu...";
	$('response').removeClass('response').addClass('ajax-loading').setHTML(html);
	$('task').disabled=true;
	var options = {};
	options['update'] = 'response'; // id div yang akan di tulisi response dari action
	options['onComplete'] = fn;
	options['evalScripts'] = false; //jika respon mengandung javascript berikan nilai true
	$('form').send(options);
}

Jika menggunakan cara ini maka kamu harus menambahkan onsubmit=”submit_form(); return false;” pada form kamu. Contohnya sebagai berikut.

1
2

<form action="action.php" method="post" name="form" id="form" onsubmit="submit_form(); return false;">
</form>

2. Cara kedua adalah menggunakan window.domready
Cara ini adalah menambahkan event submit pada form menggunakan domready. Contohnya sebagai berikut.

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

window.addEvent('domready', function(){
	$('form2').addEvent('submit', function(e){
		e = new Event(e).stop();
		var fn = function(){
			$('task2').disabled=false;
			$('response2').removeClass('ajax-loading').addClass('response');
		};
 
		var html = "Harap menunggu...";
		$('response2').removeClass('response').addClass('ajax-loading').setHTML(html);
		$('task2').disabled=true;
 
		var options = {};
		options['onComplete'] = fn;
		options['update'] = 'response2';
		$('form2').send(options);
	});
});

Jika kamu menggunakan cara ini maka kamu harus menambahkan id pada form, misalnya

1
2

<form action="action.php" method="post" name="form2" id="form2">
</form>

Kamu dapat melihat contoh penerapan metode tersebut di sini. Atau kamu juga dapat mengunduh contoh tersebut di sini.

]]> http://www.almuth.web.id/2008/04/30/submit-form-sederhana-dengan-ajax-menggunakan-mootools.html/feed 7