Membuat AJAX form submit dengan jQuery

// February 27th, 2010 // 33 Comments // Life

jQuery merupakan framework javascript yang memudahkan developer dalam membuat aplikasinya. Seperti dalam contoh berikut akan saya jelaskan cara membuat form submit secara AJAX dengan menggunakan jQuery hanya dalam beberapa baris kode.

AJAX form ini bersifat unobstructive, sehingga jika tidak ada javascript di browser pengguna, form akan tetap bisa tersimpan.

Yang diperlukan

Anda sudah memiliki sebuah script html form dan sebuah handler dari form, sebut saja namanya proses.php

<form action="proses.php" method="post"> id="ajax_form"
	<div>
		Nama:
	</div>
	<div>
		<input type="text" name="nama"/>
	</div>
	<br style="clear:both;"/>

	<div>
		Jenis Kelamin:
	</div>
	<div>
		<input type="radio" name="gender" value="pria"/> Pria
		<input type="radio" name="gender" value="wanita"/> Wanita
	</div>
	<br style="clear:both;"/>

	<div>
		Pekerjaan:
	</div>
	<div>
		<select name="pekerjaan">
			<option value="pelajar">Pelajar</option>
			<option value="pns">PNS</option>
			<option value="Swasta">Swasta</option>
		</select>
	</div>
	<br style="clear:both;"/>

	<div>
		Komentar:
	</div>
	<div>
		<textarea name="komentar"></textarea>
	</div>
	<br style="clear:both;"/>

	<div>
		<input type="submit" value="Kirim"/>
	</div>

</form>

Form ini sudah jalan normal, hanya saja, anda ingin membuatnya menjadi AJAXMisalnya anda sudah punya form post biasa, yang akan diproses oleh script php proses.php

Membuat form jQuery AJAX

Pertama yang dilakukan, anda harus meng-include kan file jQuery di dalam document anda

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>

Disini saya menggunakan file jQuery dari google repository. Anda dapat mendownloadnya dan meletakkannya di folder kerja anda, pastikan pathnya tepat.

Yang kedua, anda harus memasukkan script enkapsulasi berikut. Script berikut akan menjalankan script jQuery pada saat document ready

jQuery(function($){
     // kode disini
})

Ketiga, masukkan script berikut ini ke script enkapsulasi diatas

$("#ajax_form").submit( function() {
	var post_data = $(this).serialize();
	var form_action = $(this).attr("action");
	var form_method = $(this).attr("method");
	$.ajax( {
		type :form_method,
		url :form_action,
		cache :false,
		data :post_data,
		success : function() {
			alert("Data berhasil dimasukkan.");
		},
		error : function() {
			alert("Data gagal dimasukkan.");
		}
	});
	return false;
});

Saya akan menjelaskan per bagian:

$("#ajax_form").submit( function() {

Menandakan fungsi yang dijalankan saat element dengan id ajax_form (dalam hal ini berarti form) pada saat submit, perhatikan saya memberi id=”ajax_form” pada form html diatas. Untuk penjelasan tentang selector lainnya anda dapat pelajari disini

var post_data = $(this).serialize();

Ini adalah bagian yang saya suka, fungsi ini akan mempopulate semua form input value ke dalam Name Value Pair (NVP), yang nantinya akan di kirim melalui proses AJAX

var form_action = $(this).attr("action");
var form_method = $(this).attr("method");

Variable ini menandakan form action dan form method yang digunakan

$.ajax( { ... } )

Bagian ini kayaknya cukup self explaining.

Demo

33 Responses to “Membuat AJAX form submit dengan jQuery”

  1. Irawan says:
    February 27, 2010 at 4:04 PM

    wah saya belum coba pake jquery, biasanya pake php ama html biasa… makasih infonya…

    Reply
  2. sauskecap says:
    February 28, 2010 at 10:54 PM

    waduh… saya nyasar disini, daripada ga ninggalin jejak mending numpang komentar…

    Reply
  3. nartzco says:
    March 15, 2010 at 1:10 AM

    ini pasangannya gan, buat populate json ke formnya..
    http://www.keyframesandcode.com/resources/javascript/jQuery/demos/populate-demo.html

    Reply
  4. Manchester United Tech says:
    March 24, 2010 at 11:39 AM

    Pake jQuery yah….gw biasanya pake html biasa…..thx infonya…

    Reply
  5. Zapra Gartiast says:
    March 29, 2010 at 8:42 AM

    hmm. . . . . .
    walaupun masih sedikit bingung, tapi ada pertanyaan nih…
    itu editing kodenya harus pake applikasi lagi?

    Reply
  6. SEO Fighter says:
    April 7, 2010 at 10:15 AM

    notepad juga bisa ya. .
    thanks dah, .

    Reply
  7. captbbx says:
    April 9, 2010 at 8:55 PM

    kayaknya saya mesti perlu banyak belajar…

    Reply
  8. voroxxx says:
    April 15, 2010 at 6:29 PM

    wahh… masi harus banyak belajar nih saya.. :P

    Reply
  9. oleh says:
    April 23, 2010 at 9:01 AM

    bedanya apa pake ajax ma ga?

    Reply
  10. hanifilham says:
    April 29, 2010 at 12:33 AM

    jquery sebagai pelengkap, hehe, masih menggunakan PHP

    Reply
  11. sicofante says:
    May 19, 2010 at 4:09 PM

    salam kenal mas, ini artikel yang saya cari-cari mas. kebetulan nemu di sini. wah maturnuwun sanget atas tips dan pencerahan JQuery ini. langsung praktek ah….

    Reply
  12. Zapra Gartiast says:
    May 30, 2010 at 4:28 AM

    sorry nih gan mau nanya lagi. . .
    cara buat loading page model java script itu gmn caranya ya??
    jadi kalo pas submit komentar itu gak perlu loading page lagi gitu. . .

    *moga aja agan ngerti ya. . . :(

    Reply
  13. Outlet Pillow says:
    June 8, 2010 at 9:01 PM

    wah keren dan ribet nih.. huahahau :lol: btw thx yaa

    Reply
  14. RETNO says:
    June 10, 2010 at 1:49 PM

    thanks bgettttttttttttttttttttttt.buat info_y….tpi masih ribet praktekn_y.

    Reply
  15. Pasang Iklan Gratis Sebagai Awal Mulai Bisnis Online says:
    November 5, 2010 at 3:11 AM

    Makasih ya buat kode nya. terus terang saya msh bingung untuk menerapkan cara ini. tp ini sangat berguna mas :)

    Reply
  16. bigmumet says:
    December 24, 2010 at 2:40 PM

    keren keren saya mau coba belajar

    Reply
  17. husni says:
    January 11, 2011 at 7:50 PM

    Nice info gan!

    Reply
  18. makeityourring diamond engagement rings says:
    January 18, 2011 at 9:20 PM

    ajax selalu menarik dengan fitur-fitunya yang selalu nge flashh

    Reply
  19. bali web design says:
    March 17, 2011 at 7:13 AM

    makasi banyak infonya mas, tapi saya blum terlalu mengerti dengan j query,,
    semoga dengan tutorialnya ini saya bisa lebih paham ^_^

    Reply
  20. Pejwan Gugel says:
    March 20, 2011 at 1:25 AM

    Makasih ya buat kode nya. terus terang saya msh bingung untuk menerapkan cara ini. tp ini sangat berguna mas

    Reply
Newer Comments »

Leave a Reply