Simple Ajax Form Auto Submit

27 May 2011 by Nasrul Hadi 2 Comments

Ini, posting tutorial pertama saya di blog baru ini, kali ini membahas tentang proses pengiriman data otomatis tanpa kita harus repot mengklik tombol submit. pemahaman yg kita butuhkan adalah sedikit mengerti tentang ajax, dimana dalam hal ini ajax berperan penting dalam lalu lintas proses pengiriman data.

pengetahuan tentang :

HTML
PHP
MySql
Javascript / Ajax

Langsung saja ke topik. pertama, kita buat database db_autosubmit dulu.

CREATE TABLE IF NOT EXISTS `db_autosubmit` (
`id` int(11) NOT NULL auto_increment,
`nama` varchar(20) NOT NULL,
`email` varchar(20) NOT NULL,
`hobi` varchar(30) NOT NULL,
`pid` varchar(10) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=6 ;

Setelah itu, buat file dengan nama form.html dan masukan kode javascript ini

<script language="javascript">
	function GetData(){
		var input = document.getElementById("FormAutoSubmit").elements
		var param = "";

		// menghitung semua jumlah element pada form, kecuali type submit
		for(var i=0; i!=input.length; i++){
			if(input[i].type != "submit"){
				param = param+"&"+input[i].name+"="+input[i].value
			}
		}

		// proses ajax dimulai
		var get=new XMLHttpRequest();
		// mengirimkan request value ke SendData.php melalu method POST
		get.open("POST", "SendData.php", true);
		// mengambil nilai header untuk proses pengiriman request data
		get.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
		get.setRequestHeader("Content-length", param.length);
		get.setRequestHeader("Connection", "close");
		get.send(param);
		// menunggu hasil pengembalian request data
		get.onreadystatechange = function() {
			if(get.readyState == 4 && get.status == 200){
				//notifikasi menandakan jika nilai kembali / respon post bernilai benar, misal:
				//alert("berhasil Input Data");
			}
		}
	}
</script>

Script diatas, adalah untuk lalu lintas proses data. dimana, di dalam fungsi GetData() variabel input mencari semua element input yg berada di form FormAutoSubmit dan mendeklarasikan kemudian menjumlah total mengunakan fungsi for(var i=0; i!=input.length; i++) . setelah mendapatkan value dari element-element tersebut, maka request data akan dikirimkan melalui XMLHttpRequest(); dan diteruskan ke file SendData.php untuk selanjutnya di proses ke database.

untuk form sendiri, harus diberikan tag ID berdasarkan getElementById() .

<form id="FormAutoSubmit" method="post" onclick="GetData();" onkeyup="GetData();">
	<label>FORM AUTO SUBMIT</label><hr width="300" align="left" /><br />
    <label for="nama">Nama :</label> <input type="text" name="nama" id="nama" /><br /><br />
    <label for="email">Email :</label> <input type="text" name="email" id="email" /><br /><br />
    <label for="hobi">Hobi :</label> <input type="text" name="hobi" id="hobi" /><br /><br />
    <input type="hidden" name="pid" value="KODE" />
</form>

Pada script form di atas, terdapat input type=”hidden” fungsinya untuk acuan pemetakan agar tidak terjadi over flood saat proses insert ke database. sekarang kita buat file SendData.php

<?php

$host 	= "localhost"; // nama server
$user 	= "root"; // mysql user
$pass 	= "root"; // mysql password
$db	= "test"; // mysql database
$table	= "db_autosubmit"; // nama table database

// menghubungkan ke database
mysql_connect($host, $user, $pass);
mysql_select_db($db);

// mengambil request value dari ajax
$nama 	= $_POST["nama"];
$email 	= $_POST["email"];
$hobi 	= $_POST['hobi'];
$pid	= $_POST['pid'];

// menghitung total baris pada database.
$total_baris = mysql_num_rows(mysql_query("SELECT * FROM ".$table." WHERE `pid` = '".$pid."'"));

// jika total baris lebih dari 0 (berarti ada) maka request data akan di update berdasarkan PID
if($total_baris > 0){
	mysql_query("UPDATE ".$table." SET `nama` = '".$nama."' , `email` = '".$email."' , `hobi` = '".$hobi."' WHERE `pid` = '".$pid."' ")
	or die ("mysql error: ".mysql_error());
	exit;

// jika total baris sama dengan 0, maka data akan di input menjadi baris baru
}else{
	mysql_query("INSERT INTO ".$table." VALUES (NULL, '$nama', '$email', '$hobi', '$pid')")
	or die ("mysql error: ".mysql_error());
	exit;
}

?>

Ok, Selamat mencoba. Semoga bermanfaat…

Download File : http://www.box.net/shared/l5paj7vasf

–

dari Meja Nasrul, 2011