http://www.duniailkom.com/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:
<!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:
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.