Tutorial Belajar jQuery Part 7: Cara Mengambil Nilai HTML dengan jQuery

Posted on

Di lanjutan tutorial belajar jQuery di Source Code Program ini saya akan membahas cara mengambil nilai elemen HTML menggunakan jQuery.

Mengambil nilai dari sebuah element HTML lumayan sering dilakukan. Misalkan saya membangun kotak isian form <input type=”text”>. Bagaimana cara mengambil nilai yang telah diisi menggunakan JavaScript?

Dengan JavaScript ‘murni’ kita dapat menggunakan property innerHTML. Namun caranya lumayan panjang karena mesti digabung dengan kegunaan document.getElementById(). Saya telah pernah membangun tutorialnya di Tutorial Cara Mengambil Nilai HTML dengan JavaScript.

Dengan jQuery, caranya lebih simple dan lebih singkat.


Cara Mengambil nilai HTML dengan Method text() jQuery

Program pertama-tama untuk mengambil nilai sebuah faktor HTML dengan jQuery yakni menggunakan method text(). Caranya lumayan menambahkan method/kegunaan text() ke jQuery Selector.

Berikut contoh penggunaannya:

See the Pen Cara Mengambil nilai HTML dengan Method text() jQuery by duniailkom (@duniailkom) on CodePen.10206

Untuk mengambil nilai teks yang terdapat didalam tag <p id=”paragraf”>, saya dapat menggunakan pedoman $(“#paragraf”).text(). Berikutnya nilai ini disimpan ke di variabel nilai, lalu ditampilkan dengan kegunaan alert(nilai).

Bila rekan-rekan men-klik tombol “Ambil Nilai” , hasilnya yakni: “Sedang belajar jQuery di Source Code Program…”. Perhatikan bahwa method text() akan menghapus semua tag HTML yang terdapat di di tag <p>, seperti tag <em> dan <b> yang pun berada di di paragraf tersebut.

Bagaimana jikalau kita pun ingin mengambil nilai yang terdapat di di tag <p> komplit dan pun tag HTML-nya? Gunakan method html() jQuery


Cara Mengambil nilai HTML dengan method html() jQuery

Cara berikutnya untuk mengamnil nilai HTML dengan jQuery yakni menggunakan method html(). Penggunaannya sama persis dengan method text(). Bedanya, hasil dari method html() akan tetap mempertahankan tag HTML yang terdapat di di element HTML tersebut.

Menggunakan contoh yang sama, berikut hasil yang di dapat dengan method html():

See the Pen Cara Mengambil nilai HTML dengan Method html() jQuery by duniailkom (@duniailkom) on CodePen.10206

Seperti yang terlihat, kali ini hasil nya yakni: “Sedang belajar <em>jQuery</em> di <b>Duniailkom…</b>”.


Cara Mengambil nilai form HTML dengan method val() jQuery

Bagus method text() maupun html() telah mencukupi untuk mengambil nilai yang terdapat disetiap element HTML. Tetapi khusus untuk form, jQuery menyediakan method val(). Seketika saja kita lihat contoh penggunaannya:

See the Pen Cara Mengambil nilai form HTML dengan method val() jQuery by duniailkom (@duniailkom) on CodePen.10206

Kali ini saya mempunyai sebuah tag <input type=”text”>. Silahkan seketika rekan-rekan klik tombol “Ambil Nilai”, atau ubah teks yang terdapat di di inputan form tersebut. Command $(“#nama”).val() akan menampilkan nilai apapun yang rekan-rekan input ke di isian form tersebut.

Bagaimana dengan objek form lain seperti <select>?

Caranya sama persis, berikut contohnya:

Silahkan rekan-rekan pilih diantara nama kota, lalu klik tombol “Ambil Nilai”. Nilai yang ditampilkan berasal dari atribut value dari setiap tag <option>.

Bagaimana dengan checkbox?

Untuk checkbox perlu penyeleksian lebih lanjut, karena jikalau menggunakan method val() secara seketika, nilai form akan dikembalikan apapun kondisi checkbox (bagus telah dipilih maupun belum). Untuk mengatasi hal ini, kita dapat menggunakan selector khusus jQuery, yakni :checked.

Berikut contoh penggunannya:

Disini saya mempunyai 3 check box: Keren, Ganteng dan Cool. Ketika tombol Ambil Nilai di klik, akan dijalankan pedoman berikut:

Artinya, variabel nilai1, nilai2 dan nilai3 akan berisi value dari checkbox hanya ketika kondisi checkbox tersebut di keadaan ter-checklist (perhatikan cara penulisan jQuery selector, #keren:checked).

Silahkan rekan-rekan coba dari link codepen berikut:

See the Pen Cara Menambil Nilai Checkbox dengan jQuery by duniailkom (@duniailkom) on CodePen.10206

Akan tetapi, kini muncul masalah baru. Ketika checkbox tak terpilih, method val() akan mengembalikan nilai undefined. Ini terjadi karena selector :checked tak menemukan element HTML yang kita tulis (karena belum di check).

Bagaimana cara mengatasinya? lumayan dengan menambahkan beberapa kondisi IF, dimana jikalau isi variabel nilai yakni undefined, lakukan sesuatu, misalnya mengosongkan variabel.

Berikut revisinya:

See the Pen Cara Menambil Nilai Checkbox dengan jQuery by duniailkom (@duniailkom) on CodePen.10206

Kali ini ketika tombol Ambil Nilai di klik, yang akan tampil hanyalah nilai checkbox yang telah dipilih. Di kasus seperti ini rekan-rekan pun dapat menyaksikan bahwa jQuery saja tidaklah lumayan. Kita tetap membutuhkan JavaScript basic untuk menangani masalah yang muncul.


Di panduan jQuery kali ini kita telah mempelajari cara menggunakan jQuery untuk mengambil nilai element HTML, termasuk mengambil nilai form. Berikutnya, saya akan membahas cara mengubah atau memasukkan nilai baru kedalam HTML melalui jQuery.


Sumber https://www.duniailkom.com/