Submit form sederhana dengan ajax menggunakan mootools

Posted by almuth on 30 April 2008 – 15:49
Filed under HTML dan CSS, Javascript, PHP dan MySQL

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.

Permalink|Comments RSS Feed - Post a comment|Trackback URL.

3 Comments

  1. moses
    Posted 11 September 2008 at 21:24 | Permalink

    Ada beberapa masalah yang saya hadapi jika menggunakan seperti ini :
    1. Bagaimana membuat supaya pada saat di submit tidak lagi muncul form nya, hanya muncul datanya doang yang di post?
    2. Bagaimana membuat dengan mootol, misalnya pada post comment, ada popup semacam dialog, dan apa yang dipost langsung ditampilkan…
    semoga saudara bisa membantu. TQ

  2. almuth
    Posted 12 September 2008 at 17:05 | Permalink

    @moses
    1. untuk menyembunyikan form, pada saat submit, form-nya di kasih style display none. mengacu pada contoh di atas pada fungsi submit_form() bisa ditambah sbb:

    function submit_form(){
	....
	$('task').disabled=true;
	$('form').setStyle('display', 'none'); // tambahan untuk menyembunyikan form
	....
}

    2. Untuk membuat dialog box dengan mootools bisa menggunakan smoothbox, bisa didownload di sini.

    begitu jawaban saya, mudah2an membantu :)

  3. ioezhe
    Posted 23 Februari 2009 at 11:49 | Permalink

    thank nya bro atas artikel…….mudah dipahami

4 Trackbacks

  1. By Submit Form Dengan Ajax Menggunakan jQuery | Gatot Ari Wibowo's Weblog on 15 Februari 2009 at 12:02

    [...] MooTools: Submit form sederhana dengan ajax menggunakan mootools Tags: ajax, form, html, javascript, jQuery, pemrograman, PHP, post, Programming, submit, [...]

  2. By sakeratech.com » Blog Archive » 45 Kumpulan Daftar Tutorial AJAX - PHP on 22 Mei 2009 at 16:28

    [...] 6. Submit form sederhana dengan ajax menggunakan mootools [...]

  3. By 45 Kumpulan Daftar Tutorial AJAX – PHP | IDFreelance.net - Ajang Belajar Pemrograman dan Desain Web on 9 Oktober 2009 at 09:20

    [...] 6. Submit form sederhana dengan ajax menggunakan mootools [...]

  4. By 45 Kumpulan Daftar Tutorial AJAX – PHP | Share Arsipku on 2 Mei 2010 at 13:35

    [...] 6. Submit form sederhana dengan ajax menggunakan mootools [...]

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*