Submit Form Dengan Ajax Menggunakan jQuery

29 Jul 2008 347,830 views

Kalau sebelumnya saya sudah menulis tentang cara menampilkan halaman menggunakan Ajax (menggunakan fungsi load() pada jQuery), maka kali ini adalah contoh penggunaan Ajax untuk mengirimkan data dalam sebuah form dan memprosesnya. Salah satu kelebihan menggunakan form berbasis Ajax dibandingkan form konvensional adalah: kita tidak perlu meninggalkan form selama form dikirimkan/diproses.

Untuk contoh ini, saya menggunakan dua buah file, yang pertama adalah file ajaxform.html untuk menampilkan form nya, dan file proses.php untuk memproses data yang dikirimkan dan menampilkan hasilnya.

Script pada file ajaxform.html nya adalah sbb:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$(document).ready(function() {
 
	$().ajaxStart(function() {
		$('#loading').show();
		$('#result').hide();
	}).ajaxStop(function() {
		$('#loading').hide();
		$('#result').fadeIn('slow');
	});
 
	$('#myForm').submit(function() {
		$.ajax({
			type: 'POST',
			url: $(this).attr('action'),
			data: $(this).serialize(),
			success: function(data) {
				$('#result').html(data);
			}
		})
		return false;
	});
})

Untuk mengimplementasikan Ajax, pada file form.html ini saya menggunakan fungsi ajax () pada jQuery. Fungsi ini memiliki sebuah argumen yaitu berupa object (pasangan key/value), dan yang akan saya gunakan di antaranya sbb:

  • type: jenis request yang dipakai, bisa ‘POST’ atau ‘GET’
  • url: url yang akan digunakan untuk memproses data. karena pada form sudah terdapat nilai action (proses.php) maka saya tinggal mengambil nilai dari action tsb menggunakan $(this).attr('action')
  • data: data yang dikirimkan, dalam format querystring. untuk menghasilkan querystring dari form, saya menggunakan fungsi serialize()
  • success: fungsi yang akan dijalankan jika request berhasil, dengan sebuah argumen berupa data yang dikembalikan dari server, dalam hal ini adalah hasil output dari file proses.php (hasil output ini akan saya tampilkan ke dalam sebuah div dengan id="result" )

Sedangkan file proses.php yang akan memproses data yang dikirimkan, isinya adalah sbb:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<?php
//validasi
if (trim($_POST['nim']) == '') {
	$error[] = '- NIM harus diisi';
}
if (trim($_POST['nama']) == '') {
	$error[] = '- Nama harus diisi';
}
if (trim($_POST['tempat_lahir']) == '') {
	$error[] = '- Tempat Lahir harus diisi';
}
//dan seterusnya
 
if (isset($error)) {
	echo '<b>Error</b>: <br />'.implode('<br />', $error);
} else {
	/*
	jika data mau dimasukkan ke database,
	maka perintah SQL INSERT bisa ditulis di sini
	*/
 
	$data = '';
	foreach ($_POST as $k => $v) {
		$data .= "$k : $v<br />";
	}
	echo '<b>Form berhasil disubmit. Berikut ini data anda:</b>';
	echo '<br />';
	echo $data;
}
die();
?>

Setelah file proses.php ini berhasil dijalankan maka hasil outputnya akan ditampilkan pada element div yang berada pada file ajaxform.html

Untuk lebih jelasnya silakan lihat demo:
Demo Ajax Form

Dan anda bisa mendownload source code nya di sini:
jQuery AJAX Form (33359 downloads)

258 Comments

  1. Ogi says:

    weittss, dah jadi master e ajax sekarang:P

  2. rifqi says:

    master!, tambahi lg tutoriale. ok. sing akeh

  3. gawibowo says:

    weittss.. aku belum jadi master kok.. baru aja jadi sarjana :p

  4. Ajax? hmm, yummy .. :)

    jangan lupa check visualjquery.com, lumayan bermanfaat buat lookup referensi. Siapa tahu belum ada di bookmark kamu :D

    • pandu says:

      download aja jquery core api, bisa langsung diliat tanpa harus terkoneksi internet….

  5. gawibowo says:

    visualjquery? tentu saja sudah jadi tontonan sehari-hari :D

  6. Naya says:

    mas mau nanya nih…
    gmana yah cara bikin animasi loading ajax seperti di gmail..? yg di kanan atas warna merah itu lho
    thans :)

  7. gawibowo says:

    untuk bikin animasi loading seperti gmail, kurang lebih seperti ini:
    Buat di HTML untuk tulisan loading nya, dan secara default tidak ditampilkan:

    1
    
    <div id="loading" style="display:none">Loading...</div>

    Berikan CSS untuk tulisan loading tsb:

    1
    2
    3
    4
    5
    6
    7
    
    #loading {
    	position: fixed;
    	top: 0;
    	right: 0;
    	color: white;
    	background-color: red;
    }

    Dan script jQuery nya,

    1
    2
    3
    4
    5
    
    $('#loading').ajaxStart(function(){
    	$(this).show();
    }).ajaxStop(function(){
    	$(this).hide();
    });

    contohnya bisa dilihat di sini
    semoga membantu :)

    CATATAN:
    CSS position: fixed (supaya posisi nya tetap walaupun browser di scroll) tidak bisa berjalan di Internet Explorer 6
    anda bisa mencari solusi untuk ini di google

  8. Danie says:

    Mas Gatot kamu itu gak hanya manual berjalan, tapi manual ONLINE :D
    mas gatot, kpn ya nyusul pinternya..
    bosen aku oon terus!

  9. Paulo says:

    Good job. thanks.
    Paulo

  10. atoeyz says:

    mas mau minta source ajaxform.html yang lengkapnya dunk klo boleh!. klo boleh juga semuanya satu project yg Submit Form Dengan Ajax Menggunakan jQuery !!url buat donlot nya ya, klo ga kirim email :D

  11. gawibowo says:

    @atoeyz:
    boleh aja..
    link downloadnya sudah saya sediakan.
    silakan didownload sepuasnya…
    :D

  12. atoeyz says:

    halagh akhirnya,. hehe
    baru mau belajar ajax ni terimakasih ya :D

  13. dj says:

    TOP nih.. , thank nya…

  14. Rivai says:

    nice tutorial :)
    lagi belajar ajax juga nih.. :D

    izin bookmark ;p

  15. widi says:

    kalao saya pakai mootools
    ,apakah cara nya juga sama? masih bisa digunakan juga kah script ini?

  16. gawibowo says:

    kalo script php dan html nya masih bisa dipake, tapi javascript nya jelas berbeda..
    tutorial submit form menggunakan mootools bisa dilihat di sini

  17. kifli says:

    mas, mo numpang nanya dan mohon maaf sebelumnya kalo kepanjangan, maklum baru belajar javascript (eh udah kudu belajar jquery..hehe) untuk nambah satu row pada satu tabel.
    katakan ada kolom ‘id’ dan ‘nama’.
    saya maunya setiap diketik ‘id’, ‘nama’nya muncul secara oto lewat ajax.

    udah buat functionnya sih, dan bisa digunakan untuk form di luar tabel.
    tapi tidak bisa untuk row yang baru saya generate pake javascript itu.

    –sc untuk generate id/partnumber —
    function generatePartNum(index) {
    var idx = document.createElement(“input”);
    idx.type = “text”;
    idx.name = “partNum[ ]”;
    idx.id = “partNum[“+index+”]”;
    idx.size = “15”;
    idx.onkeyup = showData(this.value)
    return idx;
    }
    —————————

    sedang untuk namanya saya create element “span’

    —- sc element nama/span —-
    function generateItemName(index) {
    var itemName = document.createElement(“span”);
    itemName.name = “description”;
    itemName.id = “partHint”;
    itemName.size = “40”;

    return itemName;
    ———————————

    kemudian kedua element ini diappendChildkan ke element row, yang akan otomatis dijalanin dengan klik satu link.

    terus di bawah saya kasih script ajaxnya:

    ——– ajax ——-
    function showData(str) {
    if (str.length==0)
    {
    document.getElementById(“partHint”).innerHTML=””;
    return;
    }
    xmlHttp=GetXmlHttpObject()
    if (xmlHttp==null)
    {
    alert (“Browser does not support HTTP Request”)
    return
    }
    var url=”getpartnum.php”
    url=url+”?q=”+str
    url=url+”&sid=”+Math.random()
    xmlHttp.onreadystatechange=stateChanged
    xmlHttp.open(“GET”,url,true)
    xmlHttp.send(null)
    }

    function stateChanged() {

    if (xmlHttp.readyState==4 || xmlHttp.readyState==”complete”)
    {
    document.getElementById(“partHint”).innerHTML=xmlHttp.responseText
    }
    }

    ————————————

    nah waktu dijalanin, malah ada error kalau function showData(str) di ajaxnya ga jalan gara2 “undefined varible `str` “nya…

    kira2 apa saya memang harus belajar jquery yaaa.. hehe.

    makasih sebelumnya mas.

  18. gawibowo says:

    @kifli:
    maaf apakah ada demo yg online? atau bisa anda kirimkan source code lengkapnya termasuk file htmlnya? soalnya saya kurang bisa nangkep maksud script ini kalau hanya dari function2nya :D

  19. Kingstone says:

    Kalo misalnya tipe halamaya php (index.php) gmn ?

  20. gawibowo says:

    maksudnya file formnya menjadi index.php kan?
    ya tidak ada masalah mas, tetap jalan kok scriptnya :)

  21. Kingstone says:

    Ow ic2
    Sep deh.

    tak COba dolo y scriprtnya :)

  22. Janckos says:

    excelente tutorial!. felicitaciones.
    from mexico.

  23. gawibowo says:

    Hola Janckos .. gracias por visitar mi blog y gracias por tu comentario :)

  24. Ahmad says:

    hello,

    tutorial ini sangat bagus! tapi saya ada soalan, bolehkan .ajax() upload image dengan menggunakan tutorial ini? saya lihat “data: $(this).serialize(),” hanya boleh pass string variable ke php tetapi tidak pass filefield dengan betul ke php?

    ada cara lain untuk submit form yang boleh upload image sekali?

  25. gawibowo says:

    iya script ini masih ada kekurangannya yaitu tidak bisa menerima upload file

  26. Wow keren bgt, Ajax,JQuery..

    Musti dipelajari niy..
    Tapi susah bgt yach..
    Hhahaah

  27. rhio says:

    maz bagus turorial nya…

    maz mu nanya ni :
    1).gimana klu membuat seperti shoutbox gtuw???

    jadi ketika di submit langsung muncul hasil yang di submit dan data2 yang sudah ada sebelumnya…

    2). klu memanggil dirinya sendiri di perbolehkan gak mas di ajax.mis: di contoh code mas tersebut memanggil halaman ajaxform.html jadi di halam tersebut ada query tuk mnginputkan data ke database dan query untuk menampilkan??klu seperti ituw bisa gak menjawab nomor 1 saya ya mas???

    mav klu saya nanya sebelum di praktekin dulu,,bisnya terlanjur online…hehehe

    mav2….

  28. rhio says:

    cek….

    wah masih belum dibalaz comment nya…T_T

  29. gawibowo says:

    Sori mas rhio, baru bisa bales. Dari kemarin online tapi baru bisa buka blog skrng. :)

    1) Intinya sama, tinggal ditambahkan query utk insert ke database (pada file proses.php), kemudian fungsi saat success di ajax nya, bisa menggunakan prepend() utk menambahkan content di dlm #result tapi dengan menyisipkan di bagian awal (tidak menghilangkan seluruh isi #result), misalnya spt ini:
    $(‘#result’).prepend(data);

    2) Kalau file ini (ajaxform.html) memanggil diri sendiri, nanti datanya tidak bisa diproses, karena ini kan file html. Bisa saja direname jadi file php, tapi nanti akan lebih rumit daripada memanggil file terpisah.

  30. rhio says:

    mav nanya lagi maz masi belum ngerti…:(

    <<dudul ama programming T_T

    jdi di form1.html dirubah menjadi form1.php dan mempunyai query untuk menampilkan ia???terus data yang baru di submit di tampilin setelah data2 yang telah ditampilkan sebeblumnya ia???

    mav klu pertanyaan nya membingungkan….hehehe

    “$(’#result’).prepend(data);”
    skrip di atas tarohnya dmna maz????

  31. gawibowo says:

    saya mau bikin dulu contoh shoutbox nya.. biar nanti lebih gampang njelasinnya hehehe

  32. rhio says:

    mantap maz…ditunggu tutorialnya tentang shoutboxnya ia maz…hehehe

    sekalian klu bisa yang pake iframe ia maz…… :D

  33. Kemas Rahmat says:

    tutorial ajax yang mantap …

    trims…for u gawibowo

  34. […] adalah contoh cara mengimplementasikan tutorial Submit Form Dengan Ajax Menggunakan jQuery untuk membuat sebuah shoutbox sederhana. Setidaknya contoh ini bisa lebih berguna daripada hanya […]

  35. gawibowo says:

    @rhio:
    Kalo udah pake teknologi ajax, tidak perlu menggunakan iframe juga udah bisa mas. Silakan lihat artikel saya tentang shoutbox di sini

    @Kemas Rahmat:
    makasih juga sudah berkunjung :)

  36. Deen says:

    Mas Ari, salut padamu, thanks for the free tutorial,, :)

  37. Kemas Rahmat says:

    mas Ari, tutorial di page ini kan “menampilkan ke dalam sebuah div dengan id=”result” “.

    Nah, kalau kita ingin membuat pencabangan kondisi :
    1. tampilkan ke div dengan id=”result” bila nim dan nama belum diisi,
    2. tampilkan halaman baru (katakanlah students.html), bila nama, nim, tempat lahir sudah diisi.

    Caranya gimana ?
    trims mas …

  38. gawibowo says:

    @Kemas Rahmat
    1) secara default pesan error akan ditampilkan di div
    2) untuk menampilkan halaman baru, pada file proses.php jalankan script redirect ke halaman baru, misalnya seperti ini:

    echo "<script>window.location.href = 'students.html'</script>";
  39. rhio says:

    Alhamdulillah shoutboxnya dah jad…hehehe

    makasih tutor nya selalu maz ari….

    <<jd penghuni setia blog maz ari…hehehe

  40. rhio says:

    Maz mu nanya lagi ni….
    nih artikel yang telah maz beri
    Script AJAX Sederhana menggunakan jQuery

    gimana ya klo dalam file content.php pd file tersebut misal me link detail berita terus di dalam detail berita itu ada form komentar dari script tutorial ajax mas ini kug setelah saya jalanin gak bisa ia???
    ketika di submit langsung masuk ke file proses.php,fungsi ajax gak di jalankannya maz….

    gmna ia???mav klu pertanyaannya salah….:(

    mohon bantuannya…… :(

  41. rhio says:

    Mav ralat comment…. :(

    Maz mu nanya lagi ni….
    nih artikel yang telah maz beri
    Script AJAX Sederhana menggunakan jQuery

    gimana ya klo dalam file content.php pd file tersebut misal ada detail berita terus di dalam detail berita itu ada form komentar dari script tutorial ajax mas ini kug setelah saya jalanin gak bisa ia???
    ketika di submit langsung masuk ke file proses.php,fungsi ajax gak di jalankannya maz….

    gmna ia???mav klu pertanyaannya salah….:(

    mohon bantuan n penjelasannya…… :(

  42. rhio says:

    hiks,,belum ada tanggapan…..:(

  43. rhio says:

    cekk,,cekkk,,,cekkkk….

    belum ada tanggapan lgi……:(

  44. gawibowo says:

    Kyknya emang gak bisa mas rhio, ini kasusnya mirip dengan yg ini, solusinya utk yg kasus itu, scriptnya ditulis langsung di onclick tombolnya.
    Utk yg form ini mungkin bisa juga dengan memanggil fungsi dari onclick/onsubmit form yg diload lewat ajax

  45. kang igun says:

    mas minta tutornya klo misalkan nama itu null, nah loading errornya itu dibawah input nama, begitu juga kalo nim kosong.

    termasuk mau cek apakah nama dan nim itu sudah ada dengan database.

    bisa g dibuat model gitu ?

  46. Kemas Rahmat says:

    mas gawibowo …
    mau nanya lagi

    $(‘#nav1 a’).click(function() {
    var url = $(this).attr(‘href’);
    $(‘#main’).load(url);
    return false;
    });

    penggalan kode di atas akan menampilkan isi variabel url di div main ketika salah satu di div nav1 diklik.

    Nah, skrg pertanyaan saya : bagaimana kalau ketika kita mengklik di div nav1, kita bisa menampilkan isi variabel url di div main dan juga di div main2 ? apakah bisa satu aksi (klik di nav1) bisa menghasilkan 2 reaksi (url tampil di nav1 dan juga tampil di nav2 ?)

    trims ya mas atas pencerahannya.

  47. gawibowo says:

    Bisa mas Kemas Rahmat, tinggal menjalankan fungsi load() di masing2 div aja, jadi scriptnya nanti jadi kyk gini:

    $('#nav1 a').click(function() {
    	var url = $(this).attr('href');
    	$('#main').load(url);
    	$('#main2').load(url);
    	return false;
    });
  48. Kemas Rahmat says:

    pertanyaan berikutnya mas gawibowo,

    url1 = 1.php;
    url2 = 2.php;

    nah, kalau kita ingin ketika nav1 diklik, di main muncul url1 dan di main2 muncul url2 gimana caranya ?

    trims mas ari atas pencerahannya.

  49. gawibowo says:
    $('#nav1 a').click(function() {
    	$('#main').load('1.php');
    	$('#main2').load('2.php');
    	return false;
    });
  50. Kemas Rahmat says:

    ya trims mas ari ..

  51. Kemas Rahmat says:

    nanya lagi mas ari …

    misalnya di main.php kita sudah implementasiin code mas ari yang spt ini :

    $(‘#nav1 a’).click(function() {
    $(‘#main1’).load(‘1.php’);
    $(‘#main2’).load(‘2.php’);
    return false;
    });

    trus di main2 ditampilkan 3 menu. Setiap menu, kalau diklik maka akan memunculkan tampilan yang berbeda di main1. Nah, bagaimana caranya mas ari ?

    trims atas pencerahannya.

  52. gawibowo says:

    maksudnya di 2.php terdapat link ke main1 gitu ya?
    di sini: https://gawibowo.com/script-ajax-sederhana-menggunakan-jquery.htm#comment-146 ada contoh script kalau di dlm content nya terdapat link

  53. jmj says:

    TERUSLAH BERKARYA BIAR NTAR GAMPANG BELAJAR ….

  54. anton says:

    ada ym nya mas?

  55. satyaadriansyah says:

    mau bertanya neh mas gani..!
    misal saya memiliki sebuah proses hitung ips dan ipk para mahasiswa.
    Jika jumlah mhs aktif 12000 dan setiap mahasiswa ambil 10 matakuliah. jika melakukan proses ipk tentu memakan waktu yang lama.
    Bagaimana cara mengatasinya dengan bermain Ajax
    jika saya submit hitung dan background proses menampilkan secara NIM, dan berganti dengan NIM berikutnya apabila NIM tsb telah selesai diproses sampai 12000 mahasiswa.
    maaf panjang yah…

    • gawibowo says:

      ada contoh tampilan formnya mas? soalnya saya masih belum jelas maksud pertanyaannya :D

      • Satya Adrisnsyah says:

        Prodi :

        All</option
        Kedokteran Umum
        Kedokteran Gigi
        dst

        Pada saat dipilih prodi, maka div pada target berubah sesuai NIM yang diproses, proses IPS & IPK cukup membutuhkan waktu beberapa detik.
        Dan bagaimana agar supaya tidak ajaxnya tidak timeout..
        Tks

  56. Satya Adrisnsyah says:

    Prodi :

    All
    Kedokteran Umum
    Kedokteran Gigi
    dst…

    Pada saat dipilih prodi, maka div pada target berubah sesuai NIM yang diproses, proses IPS & IPK untuk 1 NIM cukup membutuhkan waktu beberapa detik.
    Dan bagaimana agar supaya tidak ajaxnya tidak timeout..
    Tks

    • gawibowo says:

      untuk mengatasi timeout, coba tambahkan waktu timeoutnya menggunakan script ini:

      $.ajaxSetup({
      	timeout: 60000
      });

      (dalam millisecond)

  57. d3d1n says:

    maaf mas…
    saya masih newbe ttg jquery..
    tolong pencerahannya dunk..
    klo loading -nya tampil pada saat halaman dibuka pertama kali, bisa tidak,,tolong bagi scriptnya donk..:d

    thx b4..

  58. d3d1n says:

    maaf mas…
    saya masih newbe ttg jquery..
    tolong pencerahannya dunk..
    klo loading -nya tampil pada saat halaman dibuka pertama kali, bisa tidak,,tolong bagi scriptnya donk..

    thx b4..

    • gawibowo says:

      animasi loading akan otomatis muncul selama ada proses ajax.
      supaya animasi loading juga muncul saat halaman dibuka pertama kali, maka anda juga harus menggunakan ajax saat pertama menampilkan halaman, misalnya menggunakan fungsi load()

  59. Eric Float says:

    hi ,
    this code nice worked but not refresh form !!
    i have any form with captcha & flood . captcha & flood worked when form refreshed . so not work with this . how to refresh form after send data or with submit refresh form If data succes . thanks regards

    • gawibowo says:

      you can use this code to reset form:

      document.formname.reset();

      or this code to completely refresh page (using javascript redirect) :

      window.location = 'yourpage.php';

      insert the code inside the “success” function

      • Eric float says:

        hi . this code not worked :(

        • gawibowo says:

          example (this will reset form if submit success):

          $('#myForm').submit(function() {
          	$.ajax({
          		type: 'POST',
          		url: $(this).attr('action'),
          		data: $(this).serialize(),
          		success: function(data) {
          			$('#result').html(data);
          			if (data.indexOf('berhasil') != -1) {
          				document.nameofyourform.reset();
          			}
          		}
          	});
          	return false;
          });

          and don’t forget to add name attribute to your form

          <form name="nameofyourform">
  60. L@PiC says:

    Oops. nice . i have 2 or 3 form in index page . with this method result all when submit form .
    example : form1 submit so form 2 and 3 loading and result . how to fix it ? each form submit loading same result and loadinh image . thanks

    • gawibowo says:

      if you don’t want to use same loading for every form, you shouldn’t use global event like ajaxStart() and ajaxStop() for the loading, because they will run for all ajax request on that page..
      try using local event like this:

      $('#myForm1').submit(function() {
      	$.ajax({
      		type: 'POST',
      		url: $(this).attr('action'),
      		data: $(this).serialize(),
      		beforeSend: function() {
      			$('#loading1').show();
      			$('#result1').hide();
      		},
      		success: function(data) {
      			$('#loading1').hide();
      			$('#result1').fadeIn('slow').html(data);
      		}
      	});
      	return false;
      });
  61. nubie says:

    Mau tanya ya pak …
    Pada proses.php jika dikasi pengecekan button value bagaimana ?

    Jadi di ajaxform.html ada 2 button , jika diklik button 1 , maka di proses.php akan lakukan proses 1 , jika yang diklik button 2 maka akan lakukan proses no 2.

    Terima kasih

    • gawibowo says:

      anda bisa menambahkan input hidden untuk menyimpan data yang nantinya ikut dikirimkan lewat form, misalnya seperti ini:

      <input type="hidden" id="aksi" name="aksi" />

      dan gunakan input bertipe button untuk tombol nya

      <input id="tombol1" type="button" value="Tombol 1" />
      <input id="tombol2" type="button" value="Tombol 2" />

      jadi saat tombol2 tsb diklik, kita akan mengeset input tambahan tadi dengan script spt ini:

      $('#tombol1').click(function() {
      	$('#aksi').val('aksi1');
      	$('#myForm').submit();
      });

      di proses.php nya nilai aksi tsb bisa kita ambil menggunakan $_POST[‘aksi’]

  62. Alexwebmaster says:

    Hello webmaster
    I would like to share with you a link to your site
    write me here preonrelt@mail.ru

  63. d3d1n says:

    Mau tanya lagi ya pak…
    klo submit from nya ke file yg berbeda gmn ya?
    misalkan :

    saya punya form di file : form.php
    kemudian POST ke file : proses.php
    dan tampil isi form ke file : isi.php

    gmn ya pak ? bisa tidak ?
    tolong bantuannya…
    terima kasih…

    • gawibowo says:

      kalau hasil dari submit nya tetap muncul di halaman form tsb, kita bisa meng include kan file isi.php dari dlm file proses.php
      tapi kalau hasil submit nya muncul di halaman baru, bukankah lebih mudah menggunakan form biasa saja (tanpa ajax) ?

  64. BBKING says:

    hi !
    I test this in my form . worked in FF / Opera but crash IE6 !!! why ? how to fix ?

  65. BBKING says:

    Hi . I test this in my form . worked in FF/Opera BUT CRASH IE6 !!!!!!!! Why ? How To Fix This ?

    • gawibowo says:

      I have tested this script on FF2, FF3, Opera, IE7 and IE6 and it works well.. no crash! do you have an online demo of your script? so i can check it

  66. arif says:

    mas maap klu dah pernah dibahas…
    klu di 1 page itu ada ajax yg untuk ngelink ke file lain dan juga ada untuk submit form itu bagaimana?
    intinya: dua tutorial mas ini digabungin jadi 1 page
    https://gawibowo.com/submit-form-dengan-ajax-menggunakan-jquery.htm
    https://gawibowo.com/script-ajax-sederhana-menggunakan-jquery.htm

    trims banyak mas… cos sy coba lom bisa nih.

    • gawibowo says:

      event di javascript hanya berlaku bagi elemen yang ada pada saat halaman diload..
      untuk elemen baru (misalnya elemen yg diload menggunakan ajax), anda harus me re-binding agar event nya bisa bekerja
      keterangan lebih lengkap bisa dilihat di halaman FAQ jQuery

  67. nubie says:

    Mas Gawibowo nya mana ya ? ^^

  68. windu says:

    mas- mas ada yg bisa bantu aku buat insert sqlnya? aku coba input ko ga masuk terus yah

  69. nubie says:

    Thanx mas , scriptnya sukses

  70. rhio says:

    mat malam mas,,kunjungan malam neh…hehehe

    mas bowo untuk tutorial ini klo pake browse file jalan gak??

    soalnya saya coba kog browse file nya gak bisa ya???

    mohon di balezz,,perlu bnget tuk KP…hiks :(

    • gawibowo says:

      Mengupload file menggunakan ajax sebenarnya tidak bisa. Tapi kita bisa mengakalinya menggunakan hidden iframe untuk memperoleh efek yang sama dengan ajax (tanpa merefresh seluruh halaman).
      Tekniknya yaitu dengan membuat sebuah iframe, kemudian pada form uploadnya tambahkan atribut target (diisi dengan nama iframe nya).
      Saya belum pernah mencoba sendiri, jadi anda bisa melihat tutorialnya di sini:
      Ajax File Upload
      atau ini:
      Ajax style file uploading using hidden iframe

  71. Rendra says:

    mas, misal form nya tu di load pake jQuery, & maunya diproses pake jQuery jg, gmn caranya? bisa ndak?

  72. icam says:

    mas, mau tanya neh gimana mengclear from yang sudah di submit thanx b4

  73. arta says:

    Thanks bos..

    Dari kemaren aku nyari trik buat nampilin sesuatu yang static akhirnya ketemu disini..

    O ya, trik itu kan bisa di kombinasikan dengan koneksi database ya??

  74. mbro says:

    kebetulan saya perlu ini. tengkyu ya…

    desain blognya bagus juga ;)

  75. irwan says:

    mas klo validasi untuk upload file gak mau divalidasi, hasilnya empty terus, Gimana solusinya ya ??? trima kasih sebelumnya

  76. rocky says:

    bisa bantu saya pak
    saya punya kasus
    apabila
    sa membuat satu 1 file html menggunakan kombinasi css,ajax,html
    file html ini sa beri nama :menu.html
    di menu.html merupakan file yg bertugas memanggil file-file html form untuk input data
    sa menggunakan metode container untuk menampung file-file form tersebut
    masalahnya adalah ketika pada saat mensubmit pada setiap form tersebut .. saya ingin kembali ke file menu.html
    mohon bantuannya

  77. rocky says:

    begini alurnya pak
    menu.html -> menu.html(include file form.html mengunakan ajax dan jquery) terus postnya ke proses_data.php

    keinginan saya
    selelah di submit bisa kembali ke menu.html(include file form.html mengunakan ajax dan jquery )plus tampilan data yang tersimpan

  78. rocky says:

    seperti contoh berikut
    untuk source code
    menu.html :

    jQuery Ajax

    $(function() {
    $(‘#loading’).ajaxStart(function(){
    $(this).fadeIn();
    }).ajaxStop(function(){
    $(this).fadeOut();
    });

    $(‘#menu a’).click(function() {
    var url = $(this).attr(‘href’);
    $(‘#container’).load(url);
    return false;
    });
    });

    * { font-family: Verdana, sans-serif; }
    div { font-size: 11px; }
    #container { line-height: 20px; width: 500px; height: 500px; margin: 20px 0; padding: 10px; border: 1px solid #999; }
    ul { padding: 0 }
    li { display: inline; margin: 0 3px; }
    #loading { position: absolute; top: 0; left: 0; color: white; background-color: red; padding: 5px 10px; font: 12px Arial; }

    Loading…
    jQuery Ajax

    Menu 1
    Menu 2
    Menu 3
    Menu 4

    Isi dari file content.php akan ditampilkan di sini

  79. rocky says:

    source code untuk
    content.php:

    But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?

    On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Tes Menu 4

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

  80. rocky says:

    ternyata bapak Gawi yang bikin sendiri :)
    ini Pak:
    https://gawibowo.com/demo/jquery/ajax1.html

    maksud saya dalam hal ini
    link menu mengarah ke form penginputan data
    misalnya
    menu1: mengarah ke file form input data barang
    menu2: mengarah ke file form input transaksi
    ya pada saat mensubmit untuk ke setiap form
    sa meninginkan kembali ke menu.html dengan posisi form yg bersangkutan
    maafkan pak kalo sa kurang jelas membahasakannya
    terima kasih

  81. rey says:

    mas, aku baru join nih…

    slam kenal, rey…

    nggak apa2 kan kalo baru kenal udah langsung nanya???
    :D

    mas , ada nggak fungsi refresh otomatis gunakan ajax tanpa harus menekan f5??
    maklum bru beljar AJAX… hehe

    sorry kepanjangan mas,,

    • gawibowo says:

      untuk merefresh browser ada 2 cara yaitu:

      1. menggunakan meta (diletakkan di dalam tag head), contoh di bawah ini akan merefresh halaman setiap 5 detik:

      <meta http-equiv="refresh" content="5">

      2. menggunakan javascript:

      window.location.reload();
  82. apashia says:

    saya membuat sebuah guestbook menggunakan captcha di buat menggunakan PHP dengan teknik Ajax. tapi kode captcha tidak berubah setiap kali form di submit, kecuali halaman di refresh. kenapa tuh?? bagaimana solusinya??

    • gawibowo says:

      misal captcha tsb ditampilkan menggunakan tag img seperti ini:

      <img id="image1" src="captcha.php" />

      maka kita bisa menambahkan script ini untuk merefresh gambar captcha tsb:

      document.getElementById('image1').src = 'captcha.php';
  83. spondbob says:

    mau nanya om,
    aku coba buat sebuah guestbook pake metode Submit Form ini. waktu aku coba di localhost, lancar. tapi ketika aku coba host di 000webhost, kok waktu aku klik submit kok ajax nya gak jalan? jadi langsung proses file proses.php, sehingga halaman reload. kenapa ya om?

    makasi..

    • gawibowo says:

      Bisa minta alamat guestbooknya yg di 000webhost? Bisa jadi karena halamannya blm selesai diload tapi tombol submitnya sudah ditekan.

    • gawibowo says:

      sudah saya cek mas, dan ajaxnya berhasil jalan

      • spondbob says:

        oh iya om,
        udah bisa ternyata :D
        kok bisa ya?jadi bingung. soalnya waktu aku coba gak jalan ajaxnya, padahal udah aku coba ber kali-kali, bahkan dengan browser yang berbeda. makasih banyak deh om, trutama buat tutorialnya. sangat bermanfaat buat aku. semoga ilmu yg dah di bagi bermanfaat buat kemajuan IT di Indonesia.

  84. arul says:

    hohoho, mantabs gan…! thanks for share, bisa jadi inspirasi ne….

  85. darun says:

    mas mau nanya lagi,,sebelumnya makasih ya atas tanggapan atas jawabannya..

    gini mas sckript di bawah ini kan,,akan menampilkan tulisan loading di id=module gimana mas supaya loadingnya itu fade in dan fade out kayak seperti diatas menggunkan fungsi ajaxstart dan ajaxstop,,jadi tulisan loadingnya itu fadein dan fadeout..

    $(‘#module’).html(‘Loading…’);

    mohon tanggapannya lagi ya mas…

  86. darun says:

    mas tadi script diatas lengkapnya ini :
    $('#module').html('Loading...');
    $('#module').load("rhio.php");

    jadi saya pengen didalam div module ketika halaman web di buka meload halaman rhio.php dan ketika proses munculnya tulisan loadingnya ketika sudah selesai tulisannya loading meredup dan kemudian hilang digantikan dengan tulisan yang ada di rhio.php …

    gtu mas,,mav ya klu bahasanya ribet,,wong deso mas..hehehe

  87. chan says:

    mas tanya donk.

    success: function(data) {
    $(‘#result’).html(data);
    }

    yang bagian ini kenapa tidak jalan di IE7 ya?
    datanya tidak bisa muncul.mesti refresh baru bisa muncul

  88. newbie says:

    wah2…nice2 ini, bagus untuk dipelajari…

  89. rey says:

    mas minta bantuan donk, :D kalo mau submit data & hasilnya kesimpan di db dan jga hasilnya di tampilin di page formnya itu sendiri gimana mas… ??? please rep…

  90. rey says:

    sorry mas :D ada tambahan,, hasil dari form langsung di tampilin page form itu tanpa harus refresh page form …

  91. bram says:

    aku dah coba ni mas yang tutorial submit form ini, waktu aku jalankan di localhost waktu tak submit dalam kadaan kosong kog yang nampil malah

    Error:
    ‘.implode(‘
    ‘, $error); } else { /* jika data mau dimasukkan ke database, maka perintah SQL INSERT bisa ditulis di sini */ echo ‘Form berhasil disubmit. Berikut ini data anda:’; echo ‘
    ‘; foreach ($_POST as $k => $v) { $data .= “$k : $v
    “; } echo $data; } die(); ?>

    mohon penjelasanya, terima kasih sebelumnya

  92. herman says:

    klo ditambah fungsi jGrowl tambah ship nih…

    $(‘#myForm’).submit(function() {
    $.ajax({
    type: ‘POST’,
    url: $(this).attr(‘action’),
    data: $(this).serialize(),
    success: function(data) {
    $.jGrowl(data);
    }

    http://stanlemon.net/projects/jgrowl.html

  93. huri says:

    dimana saya bisa download jquery core api? ud saya googling tp g ktemu.

  94. juraganminyak says:

    halo juragan,..

    kan itu contoh kodingan anda, saya donlot, dan saya jalanin di server lokal pc saya..

    naah, kalo formnya udah di submit..
    muncul tambahan bgini..

    Notice: Undefined variable: error in C:\\wamp\\www\\jquery-ajax-form\\proses.php on line 15
    Form berhasil disubmit. Berikut ini data anda:

    Notice: Undefined variable: data in C:\\wamp\\www\\jquery-ajax-form\\proses.php on line 25

    gimana yah caranya biar notice -nya ilang dan munculnya sesuai dengan demo yang ada di website juragan.. :)

  95. ahmad says:

    hahaha

  96. Terjadi masalah, jika digabungkan dengan TinyMce.

    value pada textarea tidak muncul, namun bila disubmit untuk kedua kali, baru muncul.

    saya dah cari solusi:
    http://old.nabble.com/Problem-With-jquery-form-plugin-and-tinymce-td14788650s27240.html

    tapi masih belum berhasil. tolongin dong…

  97. agustri says:

    numpang download mas…

    terimakasih dan salam kenal.

  98. ipang says:

    gan…perintah masukkin ke SQL nya bagaimana..?

  99. damienomen says:

    Makasih mas scriptnya.. :)

    mas, klo buat upload file gmn?
    saya coba pake script diatas tp file nya ga mau ke upload..

    Thanks Before.. :)

  100. yalin says:

    gan tolong dibantu gan…
    ana gy coba pake jquery ui dialog bgiframe…
    udah bisa panggil bgiframe target… cuma belum bisa proses form yang ada di bgiframe tersebut dengan tombol submit yang bukan di bgiframe tapi tombol submit di jquery ui dialog…kalo pakai tombol submit di dlm bgiframe proses submitnya sih ok..tolong dong gan…

  101. adam says:

    mas klo script diatas hasil inputnya masuk ke email gmn ya..beserta cek format email(!eregi)

    terima kasih bantuannya

  102. ryanto says:

    mas, nanya dunk…
    kalo mo pake’ tutorial diatas buat nampilin hasil query dari database dan menambahkan fungsi edit,delete untuk masing2 record gmn ya ?
    Thanks b4….

  103. xtin says:

    woooww artikelnya keren. salam kenal boss

  104. ardianz says:

    ijin sedot ya mas., tengkyu

  105. wiyono says:

    mas, ini benar-benar mak nyuz dan mantap…
    tapi ada pertanyaan nih karena aku masih nolll.. bunaget…

    aku kan mau itu form jadi kontak, bukan data…

    truz dimana aku naruh alamat e-mail aku, jika ada yang ngisi…

    tolong ya… penting bunaget… sekalian scriptnya…

    teng yu…

    salam
    wiyono

    • gawibowo says:

      di php ada fungsi untuk mengirimkan email. contoh sederhananya seperti ini:

      mail('example@example.com', 'subjek', 'isi pesan');

      anda bisa menyisipkan script ini pada file proses.php

  106. wiyono says:

    tapi gak pake sql (pusign)

  107. wiyono says:

    mas kalau form validation pake border merah, gitu gimana buatnya?
    tolong ya…
    tengyu.

  108. wiyono says:

    mas itu kalau email validationnya harus semua, misalnya tanpa @ tetap bisa di tembus…
    gimana buatnya???

  109. Djazman85 says:

    thank you…. xixixixi 3hari bolak balik kesini mas….

    Mas, bikin juga form submit kyk di facebook.
    Apa yang anda pikirkan? klw di klik textarea nya membesar dan tulisan nya hilang. klw di kursor dilepas lagi kembali seperti semula…

  110. newbie says:

    mas mau tanya,, yang mas bikin ini kan, kalo isian formnya masih ada yang salah akan muncul peringatan, dan tombol submitnya masih ada…

    nah kalo misalnya data udh valid dan berhasil disubmit, tapi form isian dan tombol submitnya hilang gimana ya mas…

    jadi nanti cuma ada peringatan “tambah data berhasil” tapi isian form dan tombol submit hilang…

    mohon dijawab’y mas.. :)

  111. pulsa says:

    Submit Form Dengan Ajax Menggunakan jQuery
    yang aku cari selama ini akhirnya ketemu makasih ya, saya utak – atik nanti.

  112. ari says:

    makasih sebelumnya….

    tapi saya masukin perintah header(\"location:…\&quot;) kok perintah hederna gak kerja ya,,,??

    mhon pncerahan na

    makasih

  113. fadli says:

    trims mas ilmunya. saya memang sedang cari ini untuk sekolah saya :)

    tapi, sewaktu saya coba di localhost kok muncul error ini ya kalau diisi lengkap? padahal kalau ga diisi dan muncul keterangan Error, hal ini ga muncul:

    Notice: Undefined variable: error in D:\WAMP\www\formulir\proses.php on line 14
    Form berhasil disubmit. Berikut ini data anda:

    Notice: Undefined variable: data in D:\WAMP\www\formulir\proses.php on line 24

  114. fadli says:

    terima kasih banyak mas. sudah sukses sekarang! :)

  115. ari says:

    if (!$eror){
    $msk=mysql_query(\"INSERT INTO alumni VALUES(\’$id\’,\’\’,\’\’,\’$nama\’,\’$sex\’,\’$email\’,\’$ttl\’,\’$stat\’,\’$thn_lls\’,\’$ipk\’,\’$kerja\’,\’$hp\’,\’$gaji\’,\’$almt\’)\",$link);

    if($msk)
    {
    header(\"location: buat_ses.php?id=$id&nma=$nama&thn=$thn_lls\&quot;);
    }

    }
    else {echo \'<b>Error</b>: <br />\’.implode(\'<br />\’, $eror);
    }

    scripta saya kurang lebih begtu??

    tp ttp ga mw nglempar ke location headerna??

  116. eky adhiputra says:

    mas, shoutboxnya saya mau kayak mas, d paging gtu,

    max 5 ada next ma prev ny gmn ya ??

    maskih

  117. peter says:

    mas kalo buat preload image gimana mas?

  118. peter says:

    sama kalo mau buat loading image waktu proses upload

  119. Taufik says:

    Gan, kok hasilnya ngga tampil di halaman yang sama yach, ane coba munculnya jadi halaman baru….mohon pencerahan gan, terima kasih buat coding nya

  120. Heri Hehe says:

    Mas, mau nanya. kan saya coba tambahin button untuk close pesan yang ditampilkan setelah form disubmit.

    trus saya tambahin:
    $(\’.close\’).click(function(){$(\’#result\’).empty();});

    kenapa nggak bisa close?

    saya coba taruh button closenya di elemen di luar #result bisa. kenapa itu mas?

    • afrijayaps says:

      iya mas, gimana caranya nambahin tombol close?
      pengennya juga begitu,
      klo punya aku tak kasih gini.

      $(‘#closesignup’).click(
      function(){
      $(‘#result’).fadeOut(‘slow’)
      }
      );

      tpi tetep g mau close.

      • gawibowo says:

        coba pake live(), misalnya:

        $('#closesignup').live('click', function() {
        	$('#result').fadeOut('slow');
        });
  121. dis says:

    mas, mungkin agak beda dr yg lain nih pertanyaannya.. Aku liat mas kyknya bisa bantu aku deh..
    Kalo mau buat dropdown trus ketika klik baru nampil form yg dipilh caranya gmn mas?
    Misal, di drop down itu ada angka 1-6, kalo kita pilih 1 keluar 1 form input tanggal, kalo pilih 2 kluar 2 form input tanggal dst. Mohon bimbingannya mas

  122. ei says:

    salam kenal. .
    numpang tanya mas,validasi supaya tidak terjadi duplikasi data gimana ya?
    kalo nginputin kode yang sama nanti akan muncul peringatan ” KODE SUDAH ADA SILAHKAN ISI KODE YG LAIN”
    mohon bantuannya..

  123. OpenBSD says:

    Hi,
    This Nice worked ! but how to hide form after succese message .
    Example :
    if data false show error with your method but if data true and succese else hide form and show succese message

    thanks

  124. rieskha says:

    pak,mau tanya ni,
    kalu file proses.php yg buat validasi itu dijadiin satu sama file form.html nya bisa g ?

    jadi action dari form.html nya itu ke file lain tapi script validasinya di form html.itu sendiri

    mksih pak

  125. yogan says:

    salm kenal
    klo tanpa harus submit form,tp langsung di load,gmn scriptnya mas??
    misalkan saja proses.php itu adalah script yg berisi select sata from databse..

  126. uut3 says:

    mas punya tutorial untuk pemula ajax ngga?
    maklum buta ajax nie…
    eheheheheheh…
    thanks

  127. Arya says:

    Permisi mas,
    saya mau tanya, kalau fungsi ini kita terapkan di WP bisa tidak ya? [maaf saya pemula] misalnya di menu pages ada menu masukan info, dengan form isian tertentu. Lalu ketika sudah mengisi, data tersebut masuk ke dalam bagian-bagian kategori di side bar.
    Bisa tidak ya mas?
    Thanks a lot….

  128. Arya says:

    maaf, tambah lagi nih mas, kalau bisa bagaimana caranya?
    Thanks

  129. Balabon says:

    Hi, Your plugins is cool. But i have two question!?
    1 – this not worked in ie8! how to work ?
    2 – how to auto reset (clean) form after data success?

    Thanks ser.
    Best regards.

  130. nice says:

    nice share mas..

  131. dodi says:

    mas wibowo, menu ini kok kalo dibuka di tab baru dengan klik kanan > Open Link in New Tab, yang kebuka cuma halaman contentnya. gimana caranya supaya halaman di tab baru tersebut tetap menampilkan menu ?

  132. Mario says:

    Mas Wibowo anak metal ya?
    captcha nya mantep mas \m/

  133. andika says:

    mas script ini paka core engine jquery 1.2.3, tapi ga jalan kalo kita pakai core engine jquery terbaru, apa benar begitu

  134. Best Gadgets says:

    Mantab Master Gatot :D

  135. Si Bandel says:

    mas,
    koq loading image-nya ga muncul yah ..??
    saya sudah coba keduanya, baik untuk global event maupun local event.
    apa ada yang salah di settingan Apache atau PHP nya ???
    Please help A.S.A.P

  136. Si Bandel says:

    mas,
    apa karena saya pake jQuery versi terbaru, versi 1.5.1 ???

  137. pulzzahut says:

    thank you mas . artikel nya sangat membantu sekali..
    sudah membimbing saya menemukan solusi error pada script codeigniter saya sbb :
    function send_form(formObj,action,responseDIV)
    {
    $.ajax({
    url: site+”/”+action,
    data: $(formObj.elements).serialize(),
    success: function(response){
    $(responseDIV).html(response);
    },
    type: “post”,
    dataType: “html”
    });
    return false;
    }
    setelah saya akses dengan javascript: send_form(document.backendlink_form, “menusystemtrx/do_updatelink_menubackend”, “#reg_grid_menusystem”);
    hasil submit pertama berhasil. namun jika DOM direload dengan div lain dan kita kembali dan submit ulang.. maka timbul error data yang disubmit oleh form tidak ada sama sekali. padahal submit pertama berhasil.
    kemudian script saya ganti dengan :
    $(‘#backendlink_form’).submit(function() {
    $.ajax({
    type: ‘POST’,
    url: $(this).attr(‘action’),
    data: $(this).serialize(),
    success: function(data) {
    alert(‘succes’);
    $(‘#reg_grid_menusystem’).html(data);
    }
    })
    return false;
    });
    $(‘#backendlink_form’).submit();
    maka program berjalan dengan baik.. :)
    jadi penyebab error adalah referen “document.backendlink_form”… yg dlm penggunaannya lebih baik saran sy jangan digunakan. cheer

  138. udah tak bookmark gan, mantap tuh infonya!!

  139. udajon says:

    link donwloadnya ngak bisa lagi ya mas

  140. Gak jangka di sini banyak ilmu ajax, izin numpang belajar om buat pelajaran kuliah..

  141. Gak bisa download pak, uplod lagi donk pak, pleaseee…

  142. Tutorialnya keren, mantaaaap abis, bookmark dulu ah..

  143. Tutorialnya bagus… :D

    [ASK]

    serialize untuk mengambil data querystring…
    Nah pertanyaan saya, bagaimana jika ada data file upload pada submit form tersebut… :D
    cara ngambilnya bagaimana?
    Terimakasih…
    ^_^

  144. Athallah says:

    wah keren, ini yg dicari2 :-)

    Mas mo ty kalo event pd combo gmn ya ? misalnya sy click combo1 (kode barang), maka nama barang satuan dan harga muncul otomatis ? kmudian event penjumlahan pada textbox gmn ya ? misalnya saat sy isi qty, maka jumlah harga terhitung otomatis.

    Terima kasih

  145. Onyx says:

    Thanks Bro.. nice script.. I love it and I will apply to my website. GBU

  146. Rizal says:

    bermanfaat banget, terimakasih atas artikel nya jadi tahu cara membuat form dengan ajax

  147. true blood says:

    i love it thanks for this query and support and i also love this true blood season 4

  148. dwesty says:

    mas nanya dong..
    kalo mo jumlahin data otomatis gimana?
    kalo kodingnya kayak gini
    <code>
    \'<table class=\"records\">\’
    + \'<tr>\’
    + \'<td><div id=\"\’+count+\’\">\’ + count + \'</div></td>\’
    + \'<td>Barang</td>\’
    + \'<td>: <select id=\"barang\’+ count +\’\" name=\"barang\’+ count +\’\" class=\"barang\">\’
    + \'<option value=0 selected harga_jual=\"\">Pilih Barang</option>\’
    <?php $link = @mysql_connect(\’localhost\’,\’root\’,\’\’);
    @mysql_select_db(\’dbdistro\’,$link); $query=mysql_query(\’SELECT * FROM barang \’);
    while($r=mysql_fetch_array($query)) {?>
    + \'<option value=\"<? echo $r[id_barang]?> \" harga_jual=\"<? echo $r[harga_jual]?>\"><? echo $r[nama_barang] ?></option>\’
    <? } ?>
    + \'</select></td></tr>\’
    + \'<tr><td></td><td>Harga Jual</td>\’
    + \'<td>: <input id=\"harga_jual\’+ count +\’\" class=\"harga_jual\" name=\"harga_jual\’+ count +\’\" readonly=\"readonly\" size=\"13\" onfocus=\"hitung()\" onblur=\"stop()\"></td></tr>\’
    + \'<tr><td></td><td>Jumlah</td>\’
    + \'<td>: <input id=\"jumlah\’+ count +\’\" name=\"jumlah\’+ count +\’\" type=\"text\" size=\"10\" onfocus=\"hitung()\" onblur=\"stop()\"></td></tr>\’
    + \'<tr><td></td><td>Diskon</td>\’
    + \'<td>: <input id=\"diskon\’+ count +\’\" name=\"diskon\’+ count +\’\" type=\"text\" size=\"10\" onfocus=\"hitung()\" onblur=\"stop()\"> %</td></tr>\’
    + \'<tr><td></td><td>Sub Total</td>\’
    + \'<td>: <input id=\"harga_jual\’+ count +\’\" class=\"sub_total\" name=\"sub_total\’+ count +\’\" readonly=\"readonly\" size=\"13\"onfocus=\"hitung()\" onblur=\"stop()\"></td</tr>\’
    + \'<tr><td></td><td><a class=\"remove_item\" href=\"#\">Hapus</a>\’
    + \'<input id=\"rows\’+ count +\’\" name=\"rows[]\" value=\"\’+ count +\’\" type=\"hidden\"></td></tr>\’
    + \'</table>\’

    $(\".barang\&quot;).live(\’change\’, function(){
    var idx = $(\".barang\&quot;).index($(this));
    var txt = $(\"option:selected\", this).attr(\’harga_jual\’);
    $(\".harga_jual\&quot;).eq(idx).val(txt);
    });

    $(\".remove_item\&quot;).live(\’click\’, function (ev) {
    if (ev.type == \’click\’){
    $(this).parents(\".records\&quot;).fadeOut();
    $(this).parents(\".records\&quot;).remove();
    }
    });

    $(\".hitung\&quot;).live(\’change\’, function(){
    interval = setInterval(\"sub_total()\",10);
    });

    $(\".sub_total\&quot;).live(\’change\’, function(){
    var harga_jual = $(\’#harga_jual\’).val()
    var diskon = $(\’#diskon\’).val()
    var jumlah = $(\’#jumlah\’).val()
    $(\’#sub_total\’).val() = (harga_jual – (harga_jual * (diskon / 100))) * jumlah;
    });

    $(\".stop\&quot;).live(\’change\’, function(){
    clearInterval(interval);
    }); </code>
    sub_totalnya ga keluar….
    sebelumnya penulisan fungsi hitung, sub_total sama stopnya udah bener blm soalnya saya masih ga ngerti jquery
    terimakasih…

  149. Thank you for letting me know this information, I’ll hold this information.

  150. Agung says:

    Bagus mas tutorialnya. kalau bisa ditambahkan untuk validasi inputan datanya juga. Misalnya kalau angka ya hanya bisa diisi angka gitu mas.

  151. yudi newbie says:

    wah…artikel yang menarik//
    aya masih buram tentang ajax..saya mwtanya. bagaimana caranya menggunakan ajax untuk menampilkan shoutbox yg terdaftar..

  152. cheap hats says:

    For people who are ready for outing in the summer, new era hats are always the must-have accessory.We offer a cheap red bull hats with high quality buy desinger cheap hats with good service

  153. tamz says:

    Thx ya om infonya!

    :D

  154. nike shoes says:

    Welcome to my shop. The store mainly engaged in the import and export trade in one of the shops, have all kinds of sports shoes, adidas sneakers include Nike sneakers, puma sneakers, etc, specialized in manufacturing all kinds of hat, scarf and gloves, garments, textile products, but also a kind of news handicraft, act the role of article etc,Log in,please!

  155. lucky tip says:

    Ajax new technology is useful for big content pages where static part is consistent and only a few dynamic content must be refreshed.

  156. nanya says:

    Mas mau nany.. kalo saya buat form tetapi actionn ya tidak ke proses.php melainkan ke dalam file tersebut, itu bagaimana ya ?? saya sudah coba tapi tidak berhasill…

    yang ini :

    terima kasih.. oh iya website nya mantap… semoga di balas karena ini komentar pertama saya. hohoho.

  157. eddy says:

    mas mw tnya multiple add row dengan ajax gmn caranya?kl ada sourcenya lebih baik. maklum newbie mas, thx mas

  158. slavara says:

    Mas, kan saya lagi buat web, terus dihalaman index.php saya pake\’in fungsi ajax untuk manggil sub2 halaman, dan fungsi ajaxnya berjalan normal, nah terus di salah satu sub halaman saya pake\’in lagi fungsi ajax yang seperti di index.php, tapi kenapa yang di sub halaman ajaxnya tidak berfungsi..

    mohon pencerahannya Mas… thanks

  159. heaven doors says:

    Ajax is really nice, specially when the hosting is not from the first ones.

  160. virgi says:

    mas gawi qo pas saya download n coba malah muncul error ky gni y? padahal blm saya oprek..
    mohon pencerahannya soalnya sy msh belajar..
    ” Error:
    ‘.implode(‘
    ‘, $error); } else { /* jika data mau dimasukkan ke database, maka perintah SQL INSERT bisa ditulis di sini */ $data = ”; foreach ($_POST as $k => $v) { $data .= ‘$k : $v
    ‘; } echo ‘Form berhasil disubmit. Berikut ini data anda:
    ‘; echo $data; } die(); ?> “

  161. amca© says:

    simple tapi bermanfaat buat kemudahan user dalam berinteraksi dengan website

  162. Titis Kaifa says:

    Thanks mas. Keren ya, sangat signifikan perbedaan (dalam kemudahan) ketika menggunakan ajax biasa sama aja Jquery. Salam kenal :)

  163. hanung says:

    terima kasih tutorialnya. sdah di cba dan berhasil..tp misal ingin nambahin foto bgmana ya mas. jadi form yang ada, di tambahkan foto kedalam databasny, supaya nti ketika ditampilkan ada foto beserta datanya?

  164. wawan says:

    if (data.indexOf(\'<b>berhasil</b>\’) != -1)

    Mas, nilai berhasil itu diambil dari mana ?

  165. sigit says:

    terimakasih pak atas tutorialnya.
    saya pemula belajar php dan ajax
    saya coba download sourcenya.
    saya coba ada error nya untuk

    ini pesan errornya

    Error:
    ‘.implode(‘
    ‘, $error); } else { /* jika data mau dimasukkan ke database, maka perintah SQL INSERT bisa ditulis di sini */ $data = ”; foreach ($_POST as $k => $v) { $data .= “$k : $v
    “; } echo ‘Form berhasil disubmit. Berikut ini data anda:
    ‘; echo $data; } die(); ?>

    gimana cara benerinnya. thx u

  166. Sugeri says:

    Mas Garibowo, nuhun scriptnya. Keren banget… Tapi Mas, saya coba pake jQuery 1.4 – 1.7 kok ga bisa yah. Bisanya cuma pake 1.3 ke bawah. apa ada yang salah yah?
    Nuhun….

  167. gudangrusak says:

    Waduuhh.. g dibahas nih cara upload file pake ajax, helep dong gan.. ato minimal bisa baca enctype di form..

  168. Untuk pemakaian di jquery 1.7.1 tidak bisa berjalan.

  169. klw , validasi nya muncul pada setiap form bukan di atas bagaimana crnya ya mas , ;)
    \
    ths before

  170. edi says:

    terima kasih mas,, membantu banget saya belajar,, hehehe

  171. Terima kasih manual jquerynya, Insya Allah bermanfaat untuk saya mengembangkan web saya di http://www.bajubatikonline.com

  172. khari says:

    Terimakasih infonya. Sangat berguna dan membantu :D

  173. bambang says:

    thx… sharingnya :)

  174. kholiq says:

    Ketika saya panggil dg http://localhost/jquery/modulform/ajaxform.html berhasil. tetapi coba sy panggil http://localhost/jquery/media.php?module=form. Saya coba tidak berhasil tampil.
    Saya mencoba membuat menjadi permodul seperti modul sms lokomedia. Mohon perbaikannya.

  175. asanoer says:

    Wah keren Gan,,,aku sudah coba n sedikit ditambah loggernya,,hehehe

    Silahkan click saja:

    CONTAH AJAX FORM INI

  176. AJUN says:

    Mas Gatot, saya mau tanya. Saya coba masukan datepicker di formnya tapi kok gak bisa ya mas? untuk datepickernya saya pakai jQuery 1.4-2

    Mohon penjelasan dan solusinya supaya di contoh form mas Gatot, datepicker bisa muncul..terimakasih.

  177. cokz says:

    Mas, gw sudah berhasil dengan skrip tersebut, tpi pas saya tambah field untuk gambar kok gambar nya gk masuk ke database ya?
    padahal data yg lain bisa ke insert kedatabase…

    klo misalnya biar field image nya jga ke insert ke database gmana ya mas skrip nya?

  178. addin says:

    pada contoh dia atas menggunakan js versi jquery-1.2.3.pack.js ketika saya rubah dengan js saya versi jquery-1.7.2.min.js kok tdk bisa kenapa ya?

  179. Mantap….very nice..

  180. rizal says:

    klo auto post gmn gan?
    jd kita tak perlu klik button tapi dengan timer automatik post ke url tertentu.

  181. cimenk says:

    ijin sedot gan,,
    bwt tgas WEB ane,,,
    hahahaaa,,

  182. semmy says:

    Thax mas, sangat membantu tutorialnya :)
    Saya punya kasus begini; jika kita select pekerjaan PNS maka akan muncul form input baru untuk ngisi keterangannya namun jika kita select pekerjaan petani maka form tersebut tidak usah dimunculkan. mohon pencerahannya jika menggunakan ajax or jquery.
    Thax :)

  183. wahyudi says:

    terima kasiih

  184. bg bowo, form proses untuk tampilin ajax nya engga ada? padahal kan untuk tampilin nya harus ada proses?

  185. asanoer says:

    Boleh tau kode containernya? Mungkin ada yang salah saat extraksi get-nya?

    Thanks asanoer.com

  186. budyk_ir says:

    Sakti gan…..

    mantaap…

    ada contoh real live chat gk gan pake ajax?

  187. Makasih om… sangat membantu saya yang masih nubi nih… :)
    btw, ajarin cara bikin theme buat di pajang di themeforest.net dong :D

  188. Samsury says:

    Wah keren mas..layak dicoba

  189. Ade says:

    mas kalau cara mengirim email ke 2 atau lebih email nulisnya gimana ya??

    <pre>mail(\’example1@domain.com;example2@domain.com\’, \’subjeck\’, \’isi pesan\’);</pre>

    seperti itukah??

  190. franata says:

    thx gan
    tutorialnya sangat membantu sekali

  191. Okeshare says:

    makasih nih mas… membantu banget nih artikelnya

  192. ziedan says:

    Kenapa perintah
    if (data.indexOf(\’berhasil\’) != -1) {
    document.nameofyourform.reset();
    }
    tidak jalan ya ??

  193. tutorial89 says:

    masih bingung. liatin kode2nya :(

  194. cepi cahyana says:

    klw resset data dari formnya gimana master?

  195. nanangsunardi says:

    mas, kalo submit form nya pakai parameter, gimana kira-kira kode nya mas?
    misal, saya punya form yang jika di proses akan menampilkan data sesuai apa yang dipilih di form tadi, seleksi gitu mas.

  196. NORYS says:

    gan mau na.x hal yg mendasar nihh, soalx masih newbe -_-
    apa ajax jquery sama dengan ajax framework . . ?

  197. tini says:

    Harus baca dengan teliti, dan terima kasih informasinya

  198. hanah says:

    thank’s ya atas infonya, meskipun masih newbie nih saya

  199. Berantakan says:

    Makasih scriptnya gan,membantu sekali

  200. Budiono says:

    Thanks artikelnya gan

  201. AKBAR WIGUNA says:

    Terimakasih untuk sharing nya sangat membantu sekali menambah wawasan

  202. ZUHAIR AKBAR says:

    udah buat functionnya sih, dan bisa digunakan untuk form di luar tabel.
    tapi tidak bisa untuk row yang baru saya generate pake javascript itu.

  203. AKBAR says:

    Terimakasih bosku postingan nya sangat bermanfaat sekali ????
    Saya tunggu update artikel bermanfaat lain nya

  204. aa says:

    bang mau tanya, kenapa yah saya ketika submit result nya beralih ke halaman lain bukan di halaman yang sama?

  205. I used to be recommended this web site by my cousin. I am now not certain whether or not this publish is written by means of him as no one else understand such certain about my trouble. You are incredible! Thanks!

  206. Rosario Fort says:

    Un concept unique au coeur d’un club libertin.

  207. […] Submit Form Dengan AJAX Menggunakan jQuery […]

Leave a Reply to IzulCyberCafe Cancel reply

Your email address will not be published. Required fields are marked *