Tutorial javascript: Cara Menampilkan Hasil Form HTML dengan javascript
Article duniailkom
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.
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.
<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:
Menampilkan Hasil Form HTML dengan JavaScript
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.
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, sayamenambahkan 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. Sayamenggunakan 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.
Author: Andre Duniailkom
Thanks and see you... Bye-bye...
Thanks to"
duniailkom
0 Response to "Tutorial javascript: Cara Menampilkan Hasil Form HTML dengan javascript"
Post a Comment
Silahkan tinggalkan jejak!