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:
See the Pen YPXPqa by duniailkom (@duniailkom) on CodePen.
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, 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.
mantap admin.. sangat berguna..:)
Terimakasih charles, semoga bermanfaat :)
Sangat bermanfaat gan,, thanks udah share..
mantafff banget gan,, berguna banget bagi pemula seperti saya tutornya jelas dan bisa di mengerti..
oya gan saya mau tanya donk, cara membuat form untuk jual beli tuh gimana ya??
jadi cara kerjanya kita isi form duulu sesuai produk yang kita ingin isi, tterus setelah ngisi langsung nampil dan bisa di nikmati oleh visitor gituu. tolong bantu ane ya gan kasih tahu caranya..
bisikin ane ya di email ane [email protected]
Wah, untuk membuat sistem seperti itu cukup panjang gan, dan umumnya data form juga akan disimpan di dalam database. Kalau agan memang perlu kode program seperti itu, bisa pertimbangkan ke sini: Jasa konsultasi proyek web programming.
Sebagai gambaran, untuk membuat jual-beli (shopping cart) bisa menggunakan modul session dari PHP untuk menyimpan data/barang apa saja yang telah dibeli.
kalo javascriptnya terpisah bisa juga kan
Ya, tidak masalah.. selama JavaScript tersebut bisa mengakses kode HTMLnya :)
itu bisa dipadukan dengan besar kecil atau style berpengaruh apa engak gan
Kalau untuk operasi perbandingan, berpengaruh gan, Soalnya di dalam JavaScript case sensitif, sehingga "Bandung" tidak sama dengan "bandung".
klw saya mau bikin
tpi ga bisa di acces karena salah masukin password… gmn caranya ya??????
Maksudnya password apa gan? Kode javascript dan HTML ini ga membutuhkan password kok, tinggal buat di notepad++ saja dan dijalankan secara lokal (offline) :)
gan, kalau manggil radio button melalui localstorage gimana?
mohon pencerahannya :D
Local Storage HTML5 y gan? mungkin menyusul di tutorial lainnya.. hehe :)
gan, saya coba pindahin functionnya ke external…tapi ga bisa ya????
bisa kasih penjelasan??? atau mungkin dari saya yg salah..Trimah kasih…
Seharusnya g masalah sih gan, tapi coba di periksa penulisan tag scriptnya apakah sudah benar, atau coba pindahan ke bagian bawah halaman..
gan saya mau tanya saya punya project mau tanya kalau script jquery buat pass klik add muncul form input dan begitu di klik lagi muncul input kalau begitu script nya kaya gmn ya gan trims
gan klo nampilin na di beda form perintah javascript na gimana ?
Maksudnya beda form gimana y? apakah ada 2 form?
Bisa di coba dengan menyesuaikan atribut id pada setiap objek formnya gan… nanti tinggal ganti aja perintah document.getElementById("nama_id_form").select1.value.
y gan jadi misalkan kita buat form inputan pas button na di klik kebuka form ke 2 dengan isi inputan
Gan, Kalo misalnya ane mau ngambil data "nama kota" sama "penjelasan kota" dari database gimana?
Kalau ambil dari database harus menggunakan PHP gan, mungkin bisa dipelajari dulu tutorial PHP dan MySQL. Sudah ada kok di duniailkom :)
saya punya satu teks, satu tombol dan satu tabel pertanyaannya adalah saya ingin menginput isi teks tersebut agar masuk ke tabel secara terus menurus, contoh saya masukan jakarta di teks tersebut maka di tabel masuk jakarta, saya masukan lagi di teks tersebut bogor maka di tabel ada jakarta dan bogor, begitu seterusnya..(tanpa database) terimakasih
mastah mau nanya kalau saya ingin memasukkan file js yg pernah saya buat dari web sebelumnya ke web baru apa saja yg harus dilakukan agar file js itu bekerja di web baru yg saya buat? misalkan file js untuk navbar menu yg mengikuti ketika di scroll dan saya ingin masukkan file tersebut ke web baru saya.
terima kasih
Dalam kebanyakan kasus, kode JS g bisa dicopy paste begitu saja gan, harus disesuaikan lagi dengan struktur HTML di web yang baru. Misalnya di web lama menggunakan id="nav" untuk menu navigasi, sedangkan di web baru menggunakan id="navigasi", otomatis kode js-nya tidak bisa jalan.
Kalau dulu agan buat sendiri, tentunya bisa dimodif sendiri kode javascriptnya agar sesuai dengan struktur web yang baru.
Gan, makasih untuk pembuatan web yang sangat berguna ini
sekalian mau nanya, klo untuk contoh menampilkan isi form ini, jika deskripsi kota-nya ada beberapa paragraf dan mengandung list, gimana caranya ya?
Maksudnya ketika option dipilih akan ditampilkan penjelasan yang detail dengan 2 – 3 paragraf dan dengan list atau table.
Konsepnya sama saja gan, cuma sedikit lebih panjang, misalnya di bagian innerHTML bisa dibuat menjadi:
innerHTML="<p>Paragraf pertama</p><p>Paragraf kedua</p>";
kalo di tambah menampilkan gambar kira kira bisa nggak kak ?
Bisa, tinggal disesuaikan saja isi kode HTML yang dipakai, misalnya:
innerHTML="<img src="gambar.jpg">";
akhirnya, bisa juga nyelesain project. makasih gan artikelnya sangat membantu :-D
Siip, sama2 gan…
Sangat berguna gan :)
Gan mau tanya nih, kalo buat form biodata diri menggunakan CSS tapi nanti outputnya Javascript, itu gmna caranya?
Formnya tetap dibuat dengan HTML sis. CSS digunakan untuk mendesain tampilah formnya, seperti mengubah warna, ukuran tulisan, dll. JavaScript bisa digunakan untuk menampilkan hasil form seperti dalam tutorial ini. Tp sebenarnya lebih pas kalau PHP yang memproses form ini, agar bisa disimpan ke database. Mengenai caranya, harus dipelajari satu2 dulu sis, mulai dari HTML dulu, setelah itu ke CSS, dst…
Mirip dengan cara membuat kue, tentu kita belajar dulu cara menggunakan oven, hehe.. :)
gan kalo selectnya kebih dari satu gimana?
gan saya suruh membuat text area,
yang mana layar di bagi 2 (kayak google traslate itu gan,, )
nah sebelah kiri itu adalah input, dan yg kanan itu 0utputnya,
di bawah input ada button enter,
kalo di tekan enter,,
tulisan yg di tulis di input tadi pindah ke output,
dan kalo mau nulis, dan enter lagi,
output pertama gk hilang gan
tpi pindah kebawah,,
dan di bawah kotak output, ada button clear
yang kalo di tekan, akan hilang semua
, minta bantuannya y gan,,
tau gk maksudq
Wah, ini butuh waktu yang g sebentar buatnya gan, bisa berhari2 hingga mingguan… Sebaiknya bisa cari jasa programmer saja gan.
gan kalo misalkan saya ingin menampilkan sebuah tabel dari salah satu opsi,
misalnya saat mengklik kota jakarta, maka hasil yang ditampilkan adalah sebuah table yang isinya jenis profesi dan jumlah penduduk. itu gimana yaa.. dibantu yaa:)
Isi tabel itu dapat dari mana sis? kalau dari database, kita harus menggunakan PHP dan MySQL. Tutorialnya lumayan panjang soalnya banyak yang mesti dibahas, mulai dari pemrosesan form HTML, processing di PHP, menyimpan ke database MySQL dan menampilkannya. Belum lagi menggunakan CSS agar tampilan tabelnya lebih rapi.
Tutorial tersebut sebenarnya sudah ada di duniailkom, tapi terpisah2. Silahkan ikuti secara berurutan mulai dari HTML, CSS, PHP, dan MySQL.
tabelnya udah saya buat di html gan, ga pake php. itu kaya gimana ya
mengapa salama ini tidak bisa memasukan komentar om Andre
Sepertinya g ada masalah nih mas, saya cek id: Benhur sudah 4 kali membuat komentar… atau mungkin koneksi jaringannya kurang bagus.
makasih gan, ini sangat membantu saya.
Gan, mau nanya donk. Terkait dengan artikel ini, kalau mau memunculkan keterangan kotanya tanpa ada tombol, gmn ya gan? Jadi, kalau kita mengubah pilihan dari dropdown, otomatis keterangannya berubah.
Yang bagian HTMLnya bisa diubah menjadi seperti ini sis:
<form id="form1" name="form1" onsubmit="return false">
<label for="select1">Pilih Kota: </label>
<select id="select1" name="select1" onchange="tampilkan()">
<option value="jakarta">Jakarta</option>
<option value="bandung">Bandung</option>
<option value="bogor">Bogor</option>
</select>
</form>
Kita memindahkan atribut event onchange="tampilkan()" ke dalam tag <select>
Terima kasih mas Andre. Btw, apakah perlu ada atribut "onsubmit" lagi di tag form? Atau bagaimana mas?
Oh ya, boleh dihapus. Itu fungsinya untuk menahan form agar tidak tersubmit ke server (PHP).
kak andre, agar program diatas jalan tanpa perlu submit, gimana ya,.
tanpa harus tekan tombol keterangan, bisa tampil keterangannya, jadi pas milih kota, bs langsung muncul.
casenya sama seperti punya kak sonatha, cuma kalau itu input gimana ya kak, bukan dropdown.
misal input : jakarta
output nya langsung keluar : Jakarta Ibu kota Republik Indonesia.
master saya udh pelajari html dan css.
terus udh bisa bikin mega menu pakai html dan css.
mana yang sbaiknya saya lanjutkan php/java script
Yang mana aja g masalah kok gan.. selama udah paham HTML dan CSS, bisa lanjut ke PHP atau JavaScript.
Jika sebelumnya belum punya background programming, bisa ke PHP dulu. Soalnya JavaScript agak rumit karena sudah berbasis object.
Mau Tanya Gan.. Cara Buat form untuk edit html itu gimana yah ? .. Misalnya Kayak di blogger kalo mau postingan kan ada kompose sama yg satunya tuh yang begitu pokoke lah … Tolong penjelasannya … Kalo udah di jawab tolong hubungi [email protected] [ Tutor di sini ( Duniailkom ) memang lengkap kurang itu aja ]
Itu sudah cukup kompleks gan, udah termasuk materi advanced. Atau bisa juga pakai aplikasi pihak ketiga seperti tinymce.com atau ckeditor.com. Syaratnya mesti sudah paham HTML, CSS, dan JavaScript. Kalau teksnya mau disimpan ke database, mesti paham PHP dan MySQL juga.
Pagi gan, ane mau tanya kalau misalnya ane bikin nya mau jadi kaya gini gimana ya gan
Sebelum masuk ke kota ada pilihan dlu daerahnya, misal :
[pilihan ke 1] Jawa Barat
hasil : [pilihan ke 2]Bandung
baru hasil akhir : Kota Kembang
atau seperti ini
[pilihan ke 1]Jawa Barat
hasil : [pilihan ke 2]Garut
hasil akhir : Dodol
jadi sesudah ane pilih masih ke menu pilihan lagi ga langsung ke akhir gitu..
Di tampung dulu y gan,.. prinsipnya sama seperti diatas, tapi tentu ada tambahan kode lain dan pemeriksaan kondisi if untuk mengecek tiap2 kota.
Bang, ane mau nanya, setiap ane buat select yang kaya di atas ko slalu munculnya kaya kedip gitu, nongol sedetik terus ilang, itu kenapa ya?
padahal hasilnya sudah bisa…
Kodenya persis seperti diatas (dicopy paste), atau ada tambahan kode2 lain? Mungkin disebabkan oleh kode tersebut. Atau bisa juga test menggunakan web browser lain.
kak gimana ya caranya, kan aku buat table, rumusnya itu diambil dari inputan di fieldnya, terus hasil perhitunganya itu mau dibuat rumus lagi. hasilnya langsung tampil kak. gimana ya. dibales ya kak, aku udah ke tiga ini nanya blm dibales. mohon bantuanya kak. trmksh.
Hehe.. gimana cara jawabnya y, soalnya pertanyaannya cukup mendasar dan mau g mau mesti paham JavaScript secara keseluruhan… Ini akan menggunakan konsep DOM, Event, Form Processing dan tipe data JavaScript.
Di buku JavaScript Uncover saya butuh ratusan halaman untuk membahas ini semua. Itupun harus di analisis dulu struktur tabelnya seperti apa, jenis data yang ingin diproses berjenis apa, hasilnya mau ditampilkan dimana, dst.
Gan, kalo misalnya buat pesan alert pada form yg belum diisi bagaimana yah?
Misal kalo diantara form option atau input text atau gambar belum diisi, akan menampilkan pesan "$namaform belum diisi"
Tapi kalo semua diisi lengkap formnya, langsung masuk ke tab page utama yg dimana page tsb berisi tabel hasil pengisian form.
Mohon bantuannya, mepet banget nih
Kirimin jawabannya ke email ya gan, thanks be4 T.T
Paling simple bisa pakai atribut required bawaan HTML5, contohnya seperti ini:
<input type="text" name="username" required>
Nanti akan keluar pesan error jika form tidak diisi.
Tapi kalau agan pengen pesan errornya di ganti, atau posisinya ditukar, mesti pakai JavaScript, dan harus paham syntax JavaScript dulu termasuk DOM dan event.
gan ane mau tanya gimana cara ngambil data dari session, seperti komentar yang udah login tanpa orang itu masukin namanya udah muncul siapa yang komentar, terus sama ane mau tanya gimana cara ane membuat form berita, tanpa harus reload masuk langsung ke datanya pake javascript.. ini action buat masukin data ke php,,
$sql = "INSERT INTO berita (judul, isi)
VALUES ('$judul', '$isi')";
if ($conn->query($sql) === TRUE) {
header('location: profile.php');
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
maaf gan kalo kepanjangan, kalo ane tanpa if ga jalan soalnya gan… makasih sebelumnya
Permisi gan mau tanya, kan saya coba pakai link google form yang saya gunakan di postingan artikel menggunakan "iframe" untuk menamilkan form halaman google form, tapi kenapa pada saat saya pasang, witget seperti popular post, label, arsip pada halaman sebelah kanan jadi ke bawah ya, mohon bantuannya gan, terima kasih
Harus diperiksa dulu struktur HTML dan CSS dari blognya. Bisa jadi ukuran google form terlalu lebar untuk halaman tersebut, sehingga harus di sesuaikan dengan meng-edit kode HTML dan CSS dari template/theme yang dipakai.
kak bagaimana ya cara nya misalnya kita pilih "Bandung" lalu Button "Tampilkan Keterangan" menjadi "Bandung" juga (Value dari Button Tersebut….mohon pencerahnya kak
gan, saya mau tanya nih. gmna ya caranya menampilkan hasil input ke page berikutnya?
jadi contohnya, kita melakukan order beberapa barang, dan setelah di submit, order item yang sudah kita pilih tersebut dapat muncul ke page berikutnya menjadi order list.
Untuk memproses form, sudah kerjaannya PHP. Nanti barang yang diorder itu bisa disimpan kedalam database atau di cookie.
min kalo mau menampilkan baris tabel dengan innerHTML gimana ya..
baris.innerHTML+="<tr>
<td><input type='text' name='size[1]' /></td>
<td><input type='text' name='qty[1]' /></td>
<td><input type='text' name='harga[1]' /></td>
</tr>";
ane coba kaya gini koq gagal. mohon bantuanya min. terima kasih
Saya lihat sekilas tidak ada yang salah di kode tersebut. Bisa jadi ada bagian lain yang error. Atau bisa test tambahkan tag <table> di awal dan akhirnya: baris.innerHTML+="<table><tr>…". Tapi ini tergantung kode HTMLnya juga, jika sudah ada tag <table>, tidak perlu ditulis lagi.
udah bisa min. di kasih backslas untuk tiap variable. dan enternya di ilangin
baris.innerHTML+="<tr><td><input type=\"text\" name=\"size[]\" id=size /></td><td><input type=\"text\" name=\"qty[]\" /></td><td><input type=\"text\" name=\"harga[]\" /></td></tr>";
gan gimana kalau saat kita pilih salah satu menu dari dropdown , misal pilih menu pilihan ganda maka muncul form html beserta css pilihan ganda .. ? itu gimana yah gan
waw saya pusing baca komen komen diatas wkwkwk
apakah kalo beda form tetep bisa di tampilin tanpa database min ?
kalau menyimpan data tanpa database masuknya ke mana ? cookies ?
terima kasih
Sebenarnya pemrosesan form seperti ini lebih pas dilakukan di PHP, bukan di JavaScript. Karena kalau dibuat di JavaScript, data tersebut tidak bisa disimpan. Jika dipaksa2 bisa sih disimpan di cookies, tapi itu tidak permanen. Cookies berada di web browser, dan pengunjung bisa saja mengubah nilainya sendiri.
Kalau ingin hasil form disimpan secara permanen, harus di proses menggunakan PHP dan disimpan ke dalam database seperti MySQL.
Terima kasih untuk ilmunya :D
Gan, kalo mau inlut data lagi caranya gimana gan
Gan, mau nanya donk. Terkait dengan artikel ini gan. Kalau mau memunculkan keterangan yang di pilih itu tampil di dalam area sama dan dibuatkan khusus kolom bagaiamana bikinnya. Maksud begini gan, agar program diatas jalan tanpa perlu submit, dan,. bisa tampil keterangannya saat di pilih masuk kolom, contoh milih kota Jakarta, maka bisa langsung muncul otomatis keterangannya di tempat kolom itu, itu bagaimana yah caranya.
<div id="petition-form">
<form>
<input id="first-name" type="text">
<input id="last-name" type="text">
<input id="city" type="text">
<input id="zip-code" type="number">
<input id="check" type="checkbox">
<div id="warning"></div>
<button id="submit-form-button" type="submit"></button>
</form>
</div>
Buat fungsi bernama `getFormData` yang membaca isi dari 5 `<input>` di atas dan mengembalikan sebuah objek yang memiliki properti `firstName`, `lastName`, `city`, `zipCode` dan `check`.
minta tolong min kalo begini gimana contoh penerapan kodenya
kang Andre, mau nanya nih
<input type="text"> <!– form 1 –>
<input type="text"> <!– form 2 –>
kalo kasusnya gini
saya nginput text di form 1 terus value yang diketik tadi langsung muncul di form 2 secara realtime
itu gimana ya?
Kak saya mau nanya, bagaimana cara mengontrol html dengan javascript?
Mohon dijawab ya kak
Hehe, jawaban paling pas "Silahkan belajar JavaScript dari awal", karena memang tidak ada cara instant untuk menjawab pertanyaannya.
Untuk bisa mengakses element HTML dari JavaScript materi utama yang harus dikuasai adalah DOM (Document Object Model) dan Event.
Kang Andre, kalo misalnya cara di atas di dalam keterangan disertai gambar caranya gimana??
Mas,kalau nama kotanya di ganti textarea gimana? Misal saya ketik jakarta lalu saya klik tampilkan keterangan
Mau nanya gan, kan formnya gak diisi tapi di form actionnya saya arahin ke halaman lain, tapi kok malah ketempat yang saya arahin menggunakan form actionnya ya?
bagaimana lok mw menyisipkan gambar pada keteran kota tsb.. mohon petunjuknx gan
SEBAIKNYA INSTRUKSI ELSE TIDAK PERLU DIBUAT, CUKUP HANYA IF SAJA UTK MEMILIH KE 3 KOTA PADA JAVASCRIPTNYA.
Terimakasih masukannya. Betul, jika pakai if saja sebenarnya kode program diatas sudah bisa jalan. Tapi dengan menambahkan else, dalam beberapa kasus bisa lebih efisien.
Jika hanya if saja, maka semua kondisi akan selalu diperiksa. Tapi jika menggunakan if else, kondisi kedua hanya di periksa jika kondisi pertama tidak cocok. Jadi di best case scenario, pemeriksaan kondisi hanya perlu dilakukan 1 kali jika menggunakan if else.