Beberapa Tombol Submit dalam Satu Form

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.