Dalam artikel kali ini akan dibahas tentang Bagaimana Cara Menampilkan Hasil Form HTML dengan JavaScript.

Pada kesempatan kali ini akan dijelaskan tentang bagaimana bila kita klik button pada sebuah form yang nantinya akan menghasilkan informasi sesuai pilihan yang ada pada form 1, yang akan ditampilkan dibawah form.

Disini akan dicoba 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 digunakan untuk menampilkan hasil diatas:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

<!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>

 

 Kode HTML

Untuk membuat contoh form, berikut adalah kode HTMLnya:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<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 dibuat 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.

Objek form <select> diberi 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 kita 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 dilakukan karena kita akan menampilkan hasil form dengan JavaScript, bukan dengan PHP seperti biasanya, sehingga tidak diperlukan fungsi bawaan tersebut.

Sebagai gantinya, pada tag <submit>, akan ditambahkan 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, akan ditambahkan 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, akan dibuat sebuah fungsi tampilkan() yang akan dieksekusi ketika tombol submit di tekan. Berikut adalah kode JavaScriptnya:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<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 kita letakkan pada bagian <head>, dan hanya berisi 1 fungsi, yakni: tampilkan().

Pada baris pertama, akan dibuat variabel nama_kota yang akan mengambil isi tag <select> dari form. Dengan menggunakan perintah document.getElementById bisa 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, dibuatlah 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 disimpan 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 kita tinggal menyeleksi dan menampilkan hasil yang sesuai. Karena dengan membuat 3 buah nama kota, maka kita 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, bias 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 karena 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, hanya tinggal mengulang kondisi IF agar hasilnya sesuai.

 

#http://www.duniailkom.com/cara-menampilkan-hasil-form-html-dengan-javascript/

Bingung tentang sourcecode atau pemrograman yang ingin dipelajari? TANYA DI SINI
Bingung cari modul, soal, pembahasan mata kuliah? CARI DI SINI