- terdapat 4 paket (ada di atas)
- saat di klik maka harga dibawah akan update
- bentuk update sebenarnya ada 2 yaitu update tampilan harga (Rp. 3 500 000) dan update di input hidden.
- agar tidak menyulitkan maka input hidden akan saya tampilkan (jadikan text)
- sekalian bonus untuk yang bertanya cara muncul sub select kayak propinsi lalu hadir kota. Saya akan munculkan
dalam script contoh akan saya tampilkan:
* select yang jadi pengendali (berisi paket 1-4)
* kotak buat nulis harga (div)
* input buat nulis harga (input=text)
* select buat tambahan aja
Dalam tulisan ini kita akan memakai
* AJAX
* POST
* JSON
* INPUT
* SELECT
* APPEND
alasan kenapa saya tulis di atas adalah biar kalau dicari di internet / Google nunjuknya ke mari!!
*okay itu curang*
pertama buka codepaste ini
menulis ulang disini takutnya hanya merusak tampilan.. perhatikan aja scriptnya disana. pertama saya akan bahas dari form awalnya kemudian javascript en apa yang dikirim
FORM
perhatikan bahwa script ini memiliki tampilan yang saya katakan di atas yaitu dari select, div, input dan button. Kenapa ada button karena saya mengajarkan langkah agar tidak auto dahulu, bila ingin jadi auto cukup pasang / gunakan change.
$(".paket").change(function(){
mulaiAjax()
});
letakkan ini di dalam script ya..mulaiAjax()
});
Intinya pilih select yg di inginkan dan sisanya akan muncul hasilnya..
JAVASCRIPT
disini ngak ada yang rumit2.. hanya menunjukkan pengiriman data pake ajax ($.ajax) lalu proses mengembalikannya!! bila muncul error, liat jquery yang kamu gunakan!! atau php yang akan di proses !! kebetulan yang diproses ada di paling atas..Setelah dapet.. tinggal distribusikan saja!!
PHP YANG DIPROSES
asumsikan kalau kita pake database dan hasilnya dapat. Dalam script saya mencarinya di array jadi sesuaikan kebutuhan anda ya!! Berikutnya kita juga ingin memasukkan select yang ada dibawah.. namun caranya beda neh.. perhatikan saya pake echo dan menangkap isinya dengan ob_start!!
hasil echo itu akan masuk kedalam variabel.. Setelah masuk kita akan kirim memakai json_encode!! json encode ini yang akan dibaca oleh JS di atas
CARA PAKAI
langsung anda copy paste yang ada di atas ( link ), lalu jalankan.
- kemudian pilih salah satu paket.
- tekan button
- lihat hasilnya..
- check isi dari select terakhir. Tadinya kosong sekarang udah ada isinya. Letakkan pada option random (jangan yang teratas)
- Lalu pilih lainnya dan tekan tombol
- perhatikan perubahan pada hasil sebelumnya terutama pada select terakhir
1 komentar:
Jos gandos om.... (y)
Posting Komentar