Cara Menampilkan Hasil Form HTML dengan JavaScript

Dalam artikel kali ini saya akan membahas tentang Bagaimana Cara Menampilkan Hasil Form HTML dengan JavaScript. Artikel ini ditulis berdasarkan pertanyaan dari rekan kita Doe, pada Tutorial Belajar JavaScript: Cara Menampilkan Hasil Program JavaScript.

Berikut adalah pertanyaannya:

Gan, misalnya kita tuh klik button pada sebuah form yang nantinya akan 
menghasilkan informasi sesuai pilihan yang di pilih pada form 1. 
Tampilnya itu di bawah form itu gan.

(form id=tampil)
 select
 –option=jakarta
 –option=bandung
 input type=button onclick=klik()

misal:dipilihnya bandung, dibawah form tersebut ada info seputar bandung gan.
Saya coba pake document.write tapi css nya gak jalan. 
Saya pakai juga getElementById tetep belum jalan.

mohon pencerahannya.
Terima kasih

---

Dari pertanyaan tersebut saya akan mencoba untuk membuat sebuah halaman HTML yang akan menampilkan hasil dari form pada halaman yang sama menggunakan JavaScript.

Berikut adalah tampilan akhir kode program:

Dan berikut adalah kode HTML+JavaScript yang saya gunakan untuk menampilkan hasil diatas:

Menampilkan Hasil Form HTML dengan JavaScript


  Pilih Kota: 
  
    Jakarta
    Bandung
    Bogor
  
  

Anda bisa 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

Untuk membuat contoh form, berikut adalah kode HTMLnya:

Menampilkan Hasil Form HTML dengan JavaScript


  Pilih Kota: 
  
    Jakarta
    Bandung
    Bogor
  
  

Pada contoh diatas saya membuat sebuah form dengan atribut id=”form1″ dan name=”form1″. Form ini hanya memiliki 1 objek form, yakni select dan 1 buah tombol submit untuk mengirimkan hasil form.

Jika anda ingin lebih jauh mempelajari tag-tag dan kode HTML untuk membuat form, silahkan dipelajari pada tutorial: Cara Membuat Form HTML.

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

Jika anda perhatikan, tag

memiliki atribut onsubmit=”return false”. Atribut ini adalah kode JavaScript yang berfungsi untuk menghentikan fitur standar form yang ketika tombol submit ditekan, form akan pindah ke halaman tertentu untuk di proses (biasanya diproses menggunakan PHP).

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

Sebagai gantinya, pada tag , saya menambahkan atribut HTML yang berfungsi untuk ‘mengaitkan‘ JavaScript, yakni onclick=”tampilkan()”. Atribut ini berfungsi sebagai event JavaScript yang akan dipanggil ketika tombol submit di klik. Fungsi tampilkan() inilah yang akan kita buat programnya menggunakan JavaScript.

Setelah kode HTML untuk membuat form, saya menambahkan sebuah tag

yang akan digunakan sebagai penampung hasil form. Tag

ini tidak berisi text apapun. Kita akan mengeditnya menggunakan JavaScript.

---

Kode JavaScript

Dari form HTML, saya membuat sebuah fungsi tampilkan() yang akan dieksekusi ketika tombol submit di tekan. Berikut adalah kode JavaScriptnya:

Kode JavaScript diatas saya letakkan pada bagian , dan hanya berisi 1 fungsi, yakni: tampilkan().

Pada baris pertama, saya membuat variabel nama_kota yang akan mengambil isi tag

dari form. Saya menggunakan perintah document.getElementById untuk mendapatkan suatu objek HTML dengan menggunakan atribut id. Sehingga document.getElementById(“form1”) akan menghasilkan objek HTML dengan id=”form1″. Dalam hal ini tag HTML yang memiliki id=”form1″ adalah satu-satunya form di dalam kode HTML.

Selanjutnya, untuk mendapatkan nilai dari tag dari form1, saya membuat perintah: document.getElementById(“form1”).select1.value.Perintah select1.value akan berisi nilai dari tag yang saat ini sedang dipilih. Agar mempermudah penulisan nantinya, nilai ini saya simpan dalam variabel nama_kota.

Variabel kedua adalah p_kontainer. Variabel ini berisi ‘objek’ dari kontainer dimana keterangan tentang kota akan kita tampilkan. Saya juga menggunakan perintah document.getElementById untuk mendapatkan objek ini. Perhatikan bahwa id dari tag

dalam kode HTML kita adalah: container.

Setelah mendapatkan nilai kota yang saat ini terpilih, berikutnya saya tinggal menyeleksi dan menampilkan hasil yang sesuai. Karena saya membuat 3 buah nama kota, maka saya memerlukan 3 buah kondisi if untuk memeriksa dan menampilkan data yang sesuai.

Jika variabel nama_kota adalah Jakarta, maka tampilkan kata “Jakarta Ibu kota Republik Indonesia” di dalam “container“.

Untuk mendapatkan hasil ini, saya menggunakan property innerHTML dari sebuah objek HTML. Dengan demikian, untuk menampilkan kalimat di dalam tag

dengan id=container, kita bisa menggunakan perintah: document.getElementById(“container”).innerHTML=”kalimat”.

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

Demikianlah tutorial singkat kita tentang Cara Menampilkan Hasil Form HTML dengan JavaScript. Jika ada pertanyaan, silahkan tinggalkan pesan di kolom komentar. Akhir kata, semoga bermanfaat.

---

eBook JavaScript Uncover Duniailkom

JavaScript sudah menjadi fitur wajib di setiap website modern. Duniailkom telah menyusun eBook JavaScript Uncover yang membahas JavaScript dengan lebih detail dan lebih lengkap, mulai dari dasar hingga konsep DOM, Event dan AJAX. Penjelasan lebih lanjut bisa ke eBook JavaScript Uncover Duniailkom.

Sumber wk.com