Cara Menampilkan Hasil Form HTML dengan JavaScript

Posted on

Pada artikel kali ini saya akan membahas mengenai Bagaimana Cara Menampilkan Hasil Form HTML dengan JavaScript. Artikel ini ditulis menurut pertanyaan dari rekan kita Doe, di Tutorial Belajar JavaScript: Cara Menampilkan Hasil Program JavaScript.

Berikut ialah pertanyaannya:


Dari pertanyaan tersebut saya akan mencoba bagi membangun sebuah halaman HTML yang akan menampilkan hasil dari form di halaman yang sama menggunakan JavaScript.

Berikut ialah tampilan ahir kode program:

Dan berikut ialah kode HTML+JavaScript yang saya gunakan bagi menampilkan hasil diatas:

Sahabat dapat mencobanya dari tampilan CODEPEN dibawah ini:

See the Pen YPXPqa by duniailkom (@duniailkom) on CodePen.10206

Mari kita bahas kode HTML dan JavaScript diatas dengan lebih detail.


Kode HTML

Bagi membangun contoh form, berikut ialah kode HTMLnya:

Di contoh diatas saya membangun sebuah form dengan atribut id=”form1″ dan name=”form1″. Form ini hanya mempunyai 1 objek form, yakni select dan 1 buah tombol submit bagi mengirimkan hasil form.

Kalau kamu ingin lebih jauh mempelajari tag-tag dan kode HTML bagi membangun form, silahkan dipelajari di panduan: Cara Membuat Form HTML.

Objek form <select> saya beri atribut id=”select1“. dan name=”select1″. Setiap nilai dari select (tag <option>) mempunyai value masing-masing, yakni 3 buah nama kota: Jakarta, Bandung, dan Bogor.

Kalau kamu perhatikan, tag <form> mempunyai atribut onsubmit=”return false”. Atribut ini ialah kode JavaScript yang berfungsi bagi menghentikan fitur standar form yang ketika tombol submit ditekan, form akan pindah ke halaman tertentu bagi di proses (biasanya diproses menggunakan PHP).

Dengan kata lain, menambahkan atribut onsubmit=”return false” di tag form, akan mematikan kegunaan submit. Hal ini saya lakukan karena kita akan menampilkan hasil form dengan JavaScript, bukan dengan PHP seperti biasanya, sehingga saya tak butuh kegunaan bawaan tersebut.

Selaku gantinya, di tag <submit>, saya menambahkan atribut HTML yang berfungsi bagi ‘mengaitkan‘ JavaScript, yakni onclick=”tampilkan()”. Atribut ini berfungsi selaku event JavaScript yang akan dipanggil ketika tombol submit di klik. Kegunaan tampilkan() inilah yang akan kita bikin programnya menggunakan JavaScript.

Setelah kode HTML bagi membangun form, saya menambahkan sebuah tag <p> yang akan digunakan selaku penampung hasil form. Tag <p id=”container”></p> ini tak berisi text apapun. Kita akan mengeditnya menggunakan JavaScrip
t.


Kode JavaScript

Dari form HTML, saya membangun sebuah kegunaan tampilkan() yang akan dieksekusi ketika tombol submit di tekan. Berikut ialah kode JavaScriptnya:

Kode JavaScript diatas saya letakkan di bagian <head>, dan hanya berisi 1 kegunaan, yakni: tampilkan().

Di baris pertama-tama, saya membangun variabel nama_kota yang akan mengambil isi tag <select> dari form. Saya menggunakan petunjuk document.getElementById bagi memperoleh suatu objek HTML dengan menggunakan atribut id. Sehingga document.getElementById(“form1”) akan menghasilkan objek HTML dengan id=”form1″. Pada hal ini tag HTML yang mempunyai id=”form1″ ialah satu-satunya form di pada kode HTML.

Berikutnya, bagi memperoleh nilai dari tag <select> dari form1, saya membangun petunjuk: document.getElementById(“form1”).select1.value.Petunjuk select1.value akan berisi nilai dari tag <select> yang ketika ini sedang dipilih. Agar mempermudah penulisan nantinya, nilai ini saya simpan pada variabel nama_kota.

Variabel kedua ialah p_kontainer. Variabel ini berisi ‘objek’ dari kontainer dimana keterangan mengenai kota akan kita tampilkan. Saya pun menggunakan petunjuk document.getElementById bagi memperoleh objek ini. Perhatikan bahwa id dari tag <p> pada kode HTML kita ialah: container.

Setelah memperoleh nilai kota yang ketika ini terpilih, berikutnya saya tinggal menyeleksi dan menampilkan hasil yang sesuai. Karena saya membangun 3 buah nama kota, karenanya saya memerlukan 3 buah kondisi if bagi memeriksa dan menampilkan data yang sesuai.

Kalau variabel nama_kota ialah Jakarta, karenanya tampilkan kata “Jakarta Ibu kota Republik Indonesia” di pada “container“.

Bagi memperoleh hasil ini, saya menggunakan property innerHTML dari sebuah objek HTML. Dengan demikian, bagi menampilkan kalimat di pada tag <p> dengan id=container, kita dapat menggunakan petunjuk: document.getElementById(“container”).innerHTML=”kalimat”.

Tetapi saya telah menampung nilai document.getElementById(“container”) di variabel p_kontainer, sehingga tinggal menggunakan petunjuk p_kontainer.innerHTML=”Jakarta Ibu kota Republik Indonesia”. Bagi kota Bandung dan Bogor, saya tinggal mengulang kondisi IF agar hasilnya sesuai.

Demikianlah panduan singkat kita mengenai Cara Menampilkan Hasil Form HTML dengan JavaScript. Kalau ada pertanyaan, silahkan tinggalkan pesan di kolom komentar. Ahir kata, semoga bermanfaat.


eBook JavaScript Uncover Duniailkom

JavaScript telah menjadi fitur wajib di setiap laman modern. Duniailkom telah menyusun eBook JavaScript Uncover yang membahas JavaScript dengan lebih detail dan lebih komplit, mulai dari mendasar hingga konsep DOM, Event dan AJAX. Penjelasan lebih lanjut dapat ke eBook JavaScript Uncover Duniailkom.


Sumber https://www.duniailkom.com/