Cara melakukan pengiriman variabel pada JQUERY AJAX

Selamat berjumpa kembali dengan tutorial Media Kreatif, kali ini kita akan membahas cara pengiriman value pada elemen - elemen form HTML menggunakan JQUERY AJAX

Pada umumnya, kita mengirimkan value dengan menggunakan tombol Submit dan mengirimkannya pada file action, kemudian pada file action kita bisa menguraikannya dengan perintah $_POST atau $_GET seperti pada contoh berikut:

 
$nama = $_POST['nama'];
$alamat = $_POST['alamat'];
//atau
$no_induk= $_POST['nim'];
$tanggal = $_POST['tanggal'];

Pada contoh kali ini, kita akan memberikan gambaran cara mengirimkan elemen - elemen form HTML dengan menggunakan JQUERY AJAX, dimana value dari masing - masing elemen form seperti TEXTBOX, TEXTAREA, COMBOBOX, CHECKBOX, RADIO BUTTON dan elemen - elemen form lainnya akan kita ambil menggunakan AJAX. Metode pengambilan value dari form - form pada contoh kali ini adalah dengan mengenali ID dan nama elemen form.

 

<input type="text" name="nama" id="txt_nama">

Pada contoh textbox diatas, propoerty namenya adalah nama, kemudian ID dari textbox tersebut adalah txt_nama, maka pada JQUERY AJAX kita bisa menggunakan perintah :

$('#txt_nama').val();

Maksud dari perintah diatas adalah : Ambil value dari elemen form yang mempunyai ID = txt_nama

 

Untuk lebih memperjelas gambaran diatas, mari kita lanjutkan pada contoh script berikut :


1. Buat form html sebagai media input » index.php

<html>
	<head>
		<title>Membuat form pilihan merek kendaraan</title>
		<script type="text/javascript" src="jquery-1.6.1.min.js">//memanggil jquery</script>
		<script type="text/javascript" src="ajax.js">//memanggil script ajax</script>
	</head>
	<body>
		<div id="wrapper">
			<form method="post" name="frm_ajax">
				<div id="pesan_kirim" style="display:none"></div>
				<table>
					<tr><td width="150">Nama</td><td><input type="text" id="txt_nama"/></td></tr>
					<tr>
						<td>Jenis Kelamin</td>
						<td><select name="gender" id="gender"><option value="L">Laki-laki</option><option value="P">Perempuan</option></select></td>
						</tr>
					<tr><td valign="top">Alamat</td><td><textarea name="alamat" id="txt_alamat"></textarea></td></tr>
					<tr>
						<td valign="top">Agama</td>
						<td>
							<input type="radio" name="agama" id="agama" value="Islam">Islam<br/>
							<input type="radio" name="agama" id="agama" value="Kristen">Kristen<br/>
							<input type="radio" name="agama" id="agama" value="Katolik">Katolik<br/>
							<input type="radio" name="agama" id="agama" value="Hindu">Hindu<br/>
							<input type="radio" name="agama" id="agama" value="Budha">Budha<br/>
						</td>
					</tr>
					<tr>
						<td valign="top">Hoby</td>
						<td>
							<input type="checkbox" name="hoby" value="Olah Raga">Olah Raga<br/>
							<input type="checkbox" name="hoby" value="Membaca">Membaca<br/>
							<input type="checkbox" name="hoby" value="Bersepeda">Bersepeda<br/>
							<input type="checkbox" name="hoby" value="Travelling">Travelling<br/>
						</td>
					</tr>
					<tr>
						<td colspan="2"><input type="button" onclick="kirim_form();" value="Kirim"/></td>
					</tr>
				</table>
			</form>
		</div>
	</body>
</html>

Form diatas akan kita fungsikan sebagai layaknya form pendaftaran yang sering kita temui pada halaman web, form diatas dapat kita simpan dengan extensi php ataupun dengan extensi html.

2. Membuat script ajax » ajax.js

function kirim_form(){
	$('#pesan_kirim').html('Loading ...');
	$('#pesan_kirim').slideDown('slow');
	
	var nama   = $('#txt_nama').val();
	var gender = $('#gender').val();
	var alamat = $('#txt_alamat').val();
	var agama  = $('input[name=agama]:checked').val();
	var hoby   = $('input[name=hoby]:checked').map(function(){
						return $(this).val();
				 }).get();
	$.ajax({
		//Alamat url harap disesuaikan dengan lokasi script pada komputer anda
		url	     : 'http://localhost/tutorial/proses.php',
		type     : 'POST',
		dataType : 'html',
		data     : 'nama='+nama+'&gender='+gender+'&alamat='+alamat+'&agama='+agama+'&hoby='+hoby,
		success  : function(respons){
			$('#pesan_kirim').html(respons);
		},
	})
}

Penjelasan singkat dari script diatas adalah sebagai berikut: ketika tombol di click, maka

//Set value html dari DOCUMEN dengan ID = pesan_kirim, dalam hal ini yaitu <div id="pesan_kirim">
$('#pesan_kirim').html('Loading ...'); 
//Buat animasi slide down pada documen dengan id = pesan_kirim
$('#pesan_kirim').slideDown('slow');

Mulai mengambil value dari masing-masig elemen form:

//mengambil value dari textbox, combobox dan textarea
var nama   = $('#txt_nama').val();
var gender = $('#gender').val();
var alamat = $('#txt_alamat').val();
//mengambil 1 value dari radio button agama
var agama  = $('input[name=agama]:checked').val();
//mengambil beberapa value dari checkbox hoby
var hoby   = $('input[name=hoby]:checked').map(function(){
				return $(this).val();
			 }).get();

Selanjutnya melakukan pengiriman data dengan perintah berikut :

$.ajax({
	//Alamat url harap disesuaikan dengan lokasi script pada komputer anda
	url	     : 'http://localhost/tutorial/proses.php',
	type     : 'POST',
	dataType : 'html',
	data     : 'nama='+nama+'&gender='+gender+'&alamat='+alamat+'&agama='+agama+'&hoby='+hoby,
	success  : function(respons){
		$('#pesan_kirim').html(respons);
	},
})

3. Membuat script pemroses » proses.php

Script ini akan kita gunakan untuk menangkap kiriman varibel dari AJAX untuk kemudian dilakukan pemrosesan seperti halnya pada pengiriman variabel html pada umumnya. Dalam contoh kali ini, script proses kita buat hanya untuk mencetak data yang diterimanya, anda dapat melanjutkannya untuk melakukan pemrosesan kedalam database atau proses - proses lainnya.

<?php
print_r($_POST);
$nama   = $_POST['nama'];
$gender = $_POST['gender'];
$alamat = $_POST['alamat'];
$agama  = $_POST['agama'];
$hoby   = $_POST['hoby'];
//Silahkan melakukan proses selanjutnya
?>

Sekian dulu tutorial kita kali ini, semoga tulisan ini dapat bermanfaat bagi pembaca sekalian, Salam Kreatif


Komentar pembaca

handiokePertamax haha. Sip bang, kalau bisa dikasih screenshoot hasilnya :)posting pada :2013-04-29 08:25:41
Rendi Saputranah gan..yang jadi pertanyaan saya pas input yang bertipe file..bagaimana mendapatkan nilai file name sama file temp nya gan??..soalnya untuk upload file ato foto gan.. trima kasih sblumnyaposting pada :2013-09-23 18:16:46
Pulung Riswantosob script ini berfungsi di web builder seperti xtgem gk?posting pada :2014-09-21 21:26:15
Jeffry HartonoTutorial yang bagus, setelah mencari di Google untuk submit ajax dan jquery gak ketemu. Ternyata nemu di sini. Orang Indonesia ilmunya tidak kalah dengan penduduk negara lain. Terima kasih media kreatif. Script ini juga support dengan jquery versi 2. terima kasih.posting pada :2015-12-14 09:35:15
Zero NameThanks Gan, Sukses posting pada :2016-01-05 15:48:44
         
     
         
 
         
   
         
   
 

Tulis komentar