Cara Menghubungkan Hasil Form HTML dengan JavaScript
Cara Menghubungkan Hasil Form HTML dengan JavaScript - Menghubungkan bahasa HTML dengan JavaScript merupakan salah satu pelajaran penting yang harus dikuasai sebagai seorang web developer. karena untuk membuat sebuah website ataupun aplikasi khususnya berbasis web, harus mampu menggabungkan berbagai bahasa pemrograman seperti html, css, javascript, php dan lain sebagainya.
JavaScript Functions dan Events - Seperti pada pemrograman lainya, javascript mempunyai function untuk memanggil blok kode program. Misalnya pemanggilan function ketika terjadi event seperti mengeklik tombol button. function pada JS ini sangat berfungsi untuk memanggil hasil form dari html untuk saling berhubungan dan menghasilkan sebuah hasil yang suitable.
Posisi Kode JavaScript di HTML - Kita bisa menempatkan dimanapun script kode javascript ke dokumen HTML. Kode dapat diletakan di bagian <body>, atau pada <head> dari halaman HTML dengan posisi diantara kedua kode tersebut. Selain itu, anda bisa memanggil eksternal JavaScript seperti menggunakan CSS.
Hasil Form HTML dengan JavaScript
Menghubungkan JavaScript pada <head> - Anda bisa meletakan function JavaScript pada bagian <head> dari HTML. Berikut ini contoh pemanggilan function ketika tombol di klik.
Berikut adalah kode HTML+JavaScript yang saya gunakan untuk menampilkan sebuah hasil pemanggilan yang saling berhubungan satu sama lain:
Hasil Tampilan
Berikut ini adalah hasil tampilan dari script code Html+JavaScript yang ada diatas :
Menghubungkan Hasil Form HTML dengan JavaScript
Kode HTML
Untuk membuat hasil tampilan seperti diatas yang menguhungkan hasil form HTML dengan JavaScript, berikut adalah kode HTMLnya :
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 bahasa: HTML, CSS, dan JavaScript.
Coba anda perhatikan script diatas, 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 merupakan fungsi tampilkan() yang akan dieksekusi saat tombol submit di klik. Berikut adalah kode JavaScriptnya:
Kode JavaScript diatas saya letakkan pada posisi diatas tag </head>, dan hanya berisi 1 fungsi, yakni: tampilkan().
Kesimpulan
Pada baris pertama, saya membuat variabel nama_bahasa 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_bahasa.
Variabel yang kedua adalah p_kontainer. Variabel tersebut berisi objek dari kontainer dimana keterangan tentang bahasa 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 bahasa yang saat ini terpilih, berikutnya kita tinggal menyeleksi dan menampilkan hasil yang sesuai. Karena saya membuat 3 buah nama bahasa, maka saya memerlukan 3 buah kondisi if untuk memeriksa dan menampilkan data yang sesuai.
Jika variabel nama_bahasa yang dipilih adalah HTML, maka tampilkan output "HTML (Hypertext Markup Language) adalah salah satu bahasa dasar yang digunakan untuk membangun sebuah halaman web pada browser (penjelajah web)." 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="HTML (Hypertext Markup Language) adalah salah satu bahasa dasar yang digunakan untuk membangun sebuah halaman web pada browser (penjelajah web)." Untuk bahasa CSS dan JavaScript, kita tinggal mengulang kondisi IF agar hasilnya sesuai.
Demikian posting kali tentang Cara Menghubungkan Hasil Form HTML dengan JavaScript. Semoga artikel ini bermanfaat dan dapat membantu Anda. Yuk share artikel ini untuk membantu teman-teman yang lain. Terima kasih!
samuelpasaribu.com
samuelpasaribu.com working in the Search Engine Optimization field since 2019. And worked on many successful projects since then. He shares the real-life experience of best SEO practices with his followers on samuelpasaribu.com. You also can learn Advance level SEO for WordPress, Blogger, or any other blogging platform. Stay tuned.
