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 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"
)
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 (33402 downloads)
weittss, dah jadi master e ajax sekarang
master!, tambahi lg tutoriale. ok. sing akeh
weittss.. aku belum jadi master kok.. baru aja jadi sarjana
Ajax? hmm, yummy ..
jangan lupa check visualjquery.com, lumayan bermanfaat buat lookup referensi. Siapa tahu belum ada di bookmark kamu
download aja jquery core api, bisa langsung diliat tanpa harus terkoneksi internet….
visualjquery? tentu saja sudah jadi tontonan sehari-hari
mas mau nanya nih…
gmana yah cara bikin animasi loading ajax seperti di gmail..? yg di kanan atas warna merah itu lho
thans
untuk bikin animasi loading seperti gmail, kurang lebih seperti ini:
Buat di HTML untuk tulisan loading nya, dan secara default tidak ditampilkan:
Berikan CSS untuk tulisan loading tsb:
Dan script jQuery nya,
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
Mas source loadingnya yang kayak demonya bisa didownload ?
thanks
lagi sinau..
Mas Gatot kamu itu gak hanya manual berjalan, tapi manual ONLINE
mas gatot, kpn ya nyusul pinternya..
bosen aku oon terus!
Good job. thanks.
Paulo
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
@atoeyz:
boleh aja..
link downloadnya sudah saya sediakan.
silakan didownload sepuasnya…
halagh akhirnya,. hehe
baru mau belajar ajax ni terimakasih ya
TOP nih.. , thank nya…
nice tutorial
lagi belajar ajax juga nih..
izin bookmark ;p
kalao saya pakai mootools
,apakah cara nya juga sama? masih bisa digunakan juga kah script ini?
kalo script php dan html nya masih bisa dipake, tapi javascript nya jelas berbeda..
tutorial submit form menggunakan mootools bisa dilihat di sini
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.
@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
Kalo misalnya tipe halamaya php (index.php) gmn ?
maksudnya file formnya menjadi index.php kan?
ya tidak ada masalah mas, tetap jalan kok scriptnya
Ow ic2
Sep deh.
tak COba dolo y scriprtnya
excelente tutorial!. felicitaciones.
from mexico.
Hola Janckos .. gracias por visitar mi blog y gracias por tu comentario
hello,
tutorial ini sangat bagus! tapi saya ada soalan, bolehkan .aja) 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?
iya script ini masih ada kekurangannya yaitu tidak bisa menerima upload file
Wow keren bgt, Ajax,JQuery..
Musti dipelajari niy..
Tapi susah bgt yach..
Hhahaah
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….
cek….
wah masih belum dibalaz comment nya…T_T
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.
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????
saya mau bikin dulu contoh shoutbox nya.. biar nanti lebih gampang njelasinnya hehehe
mantap maz…ditunggu tutorialnya tentang shoutboxnya ia maz…hehehe
sekalian klu bisa yang pake iframe ia maz……
tutorial ajax yang mantap …
trims…for u gawibowo
[…] adalah contoh cara mengimplementasikan tutorial Submit Form Dengan Ajax Menggunakan jQuery untuk membuat sebuah shoutbox sederhana. Setidaknya contoh ini bisa lebih berguna daripada hanya […]
@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
Mas Ari, salut padamu, thanks for the free tutorial,,
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 …
@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:
Alhamdulillah shoutboxnya dah jad…hehehe
makasih tutor nya selalu maz ari….
<<jd penghuni setia blog maz ari…hehehe
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……
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……
hiks,,belum ada tanggapan…..
cekk,,cekkk,,,cekkkk….
belum ada tanggapan lgi……
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
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 ?
ups sori ternyata sudah ada ya mas tutorialnya hehe
https://gawibowo.com/validasi-form-menggunakan-jquery-validation-plugin.htm
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.
Bisa mas Kemas Rahmat, tinggal menjalankan fungsi load() di masing2 div aja, jadi scriptnya nanti jadi kyk gini:
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.
ya trims mas ari ..
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.
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
TERUSLAH BERKARYA BIAR NTAR GAMPANG BELAJAR ….
ada ym nya mas?
ada mas.. cek halaman contact saya
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…
ada contoh tampilan formnya mas? soalnya saya masih belum jelas maksud pertanyaannya
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
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
untuk mengatasi timeout, coba tambahkan waktu timeoutnya menggunakan script ini:
(dalam millisecond)
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..
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..
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()
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
you can use this code to reset form:
or this code to completely refresh page (using javascript redirect) :
insert the code inside the “success” function
hi . this code not worked
example (this will reset form if submit success):
and don’t forget to add name attribute to your form
<form name="nameofyourform">
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
if you don’t want to use same loading for every form, you shouldn’t use global event like
ajaxStart()
andajaxStop()
for the loading, because they will run for all ajax request on that page..try using local event like this:
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
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
jadi saat tombol2 tsb diklik, kita akan mengeset input tambahan tadi dengan script spt ini:
di proses.php nya nilai aksi tsb bisa kita ambil menggunakan $_POST[‘aksi’]
Hello webmaster
I would like to share with you a link to your site
write me here preonrelt@mail.ru
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…
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) ?
hi !
I test this in my form . worked in FF / Opera but crash IE6 !!! why ? how to fix ?
Hi . I test this in my form . worked in FF/Opera BUT CRASH IE6 !!!!!!!! Why ? How To Fix This ?
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
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.
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
Mas Gawibowo nya mana ya ? ^^
hadir mas
maaf kalo lama balesnya
mas- mas ada yg bisa bantu aku buat insert sqlnya? aku coba input ko ga masuk terus yah
contoh sql insert bisa dilihat di sini
tinggal menyesuaikan nama-nama fieldnya saja
selamat mencoba master windu… may the force be with you
Thanx mas , scriptnya sukses
sip deh
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
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
mas, misal form nya tu di load pake jQuery, & maunya diproses pake jQuery jg, gmn caranya? bisa ndak?
saya belum pernah mencobanya, tapi anda bisa mencari tutorial ttg event delegation di jquery
mas, mau tanya neh gimana mengclear from yang sudah di submit thanx b4
untuk mereset form menggunakan kode ini:
contoh script yg lengkap lihat di sini
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??
tentu saja bisa mas pakai database..
contohnya sudah saya terapkan untuk membuat shoutbox sederhana
kebetulan saya perlu ini. tengkyu ya…
desain blognya bagus juga
mas klo validasi untuk upload file gak mau divalidasi, hasilnya empty terus, Gimana solusinya ya ??? trima kasih sebelumnya
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
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
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
bisa kasih demo yg online aja pak?
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?
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
mas, aku baru join nih…
slam kenal, rey…
nggak apa2 kan kalo baru kenal udah langsung nanya???
mas , ada nggak fungsi refresh otomatis gunakan ajax tanpa harus menekan f5??
maklum bru beljar AJAX… hehe
sorry kepanjangan mas,,
…
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:
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??
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:
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..
Bisa minta alamat guestbooknya yg di 000webhost? Bisa jadi karena halamannya blm selesai diload tapi tombol submitnya sudah ditekan.
sudah saya cek mas, dan ajaxnya berhasil jalan
oh iya om,
udah bisa ternyata
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.
hohoho, mantabs gan…! thanks for share, bisa jadi inspirasi ne….
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…
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
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
kok aneh ya.. saya sudah coba sendiri di Firefox 2, Firefox 3, IE 6, IE 7, IE 8 script ini bisa jalan lancar
wah2…nice2 ini, bagus untuk dipelajari…
mas minta bantuan donk, kalo mau submit data & hasilnya kesimpan di db dan jga hasilnya di tampilin di page formnya itu sendiri gimana mas… ??? please rep…
sorry mas ada tambahan,, hasil dari form langsung di tampilin page form itu tanpa harus refresh page form …
coba lihat tutorial shoutbox ini:
https://gawibowo.com/shoutbox-sederhana-berbasis-ajax.htm
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
kemungkinan kurang tanda petik soalnya script php nya malah tampil..
coba dicek lagi mas file proses.php nya
klo ditambah fungsi jGrowl tambah ship nih…
$(‘#myForm’).submit(function() {
$.aja{
type: ‘POST’,
url: $(this).attr(‘action’),
data: $(this).serialize(),
success: function(data) {
$.jGrowl(data);
}
http://stanlemon.net/projects/jgrowl.html
dimana saya bisa download jquery core api? ud saya googling tp g ktemu.
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..
hahaha
ada apa bung ahmad?
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…
maaf blm bisa bantu.. saya belum pernah menggabungkan script ini dengan TinyMCE
numpang download mas…
terimakasih dan salam kenal.
gan…perintah masukkin ke SQL nya bagaimana..?
contoh perintah SQL bisa dilihat di sini, atau lihat tutorial shoutbox ini : Shoutbox Sederhana Berbasis Ajax
Makasih mas scriptnya..
mas, klo buat upload file gmn?
saya coba pake script diatas tp file nya ga mau ke upload..
Thanks Before..
Tidak bisa mas. Cek ini: https://gawibowo.com/submit-form-dengan-ajax-menggunakan-jquery.htm#comment-1050
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…
mas klo script diatas hasil inputnya masuk ke email gmn ya..beserta cek format email(!eregi)
terima kasih bantuannya
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….
woooww artikelnya keren. salam kenal boss
ijin sedot ya mas., tengkyu
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
di php ada fungsi untuk mengirimkan email. contoh sederhananya seperti ini:
anda bisa menyisipkan script ini pada file proses.php
tapi gak pake sql (pusign)
untuk ngirim email memang tidak perlu sql mas
mas kalau form validation pake border merah, gitu gimana buatnya?
tolong ya…
tengyu.
border merah di bagian mananya mas? kalo di script ini kan udah ada border merah di input nya kalau error
mas itu kalau email validationnya harus semua, misalnya tanpa @ tetap bisa di tembus…
gimana buatnya???
kalau email kan memang harus ada tanda @ nya kan?
kalau mau validasi biasa gunakan yang required saja
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…
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..
kalau mau menyembunyikan formnya bisa menggunakan script ini:
Submit Form Dengan Ajax Menggunakan jQuery
yang aku cari selama ini akhirnya ketemu makasih ya, saya utak – atik nanti.
makasih sebelumnya….
tapi saya masukin perintah header(\"location:…\" kok perintah hederna gak kerja ya,,,??
mhon pncerahan na
makasih
Pastikan perintah header nya dijalankan sebelum ada output apapun dari script
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:
Scriptnya sudah saya perbaiki supaya tidak muncul notice.
Silakan didownload lagi.
terima kasih banyak mas. sudah sukses sekarang!
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\"
}
}
else {echo \'<b>Error</b>: <br />\’.implode(\'<br />\’, $eror);
}
scripta saya kurang lebih begtu??
tp ttp ga mw nglempar ke location headerna??
mas, shoutboxnya saya mau kayak mas, d paging gtu,
max 5 ada next ma prev ny gmn ya ??
maskih
mas kalo buat preload image gimana mas?
sama kalo mau buat loading image waktu proses upload
Gan, kok hasilnya ngga tampil di halaman yang sama yach, ane coba munculnya jadi halaman baru….mohon pencerahan gan, terima kasih buat coding nya
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?
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.
coba pake live(), misalnya:
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
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..
sundullll….
pertanyaann sama
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
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
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..
mas punya tutorial untuk pemula ajax ngga?
maklum buta ajax nie…
eheheheheheh…
thanks
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….
maaf, tambah lagi nih mas, kalau bisa bagaimana caranya?
Thanks
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.
nice share mas..
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 ?
Mas Wibowo anak metal ya?
captcha nya mantep mas \m/
mas script ini paka core engine jquery 1.2.3, tapi ga jalan kalo kita pakai core engine jquery terbaru, apa benar begitu
Mantab Master Gatot
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
mas,
apa karena saya pake jQuery versi terbaru, versi 1.5.1 ???
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)
{
$.aja{
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() {
$.aja{
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
udah tak bookmark gan, mantap tuh infonya!!
link donwloadnya ngak bisa lagi ya mas
maaf kmrn ada masalah dengan plugin downloadnya. skrng sudah bisa lagi
Gak jangka di sini banyak ilmu ajax, izin numpang belajar om buat pelajaran kuliah..
Gak bisa download pak, uplod lagi donk pak, pleaseee…
maaf kmrn ada masalah dengan pluginnya. skrng sudah bisa download lagi
Tutorialnya keren, mantaaaap abis, bookmark dulu ah..
Tutorialnya bagus…
[ASK]
serialize untuk mengambil data querystring…
Nah pertanyaan saya, bagaimana jika ada data file upload pada submit form tersebut…
cara ngambilnya bagaimana?
Terimakasih…
^_^
untuk upload file tidak bisa mas yg itu biasanya menggunakan iframe
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
Thanks Bro.. nice script.. I love it and I will apply to my website. GBU
bermanfaat banget, terimakasih atas artikel nya jadi tahu cara membuat form dengan ajax
i love it thanks for this query and support and i also love this true blood season 4
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\".live(\’change\’, function(){
var idx = $(\".barang\".inde$(this));
var txt = $(\"option:selected\", this).attr(\’harga_jual\’);
$(\".harga_jual\".eq(idx).val(txt);
});
$(\".remove_item\".live(\’click\’, function (ev) {
if (ev.type == \’click\’){
$(this).parents(\".records\".fadeOut();
$(this).parents(\".records\".remove();
}
});
$(\".hitung\".live(\’change\’, function(){
interval = setInterval(\"sub_total()\",10);
});
$(\".sub_total\".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\".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…
Thank you for letting me know this information, I’ll hold this information.
Bagus mas tutorialnya. kalau bisa ditambahkan untuk validasi inputan datanya juga. Misalnya kalau angka ya hanya bisa diisi angka gitu mas.
wah…artikel yang menarik//
aya masih buram tentang ajax..saya mwtanya. bagaimana caranya menggunakan ajax untuk menampilkan shoutbox yg terdaftar..
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
Thx ya om infonya!
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!
Ajax new technology is useful for big content pages where static part is consistent and only a few dynamic content must be refreshed.
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.
mas mw tnya multiple add row dengan ajax gmn caranya?kl ada sourcenya lebih baik. maklum newbie mas, thx mas
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
Ajax is really nice, specially when the hosting is not from the first ones.
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(); ?> “
simple tapi bermanfaat buat kemudahan user dalam berinteraksi dengan website
Thanks mas. Keren ya, sangat signifikan perbedaan (dalam kemudahan) ketika menggunakan ajax biasa sama aja Jquery. Salam kenal
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?
if (data.indexOf(\'<b>berhasil</b>\’) != -1)
Mas, nilai berhasil itu diambil dari mana ?
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
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….
Waduuhh.. g dibahas nih cara upload file pake ajax, helep dong gan.. ato minimal bisa baca enctype di form..
Untuk pemakaian di jquery 1.7.1 tidak bisa berjalan.
klw , validasi nya muncul pada setiap form bukan di atas bagaimana crnya ya mas ,
\
ths before
coba pake jquery validation disana nanti atur css nya biar deket nya..
terima kasih mas,, membantu banget saya belajar,, hehehe
Terima kasih manual jquerynya, Insya Allah bermanfaat untuk saya mengembangkan web saya di http://www.bajubatikonline.com
Terimakasih infonya. Sangat berguna dan membantu
thx… sharingnya
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.
Wah keren Gan,,,aku sudah coba n sedikit ditambah loggernya,,hehehe
Silahkan click saja:
CONTAH AJAX FORM INI
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.
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?
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?
Mantap….very nice..
klo auto post gmn gan?
jd kita tak perlu klik button tapi dengan timer automatik post ke url tertentu.
ijin sedot gan,,
bwt tgas WEB ane,,,
hahahaaa,,
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 :)
terima kasiih
bg bowo, form proses untuk tampilin ajax nya engga ada? padahal kan untuk tampilin nya harus ada proses?
Boleh tau kode containernya? Mungkin ada yang salah saat extraksi get-nya?
Thanks asanoer.com
Sakti gan…..
mantaap…
ada contoh real live chat gk gan pake ajax?
Makasih om… sangat membantu saya yang masih nubi nih… :)
btw, ajarin cara bikin theme buat di pajang di themeforest.net dong :D
Wah keren mas..layak dicoba
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??
thx gan
tutorialnya sangat membantu sekali
makasih nih mas… membantu banget nih artikelnya
Kenapa perintah
if (data.indexOf(\’berhasil\’) != -1) {
document.nameofyourform.reset();
}
tidak jalan ya ??
masih bingung. liatin kode2nya :(
klw resset data dari formnya gimana master?
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.
maaf mas, solved :D
gan mau na.x hal yg mendasar nihh, soalx masih newbe -_-
apa ajax jquery sama dengan ajax framework . . ?
Harus baca dengan teliti, dan terima kasih informasinya
thank’s ya atas infonya, meskipun masih newbie nih saya
Makasih scriptnya gan,membantu sekali
Thanks artikelnya gan
Terimakasih untuk sharing nya sangat membantu sekali menambah wawasan
udah buat functionnya sih, dan bisa digunakan untuk form di luar tabel.
tapi tidak bisa untuk row yang baru saya generate pake javascript itu.
Terimakasih bosku postingan nya sangat bermanfaat sekali ????
Saya tunggu update artikel bermanfaat lain nya
bang mau tanya, kenapa yah saya ketika submit result nya beralih ke halaman lain bukan di halaman yang sama?
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!
Un concept unique au coeur d’un club libertin.
[…] Submit Form Dengan AJAX Menggunakan jQuery […]