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.
Setelah itu, buat file dengan nama form.html dan masukan kode javascript ini
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" title="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
Ok, Selamat mencoba. Semoga bermanfaat…
Download File : //www.box.net/shared/l5paj7vasf
–
dari Meja Nasrul, 2011
Categories : Ajax, CSS, HTML, JavaScript, MySQL, PHP, Tutorial, Web Programming
Tags : ajax, autosubmit, css, form, html, mysql, php, simple ajax form auto submit
Nasrul Hadi
Sudah menikah, dan sekarang jadi bapak rumah tangga. Contact: nasrul[at]arekmedia.com
Related Post
Kirim Email Di Lumen 5.2 Menggunakan Mandrill
09 Apr 2016
5 Plugin Wajib di WordPress
23 Oct 2015
JQuery: Menghitung Sisa Karakter
01 Apr 2015