About Me
Diberdayakan oleh Blogger.
Text Widget
Sample Text
Pengikut
Arsip Blog
-
▼
2013
(7)
-
▼
April
(7)
- Sistem Informasi Ujian Online PHP MYSQL
- Tutorial Cara Upload Gambar Dengan AJAX PHP
- Membuat Submit Form Dengan Ajax Menggunakan jQuery...
- Membuat Berita Dinding Auto Refresh Seperti Twitte...
- Cara Membuat Form Entry Data, Edit/Update, Hapus D...
- Tipe - Tipe Data yang didukung oleh MySQL
- Kumpulan Perintah MYSQL dan penjelasannya
-
▼
April
(7)
Categories
- Ltrim dan trim (1)
- MySQL (3)
- Penggunaan Fungsi rtim (1)
- Penggunaan substr pada PHP (1)
- PHP Function (1)
- Tutorial CSS (1)
- Tutorial PHP (16)
- Unlink PHP function (1)
Label
- Ltrim dan trim (1)
- MySQL (3)
- Penggunaan Fungsi rtim (1)
- Penggunaan substr pada PHP (1)
- PHP Function (1)
- Tutorial CSS (1)
- Tutorial PHP (16)
- Unlink PHP function (1)
Popular Posts
-
Pengenalan PHP Tutorial yang saya tulis kali ini berhubungan dunia website yang menggunakan bahasa PHP. Sebelum masuk ke tips dan trik PHP...
-
Catatan Penting: Data yang dapat dijumlahkan harus berupa angka atau data string yang dapat diubah menjadi angka ( string yang terdiri ata...
-
Halo smua ,, kali ini saya akan membagikan bagaimana cara untuk membuat submit form atau proses dari suatu form dengan menggunakan Ajax Jqu...
Blogger templates
Pages
Download
Ordered List
Recent Posts
Selasa, 02 April 2013
Membuat Submit Form Dengan Ajax Menggunakan jQuery dan PHP
Halo smua ,, kali ini saya akan membagikan bagaimana cara untuk membuat submit form atau proses dari suatu form dengan menggunakan Ajax Jquery. Oke langsung saja ke TKP ...!!!
Studi kasus 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 sebagai berikut :
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; }); }) |
Dalam mengimplementasikan Ajax, pada file form.html ini kita menggunakan fungsi
ajax ()
pada jQuery. Fungsi ini memiliki sebuah argumen yaitu berupa object
(pasangan key/value), dan yang akan saya gunakan di antaranya sebagai berikut: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 fungsiserialize()
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 sebuahdiv
denganid="result"
)
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 dalam browser anda masing-masing maka hasil outputnya akan ditampilkan pada element
div
yang berada pada file ajaxform.htmlUntuk lebih jelasnya anda bisa melihat demonya pada Link dibawah ini :
Lihat Demo Ajax Form Disini
Anda juga dapat mendownload source code nya di sini:
Klik Disini Untuk Download

Langganan:
Posting Komentar (Atom)
Blog Archive
1 komentar:
Didownload langsung di-run error messagenya tidak muncul saat submit dalam kondisi form kosong semua. Hanya layar box hijau yang keluar. Padahal di demo bisa muncul error messagenya.
Posting Komentar