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>

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
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);
}

1
2

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

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);
	});
});

1
2

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

Do you like this article? Share It!

7 Comments to “Submit form sederhana dengan ajax menggunakan mootools”

• 11 September 2008 pukul 21:24
  moses says:

  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

  Balas
• 12 September 2008 pukul 17:05
  almuth says:

  @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

  Balas
• 15 Februari 2009 pukul 12:02
  Submit Form Dengan Ajax Menggunakan jQuery | Gatot Ari Wibowo's Weblog says:

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

  Balas
• 23 Februari 2009 pukul 11:49
  ioezhe says:

  thank nya bro atas artikel…….mudah dipahami

  Balas
• 22 Mei 2009 pukul 16:28
  sakeratech.com » Blog Archive » 45 Kumpulan Daftar Tutorial AJAX - PHP says:

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

  Balas
• 9 Oktober 2009 pukul 09:20
  45 Kumpulan Daftar Tutorial AJAX – PHP | IDFreelance.net - Ajang Belajar Pemrograman dan Desain Web says:

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

  Balas
• 2 Mei 2010 pukul 13:35
  45 Kumpulan Daftar Tutorial AJAX – PHP | Share Arsipku says:

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

  Balas