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:

Cara Menampilkan Hasil Form HTML dengan JavaScript

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tutorial Belajar JavaScript</title>

<script>
function tampilkan(){

  var nama_kota=document.getElementById("form1").select1.value;
  var p_kontainer=document.getElementById("container");

  if (nama_kota=="jakarta")
    {
        p_kontainer.innerHTML="Jakarta Ibu kota Republik Indonesia";
    }
  else if (nama_kota=="bandung")
    {
        p_kontainer.innerHTML="Bandung kota kembang";
    }
  else if (nama_kota=="bogor")
    {
        p_kontainer.innerHTML="Bogor kota hujan";
    }
}
</script>
</head>
<body>
<h2>Menampilkan Hasil Form HTML dengan JavaScript</h2>

<form id="form1" name="form1" onsubmit="return false">
  <label for="select1">Pilih Kota: </label>
  <select id="select1" name="select1">
    <option value="jakarta">Jakarta</option>
    <option value="bandung">Bandung</option>
    <option value="bogor">Bogor</option>
  </select>
  <input type="submit" value="Tampilkan Keterangan" onclick="tampilkan()">
</form>

<p id="container"></p>

</body>
</html>

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:

<body>
<h2>Menampilkan Hasil Form HTML dengan JavaScript</h2>

<form id="form1" name="form1" onsubmit="return false">
  <label for="select1">Pilih Kota: </label>
  <select id="select1" name="select1">
    <option value="jakarta">Jakarta</option>
    <option value="bandung">Bandung</option>
    <option value="bogor">Bogor</option>
  </select>
  <input type="submit" value="Tampilkan Keterangan" onclick="tampilkan()">
</form>

<p id="container"></p>

</body>

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 <select> saya beri atribut id="select1". dan name="select1". Setiap nilai dari select (tag <option>) memiliki value masing-masing, yakni 3 buah nama kota: Jakarta, Bandung, dan Bogor.

Jika anda perhatikan, tag <form> 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 <submit>, 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 <p> yang akan digunakan sebagai penampung hasil form. Tag <p id="container"></p> 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:

<script>
function tampilkan(){

  var nama_kota=document.getElementById("form1").select1.value;
  var p_kontainer=document.getElementById("container");

  if (nama_kota=="jakarta")
    {
        p_kontainer.innerHTML="Jakarta Ibu kota Republik Indonesia";
    }

  else if (nama_kota=="bandung")
    {
        p_kontainer.innerHTML="Bandung kota kembang";
    }

  else if (nama_kota=="bogor")
    {
        p_kontainer.innerHTML="Bogor kota hujan";
    }
}
</script>

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

Pada baris pertama, saya membuat variabel nama_kota yang akan mengambil isi tag <select> 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 <select> dari form1, saya membuat perintah: document.getElementById("form1").select1.value.Perintah select1.value akan berisi nilai dari tag <select> 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 <p> 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 <p> 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.

85 Comments

  1. Charles
    06 Jan 15
    • Andre
      07 Jan 15
  2. Martin MS
    23 Mar 15
  3. dadi hidayat
    22 Apr 15
    • Andre
      22 Apr 15
  4. Raditya dwi
    25 May 15
    • Andre
      26 May 15
  5. Hanif Khan
    05 Jul 15
    • Andre
      06 Jul 15
  6. cemong
    27 Jul 15
    • Andre
      28 Jul 15
  7. kaka
    04 Aug 15
    • Andre
      05 Aug 15
  8. cemong
    05 Aug 15
    • Andre
      05 Aug 15
  9. rizky
    07 Aug 15
  10. kyo
    24 Aug 15
    • Andre
      25 Aug 15
      • kyo
        25 Aug 15
  11. Panda Nyengir
    05 Nov 15
    • Andre
      05 Nov 15
  12. dimas
    27 Nov 15
    • Andre
      22 Feb 16
  13. Thomas
    17 Mar 16
    • Andre
      17 Mar 16
      • Anonymous
        11 Dec 19
        • Andre
          13 Dec 19
  14. Neva Yolanda
    23 Apr 16
    • Andre
      25 Apr 16
  15. yasin
    02 Jul 16
  16. adi
    08 Aug 16
    • Andre
      10 Aug 16
  17. fransiska
    05 Sep 16
    • Andre
      06 Sep 16
      • fransiska
        06 Sep 16
  18. Benhur
    05 Nov 16
    • Andre
      06 Nov 16
  19. Edi Purwanto
    24 Nov 16
  20. Sonatha
    25 Nov 16
    • Andre
      25 Nov 16
      • Sonatha
        29 Nov 16
        • Andre
          29 Nov 16
  21. wicaksono
    19 Dec 16
    • wicaksono
      19 Dec 16
  22. Anonymous
    28 Dec 16
    • Andre
      28 Dec 16
  23. QweenId Nod
    11 Jan 17
    • Andre
      12 Jan 17
  24. Amril
    26 Jan 17
    • Andre
      27 Jan 17
  25. chungkybar
    26 Jan 17
    • Andre
      27 Jan 17
  26. dinda
    17 Feb 17
    • Andre
      17 Feb 17
  27. kamil
    15 Mar 17
    • Andre
      16 Mar 17
  28. Devi Adi Nufriana
    14 May 17
  29. asep zaenuri
    06 Aug 17
    • Andre
      08 Aug 17
  30. Andra Hafiz
    13 Aug 17
  31. ArrzzzTP
    18 Dec 17
    • Andre
      20 Dec 17
  32. Muhammad Iqbal
    09 Apr 18
    • Andre
      10 Apr 18
    • Muhammad Iqbal
      19 Apr 18
  33. ssa
    01 Jun 18
  34. Nu_Ra
    14 Oct 18
    • Andre
      14 Oct 18
  35. Andri
    26 Mar 19
  36. Yoga
    05 Apr 19
  37. Kakak
    25 May 19
  38. nasrul
    11 May 20
  39. Nori Nofandi
    03 Jun 20
  40. Juwita natalia
    04 Jun 20
    • Andre
      04 Jun 20
  41. Jubran
    24 Jul 20
  42. Anonymous
    18 Sep 20
  43. M.Fitran
    02 Oct 20
  44. ainun
    24 Mar 21
  45. Anonymous
    30 Aug 23
    • Andre
      30 Aug 23

Add Comment