function submitShoutBox(){
    // cek apakah semua form sudah diisi - lihat penggunaan method present di manual prototype.js
    var valid = $('name').present() && $('email').present() && $('message').present();
    if(!valid){
	 alert('Please fill out all the fields');
     return;
    }
	// regular expression untuk mengecek valid atau tidaknya alamat email yang diinput
    var pattern=/^([a-zA-Z0-9_.-])+@([a-zA-Z0-9_.-])+\.([a-zA-Z])+([a-zA-Z])+/;
    if(!pattern.test($F('email'))){ 
	 alert('Please provide a valid email address');
     return;
	}        
	// siapkan request dan kirim request tersebut ke shoutbox_process.php?post
 	new Ajax.Request( 'shoutbox_process.php?post',
	  {
	 	method: 'post',
		// hanya butuh 3 parameter saja untuk memproses data
		parameters: {name: $F('name'),email: $F('email'),message: $F('message')},
		// ketika request berhasil dilakukan maka jalankan perintah-perintah di dalam property onSuccess
		onSuccess: function(){ 		
			// refresh isi shoutbox
			getShoutBoxList(); 
			// kosongkan form dan fokuskan cursor di textfield nama
			$('formShoutBox').reset();
			$('name').focus();
		}
	  }
	);
 }
 function getShoutBoxList(){
	//  siapkan request dan kirim request tersebut ke shoutbox_process.php?get
	/*  Ajax.Updater hanya mengubah isi dari id element  yang dimaksud yaitu 'divShoutBoxList' 
		dengan hasil request dari url yang diberikan - lihat manual prototype.js
	*/
 	new Ajax.Updater('divShoutBoxList','shoutbox_process.php?get');
 }
 
 // ketika document selesai di load
 window.onload = function(){
 	/*  Arahkan event onsubmit form utama ke fungsi submitShoutBox 
		lalu 'return false' agar tidak ada proses loading ulang halaman setelah selesai submit
	*/
 	$('formShoutBox').onsubmit = function(){submitShoutBox(); return false;}
	// tampilkan isi shoutbox sebelumnya
	getShoutBoxList();
 }