Teknik Submit Data Melalui Multi Form

Sharing is caring!

Artikel ini mudah-mudahan bisa menjawab pertanyaan mas embagus (salah satu member). Beliau bertanya bagaimana teknik memproses data melalui banyak form yang setiap formnya dipisahkan dalam halaman yang berbeda. Pertama saya baca request tersebut, agak kurang paham 🙂 Tapi setelah melalui proses perenungan yang agak lama akhirnya paham juga.

Gambaran yang ditanyakan mas Embagus di atas mungkin seperti ini. Kita tentu pernah melakukan registrasi melalui form yang melalui beberapa tahap. Misalkan tahap pertama (halaman pertama) kita diminta mengisikan biodata lengkap kita. Setelah form disubmit, kita akan masuk ke pengisian form tahap kedua (halaman kedua) dimana kita diminta mengisikan data yang lain, misalkan data tentang pekerjaan kita. Selanjutnya setelah form kedua ini disubmit, kita diminta juga mengisikan form berikutnya pada halaman ketiga, dan seterusnya sampai proses registrasi selesai.

Yang menjadi problem adalah, bagaimana teknik untuk membuat proses submit data seperti di atas?

Teknik jitu untuk melakukan proses submit data dengan multi form tersebut adalah memanfaatkan hidden input. Adapun mekanismenya adalah sebagai berikut : data yang disubmit ketika form pertama nantinya dibaca pada form kedua dan data tersebut disimpan sementara dalam komponen hidden input. Data yang disimpan dalam hidden input ini tidak akan terlihat dalam form, namun dia tersembunyi sehingga seolah-olah tidak terlihat. Data hidden dan juga data yang diisikan dalam form kedua ini nantinya akan disubmit ke form ketiga, yang selanjutnya disimpan juga pada komponen hidden input. Begitu seterusnya sampai form terakhir. Setelah form terakhir, data barulah disubmit untuk diproses, misalnya dimasukkan ke database.

Untuk membuat komponen hidden input, cukup kita buat tag sebagai berikut

<input type="hidden" name="namaKomponen" value="..." />

Sekarang kita coba praktikkan. Misalkan kita ambil contoh sebagai berikut. Form pertama berisi input Nama Lengkap, Nama Panggilan, Jenis Kelamin, serta No. Telp. Selanjutnya form kedua berisi Nama Pekerjaan, Alamat Kantor, No. Telp Kantor. Terakhir, form ketiga berisi Hobi, Film Favorit, dan Makanan Favorit.

Untuk form pertama nanti kita buat di script bernama form1.php, form kedua bernama form2.php dan form ketiga bernama form3.php.

OK… kita buat terlebih dahulu form pertamanya. Ingat… untuk action kita arahkan ke form2.php.

form1.php

<form method="post" action="form2.php">
Nama Lengkap   : <input type="text" name="namaLengkap" />
Nama Panggilan : <input type="text" name="namaPanggilan" />
Jenis Kelamin  : <input type="radio" name="sex" value="Pria" /> Pria
                 <input type="radio" name="sex" value="Wanita" /> Wanita
No. Telepon    : <input type="text" name="telp" />
<input type="submit" name="submit" value="Submit" />				 
</form>

Berikutnya kita buat form kedua. Sebelum kita menuliskan tag untuk membuat form kedua, terlebih dahulu kita baca data yang disubmit dari form pertama tadi. Setelah data dibaca, selanjutnya dimasukkan ke hidden input.

form2.php

<?php
$namaLengkap = $_POST&#91;'namaLengkap'&#93;;
$namaPanggilan = $_POST&#91;'namaPanggilan'&#93;;
$sex = $_POST&#91;'sex'&#93;;
$telp = $_POST&#91;'telp'&#93;;
?>

<form method="post" action="form3.php">
Nama Pekerjaan  : <input type="text" name="namaPekerjaan" />
Alamat Kantor   : <input type="text" name="alamatKantor" /> 
No. Telp Kantor : <input type="text" name="telpKantor" />
<input type="hidden" name="namaLengkap" value="<?php echo $namaLengkap; ?>" />
<input type="hidden" name="namaPanggilan" value="<?php echo $namaPanggilan; ?>" />
<input type="hidden" name="sex" value="<?php echo $sex; ?>" />
<input type="hidden" name="telp" value="<?php echo $telp; ?>" />
</form>

Terakhir… kita buat form ketiga dan lagi-lagi kita harus membaca data yang dikirim dari form2.php dan disimpan dalam hidden input.

form3.php

<?php
$namaLengkap = $_POST&#91;'namaLengkap'&#93;;
$namaPanggilan = $_POST&#91;'namaPanggilan'&#93;;
$sex = $_POST&#91;'sex'&#93;;
$telp = $_POST&#91;'telp'&#93;;
$namaPekerjaan = $_POST&#91;'namaPekerjaan'&#93;;
$alamatKantor = $_POST&#91;'alamatKantor'&#93;;
$telpKantor = $_POST&#91;'telpKantor'&#93;;
?>

<form method="post" action="proses.php">
Hobi            : <input type="text" name="hobi" />
Film Favorit    : <input type="text" name="filmFavorit" />
Makanan Favorit : <input type="text" name="foodFavorit" />
<input type="hidden" name="namaLengkap" value="<?php echo $namaLengkap; ?>" />
<input type="hidden" name="namaPanggilan" value="<?php echo $namaPanggilan; ?>" />
<input type="hidden" name="sex" value="<?php echo $sex; ?>" />
<input type="hidden" name="telp" value="<?php echo $telp; ?>" />
<input type="hidden" name="namaPekerjaan" value="<?php echo $namaPekerjaan; ?>" />
<input type="hidden" name="alamatKantor" value="<?php echo $alamatKantor; ?>" />
<input type="hidden" name="telpKantor" value="<?php echo $telpKantor; ?>" />
</form>

Nah… setelah form ketiga, terserah data yang disubmit itu mau diapakan. Bisa disimpan ke database atau yang lain. Tetapi sebelumnya harus dibaca dulu semua data dari form3.php tersebut.

proses.php

<?php
$namaLengkap = $_POST&#91;'namaLengkap'&#93;;
$namaPanggilan = $_POST&#91;'namaPanggilan'&#93;;
$sex = $_POST&#91;'sex'&#93;;
$telp = $_POST&#91;'telp'&#93;;
$namaPekerjaan = $_POST&#91;'namaPekerjaan'&#93;;
$alamatKantor = $_POST&#91;'alamatKantor'&#93;;
$telpKantor = $_POST&#91;'telpKantor'&#93;;
$hobi = $_POST&#91;'hobi'&#93;;
$filmFavorit = $_POST&#91;'filmFavorit'&#93;;
$foodFavorit = $_POST&#91;'foodFavorit'&#93;;

// proses pengolahan data dituliskan di sini

?>

Demikian mas Embagus penjelasannya. Mudah bukan? Semoga bisa menjawab pertanyaan Anda dan semoga bermanfaat pula bagi pengunjung blog ini.

Tinggalkan Komentar