Mengambil nilai masukan dengan javascript

Question

Kali ini kita akan belajar cara mendapatkan nilai checkbox dengan javascript. Nilai dari komponen checkbox dapat kita ambil melalui bahasa pemrograman server-side seperti PHP, baca di Using the PHP checkbox. serta bahasa sisi klien seperti javascript

Table of Contents Show

Hasil Keluaran
Penjelasan singkat
Buat formulir
Buat Tombol
Elemen untuk ditampilkan
Membuat Javascript Mengenali Elemen HTML
Buat Fungsi untuk Ditampilkan
Apa itu nilai dalam javascript?
Bagaimana cara membuat komentar dalam javascript?

Dengan menggunakan checkbox kita bisa memilih lebih dari satu pilihan, sehingga nilai yang dikirim adalah multiple item. Berikut ini adalah contoh contoh program sederhana pengambilan nilai checkbox dengan javascript

  <input type="checkbox" name="hobi" value="Membaca">Membaca <br>
    <input type="checkbox" name="hobi" value="Menulis">Menulis <br>
    <input type="checkbox" name="hobi" value="Menari">Menari <br>
    <input type="checkbox" name="hobi" value="Bernyanyi">Bernyanyi <br>
    <input type="checkbox" name="hobi" value="Olahraga">Olahraga <br>
    <button id="submit">Submit</button>

    <div id="tampil"></div>
	
<script>
    var btn = document.getElementById("submit");

    btn.onclick = function() {
        var checkbox = document.getElementsByName("hobi");
        var hobi = "";
        for(var i = 0; i < checkbox.length; i++){
            if(checkbox[i].checked){
                hobi = hobi + checkbox[i].value +", ";
            }
        }
        document.getElementById("tampil").innerText = hobi.replace(/,\s*$/, "");
    }
</script>

Hasil Keluaran

Penjelasan singkat

Program diatas kita membuat 5 komponen checkbox dengan nama hobi, masing-masing checkbox memiliki nilai (value) yang berbeda. Kemudian terdapat juga button submit, pada button tersebut diberi atribut id dengan nilai submit. Nantinya ketika tombol ini diklik akan memicu event javascript dijalankan. Hasilnya akan ditampilkan pada elemen tag

dengan id ‘tampil’.

Program JavaScript ditandai dengan sintaks dalam tag. tombol kirim adalah variabel btn yang diinisialisasi yang mengacu pada atribut id tombol. Kemudian ketika tombol diklik (onclick) maka method akan dieksekusi, dimana variabel hobby diinisialisasi yang mengacu pada elemen dengan nama hobby. Kemudian perulangan for dilakukan dengan kode perulangan yang dilakukan kurang dari jumlah kotak centang yang dicentang. Lalu ada kondisi if untuk mencentang setiap checkbox, jika ada yang dicentang dengan status dicentang, maka nilainya akan diset di variabel hobby. nanti nilai hobby yang akan ditampilkan pada atribut id muncul

Gan, saya mau ambil input value dari jquery, gimana caranya?. ? . )

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Salah satu hal yang dapat dilakukan dengan Javascript adalah mengambil data dari form HTML dan menampilkannya kembali pada halaman web. Berikut adalah cara-cara yang dapat dilakukan untuk menampilkan data. Dimulai dari yang paling awal yaitu bentuk HTML

Buat formulir

Formulir ini digunakan sebagai sarana untuk menuliskan data-data yang diperlukan. Formulir dapat dibuat menggunakan elemen "input". Berikut adalah contoh penulisannya

Elemen input diberi atribut id agar dapat diakses dengan Javascript. Atribut id juga berfungsi untuk membedakan elemen masukan satu dengan lainnya

Misalnya pada contoh penulisan di atas, elemen pertama diberi id dengan nama “nama”, dan elemen kedua diberi nama “umur”. Elemen pertama dicadangkan sebagai tempat menuliskan nama, dan elemen kedua dicadangkan untuk usia

Atribut tipe juga penting dalam menulis elemen input. Hal ini untuk menentukan jenis input data. Misal pada input “nama”, tipe datanya harus text. Untuk input "usia", tipe datanya bisa berupa teks atau angka mengingat keduanya masih bisa menghasilkan angka untuk usia

Buat Tombol

Setelah input dibuat, selanjutnya adalah membuat tombol untuk memicu javascript untuk membaca data pada formulir HTML sekaligus untuk menampilkan kembali data tersebut.

Tombol dapat dibuat dengan elemen tombol atau elemen div biasa yang dilengkapi dengan atribut onclick. Atribut onclick digunakan untuk menjalankan fungsi tertentu saat tombol diklik

Berikut adalah contoh penulisan yang menggunakan elemen tombol

MENGIRIM

Elemen untuk ditampilkan

Bagian terakhir dari HTML adalah tempat data yang diperoleh kemudian ditampilkan. Tempat ini bisa dibuat menggunakan elemen apa saja. Pada contoh penulisan berikut, kita menggunakan elemen div

Agar elemen dapat diakses dengan javascript, atribut id dengan nama "tampilan" digunakan

Membuat Javascript Mengenali Elemen HTML

Setelah semua elemen tersedia di HTML, selanjutnya adalah membuat javascript dapat mengenali semua elemen di HTML. Elemen yang harus dikenali Javascript adalah elemen input dan elemen untuk ditampilkan

Untuk membaca data pada elemen HTML, pemilih "id" digunakan seperti pada contoh berikut

Dengan baris program di atas, Javascript telah mengenali input dan tampilan

Buat Fungsi untuk Ditampilkan

Fungsi ini bekerja ketika tombol yang digunakan untuk mengirim data ditekan

Berikut penulisan penulisan fungsi

Saat tombol ditekan, fungsi send() dijalankan. Fungsi ini mengumpulkan data dari elemen dengan id "nama" dan id "umur" dan kemudian menampilkannya pada elemen dengan id "tampilan". Data dari kedua elemen tersebut kemudian ditampilkan dipisahkan dengan koma ","

Apa itu nilai dalam javascript?

Nilai atau value bisa dikatakan data yang disimpan dalam sebuah variabel, baik berupa teks, angka, tanggal atau lainnya . Kita dapat mengambil nilai dari variabel yang tersedia dan menyimpannya ke variabel lain.

Bagaimana cara membuat komentar dalam javascript?

Komentar multi baris dimulai dengan /* (garis miring bintang) dan diakhiri dengan */ (garis miring bintang) . Setiap kode atau teks antara /* dan */ tidak akan dieksekusi oleh mesin.

kode javascript