Beberapa Tombol Submit dalam Satu Form
January 18th, 2009 | by rosihanari |
Cetak Artikel Ini
Biasanya… sering kita jumpai dalam form processing atau pemrosesan form di dalamnya terdapat satu tombol SUBMIT dan satu tombol RESET. Tombol SUBMIT digunakan untuk mengirim data input yang kita masukkan ke dalam form untuk selanjutnya diproses dengan suatu script tertentu. Sedangkan tombol RESET digunakan untuk menghapus data di form yang telah kita isikan atau membersihkan form sehingga kosong kembali.
Bentuk form seperti di atas, yang terdiri dari satu tombol SUBMIT tentu kita bisa membuat prosesnya dengan mudah. Namun… bagaimana dengan beberapa tombol SUBMIT yang terdapat dalam satu form? Bagaimana membuat proses submitnya?
Persoalan di atas akan dibahas pada artikel kali ini. Persoalan ini sering ditanyakan rekan-rekan yang telah bergabung di membership rosihanari.net. OK.. sekarang saya jawab dengan detail dan mudah-mudahan bisa menjawab persoalan yang dihadapi.
Untuk membuat beberapa tombol SUBMIT dalam suatu form sebenarnya pada prinsipnya sama ketika kita membuat sebuah tombol SUBMIT. Tombol SUBMIT dibuat dengan tag (X)HTML sbb:
<input type="submit" name="..." value="..." />
Atribut name digunakan untuk memberi nama komponen tombol submit tersebut. Sedangkan atribut value digunakan untuk menampilkan keterangan pada tombol submit. Sebagai contoh misalkan diberikan tag sbb:
<input type="submit" name="tombolku" value="Klik di sini donk" />
Maksud dari tag di atas adalah membuat tombol SUBMIT dengan nama komponen ‘tombolku‘ dan muncul tulisan ‘Klik di sini donk‘ pada tombol tersebut ketika dibuka di browser.
Nah… terkait dengan beberapa tombol SUBMIT dalam satu form, maka cara membuatnya adalah buatlah beberapa tag tombol SUBMIT seperti di atas, dan ingat… jangan membuat tombol SUBMIT dengan nama komponen yang sama.
Sebagai studi kasus, misalkan kita akan mencoba membuat kalkulator sederhana yang akan menerima 2 buah bilangan. Kalkulator ini nanti mampu menjumlahkan, mengurangi, mengalikan dan membagi kedua bilangan. Masing-masing operasi akan dilakukan dengan mengklik tombol-tombol yang ada. Karena terdapat 4 jenis operasi, maka kita butuh 4 buah tombol SUBMIT.
Perhatikan code (X)HTML berikut ini untuk membuat sebuah form dengan 4 buah tombol SUBMIT
<form method="post" action="proses.php"> <table> <tr><td>Masukkan Bilangan Pertama</td><td>:</td><td><input type="text" name="bil1" /></td></tr> <tr><td>Masukkan Bilangan Kedua</td><td>:</td><td><input type="text" name="bil2" /></td></tr> <tr><td></td><td></td><td> <input type="submit" name="submit1" value="Penjumlahan" /> <input type="submit" name="submit2" value="Pengurangan" /> <input type="submit" name="submit3" value="Perkalian" /> <input type="submit" name="submit4" value="Pembagian" /></td></tr> </table> </form>
Pada code di atas tampak bahwa untuk setiap tombol SUBMIT diberikan nama komponen yang berbeda-beda, yaitu ‘submit1‘, ‘submit2‘, ‘submit3‘, dan ‘submit4‘. Apakah nama komponen tombol SUBMIT harus menggunakan kata-kata ‘submit‘? OO… tentu tidak… Kita boleh memberi nama komponen dengan sebarang nama. Tapi… meskipun sebarang, jangan memilih nama komponen yang di dalamnya mengandung spasi.
OK… sampai sini.. mudah-mudahan Anda bisa memahami cara membuat beberapa tombol SUBMIT dalam satu form.
Trus… bagaimana membuat proses submitnya sendiri? Harapan kita adalah setelah kita masukkan dua buah bilangan, kemudian kita klik tombol ‘Penjumlahan’ maka muncul hasil penjumlahan kedua bilangan tersebut. Begitu pula apabila kita klik tombol ‘Pengurangan’, dan tombol-tombol yang lain. Dengan kata lain, setiap tombol ini akan melakukan proses yang spesifik sesuai dengan tujuan tombol ini dibuat.
Nah.. yang menjadi pertanyaan adalah, bagaimana membuat proses yang spesifik untuk masing-masing tombol ketika diklik? Ternyata caranya sangat mudah, yaitu kita gunakan saja statement IF untuk men-spesifikasikan setiap proses. Mengapa kita gunakan IF? Ya… secara logika kita bisa mengatakan bahwa ‘Apabila tombol penjumlahan diklik, maka lakukan proses penjumlahan’, ‘Apabila tombol pengurangan diklik, maka lakukan proses pengurangan’, dsb…
Tapi… muncul pertanyaan lain: Bagaimana cara menyatakan ‘Apabila tombol penjumlahan diklik’ dalam PHP? Nah… untuk menyatakan hal ini kita gunakan perintah berikut ini
<?php
if ($_POST['submit1'])
{
.
.
.
}
?>
Lho… mengapa menggunakan ‘submit1′? Ya… karena tombol penjumlahan dalam form di atas menggunakan nama komponen ‘submit1′. Secara umum, kita bisa gunakan sintaks sbb untuk mengecek apakah suatu tombol submit diklik
<?php
if ($_POST['nama_komponen_submit'])
{
.
.
.
}
?>
Logika di atas dapat diterapkan untuk tombol yang lain. Sehingga secara lengkap script untuk kalkulator ini adalah sbb:
proses.php
<?php
$bil1 = $_POST['bil1']; // membaca bil pertama dari form
$bil2 = $_POST['bil2']; // membaca bil kedua dari form
if ($_POST['submit1']) // cek bila yang diklik adalah tombol Penjumlahan (submit1)
{
$hasil = $bil1 + $bil2;
echo "Hasil penjumlahannya adalah ".$hasil;
}
else if ($_POST['submit2']) // cek bila yang diklik adalah tombol Pengurangan (submit2)
{
$hasil = $bil1 - $bil2;
echo "Hasil pengurangannya adalah ".$hasil;
}
else if ($_POST['submit3']) // cek bila yang diklik adalah tombol Perkalian (submit3)
{
$hasil = $bil1 * $bil2;
echo "Hasil perkaliannya adalah ".$hasil;
}
else if ($_POST['submit4']) // cek bila yang diklik adalah tombol Pembagian (submit4)
{
$hasil = $bil1 / $bil2;
echo "Hasil pembagiannya adalah ".$hasil;
}
?>
That’s All…. mudah bukan membuatnya??
OK… mudah-mudahan artikel di atas berguna bagi para member khususnya dan para pengunjung blog ini umumnya. Bagi para member, silakan request artikel yang Anda inginkan di blog ini, dan semoga saya bisa memenuhinya segera.
Anda ingin mendownload beberapa tool programming 100% gratis?
Silakan download di FREE PROGRAMMING TOOLS.
atau ingin berdonasi untuk pengembangan blog ini cukup dengan $1 via Paypal?
Beberapa artikel terkait
- Tentang Letak Script Pengolah Form
- Script PHP untuk Mencegah Submit Form Berulang Kali
- Teknik Submit Data Melalui Multi Form
- Pemrosesan Form dengan Komponen Combo Box
- Alternatif Cara Membuat Form Dinamis Untuk Submit Data Secara Simultan
- PHP Dasar – Beberapa Aturan dalam Penulisan Script PHP
- Membuat Form Dinamis dan Pemrosesannya (Sebuah Studi Kasus)
- Script PHP untuk Mengedit Data Via Form
- Penggunaan Cookie untuk Mencegah Submit Ganda pada Polling
- Beberapa Trik Mencegah Submit Polling Berulang Kali
Share this article on:
Kata kunci: form - PHP - script - submit -
wah… sangat menarik banget… jadi bersemangat kalo yang diterangkan mudah dimengerti.. makasih banget pak…
oiyaa.. maaf pendaftaran yang kmaren lom sempet melakukan transfer.. coz lagi terdesak kebutuhan dulu pak…
sebelumnya makasih banget..
to ekhan: ya gak papa… prioritaskan yang lebih penting dahulu.
[...] bila tombol submitnya lebih dari satu, seperti yang pernah saya bahas di artikel Beberapa Tombol Submit dalam Satu Form? Bagaimana cara membuatnya bila input diarahkan ke script yang sama dengan formnya? Ya… [...]
[...] script kalkulator yang telah dibahas sebelumnya, tentu Anda sering menjumpai dan mudah membuatnya. Namun bagaimana dengan kalkulator yang inputnya [...]
wah makasi pak keterangannya semakin memperjelas untuk memahami tombol pada php
Mas Rosihan
aku pertanyaan
kenapa tombol submit tidak bisa dieksekusi jika tombol tersebut terletak setelah script php, namun jika terletak sebelum script php, tombol tersebut bisa dieksekusi menuju action yang telah ditentukan?
apa ada batasan waktu untuk menyelesaikan materi kursus online? soalnya belajar ini kan sambil nyambi, jadi tidak bisa kontinu nyelesaikan tugasnya, gitu mas
trims mas
to eki: bisa kok mas… tombol submit diletakkan dimanapun bisa, asal terletak dalam <form method=”post” action=”…”></form>
Untuk batasan waktu kursus online tidak ada. Hal ini dikarenakan kecepatan mempelajari tiap modul/bab setiap orang tidak sama, dan juga kesibukan tiap orang juga tidak sama.
wah keren pak..saya lagi nyari-nyari script ini..saya tadinya bingung menggunakan banyak tombol dalam satu form dalam php, dalam benak saya bisa atau ga, soalnya selama saya belajar di kampus tentang pemrograman hanya untuk pemrograman desktop aja yg diajarkan byk tombol dlm 1 form, sedangkan utk pemrograman web jarang sekali referensi / tutorial ttg penggunaan byk tombol dlm 1 form, termasuk d kampus saya jg ga diajarkan..terima kasih banget pak atas tutorial yg cukup jelas dan saya pikir ini tutorial langka..
to gilar: thanks mas Gilar atas komennya. Memang niat saya adalah berusaha memberikan sesuatu yang lain dalam programming. Mudah2an jadi pengunjung setia blog ini saya
Ass….terimakasih banyak pak rosihanari…s’moga banyak orang yg mau berbagi ilmu s’perti bapak,terus terang saja saya masih dlm tarap belajar,bahkan blh d bilang saya blm bisa apa2, tp dengan tutorial dari bapak, saya jd smangat buat mengembangkan ilmu saya…sekali lg terimakasih, semoga amal & ibadah bapak d bls ALLAH SWT…
.-= Tasurun´s last blog ..Selamat Datang! =-.
to tasurun: amin… terimakasih doanya mas. Sering2 mampir ke sini ya
makasih banget
bantu saya dlm belajar php
ini adalah blog terkeren yang pernah saya kunjungi…hehe
Pak dosen,,semoga anda mendapat pahala dari ALLAH.
tolong kalo ada artikel yang baru kirimkan ke email saya..terima kasih!!!
bagaimana dengan satu tombol untuk menampilkan beberapa form yang berbeda..misalkan ada 3 combo yg berbeda dan 1 tombol submit..:)
to anji: kalo beberapa form diproses melalui satu tombol submit saja sepertinya sulit mas… karena suatu tombol submit dia akan mensubmit data yang hanya dientri pada form tersebut. Kecuali dengan Javascript atau AJAX.
Javascript dan Ajax, mmm.. ok trima kasih infonya pak
Assalamu’alaikum pak.
Wah, ilmu yang sangat bermanfaat.
trus bagaimana jika ingin menggunakan 2 fungsi dalam satu tombol.
misal : ada banyak field yg mesti diisi user
salah satunya kolom upload (misal ktp).nah, setelah user masukin semua item, kemudian user teken tombol daftar(misal). trus otomatis data2 yg di field itu masuk ke database beserta upload file ktpnya.
mohon pencerahannya pak.
Jazakallohu khoir
Pak saya mau tny soal tampilan html yg ckp dasar tp saya gak bisa.
msl saya pny form login.php, isinya:
username :
password :
Perintah tsb kalo dijlnin akan muncul 2 textbox ats bawah (username & password) dan tombol submit atas bwh (login dan regis).
Nah yg jd pertanyaan saya gimana caranya agar ke-2 textbox ttp atas bwh tp utk tombol-nya jd kiri kanan dgn asumsi kiri adalah tombol regis dan kanan adl tombol login???
Kalo dr yg saya coba2 saya cm bisa smp mengubah tombol login kiri dan tombol regis sblh kanan. Pdhl permintaannya sebaliknya.
Mohon pencerahannya ya…
Terima kasih
Kok syntax-nya gak muncul ya..???
to amy chandra: syntax apanya mbak?
to amy chandra: ya tinggal dibalik mbak komponen submitnya
<input type=”submit” name=”register” value=”Registrasi”> <input type=”submit” name=”login” value=”Login”>
trus nanti proses submitnya pakai IF seperti konsep di atas.
Kmrn wkt saya ketik pesen itu saya ketikin jg cth program saya, tp stl pesan dikirim coding-nya hilang, cm tgl tulisan username sm password doank
Pak pertanyaan yg ingin saya tanyakan sdh saya kirim ke email bapak. Mohon bantuannya ya Pak.
Oh ya sama mau tanya kalo dr blog ini, kirim comment/pertanyaan gt, kalo sdh dijawab hsl jwbnya gak dikirim ke email ya??
Kalo nggak, cuma saran aja gimana kalo jawaban dr hsl pertanyaan dikirim jg ke email, soalnya kalo hrs ngecek web ini trs rada susah, lg pula blog Pak Rosi kan byk hehe… cm saran aja kok.
Terima kasih
to amy chandra: wah agak ribet mbak kalo harus jawab dengan 2 cara itu. Coba nanti saya cari plugin WordPress yang bisa memberikan notifikasi pengunjung via email bahwa komentarya sudah direspon.
terima kasih pak, sangat bermanfaat. saya mau tanya, ada kasus seperti ini, biasanya page php untuk submit berbentuk.
kalau dari action di atas berarti proses akan di redirect ke dalam satu page yang bernama “proses.php”. bagaimana caranya tanpa ke page lain atau proses submit di eksekusi di halaman dimana form tersebut berada. thanks buat ilmunya pak.
@yudi: kan sudah pernah saya bahas di artikel http://blog.rosihanari.net/tentang-letak-script-pengolah-form ini mas? silakan dipelajari ya…
thank’z bnyk y pak!!!
saya pelajari dulu yah…
(bujur ras mejuah-juah)
TERIMA KASIH..BANYAK NIH atas semua skrip phpnya mudah-mudah lebih banyak lg ilmu yg bisa dibagi kesemua orang yg ingin belajar php…pertahankan terus semoga amal ibadah diterima oleh ALLAH SWT..AMIN..THANKS
mas mau tanya nich, gimana coding script, untuk tombol print/ cetak, agar saat kita klick print maka dispaly tombol tersebut tidak ikut ter cetak pd out put di printer
thk mas dah banyak membantu