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

Dalam lanjutan tutorial belajar jQuery di duniailkom ini saya akan membahas cara mengambil nilai elemen HTML menggunakan jQuery.

Mengambil nilai dari sebuah element HTML cukup sering dilakukan. Misalkan saya membuat kotak isian form . Bagaimana cara mengambil nilai yang sudah diisi menggunakan JavaScript?

Dengan JavaScript ‘murni’ kita bisa menggunakan property innerHTML. Namun caranya cukup panjang karena harus digabung dengan fungsi document.getElementById(). Saya sudah pernah membuat 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

Metode pertama untuk mengambil nilai sebuah elemen HTML dengan jQuery adalah menggunakan method text(). Caranya cukup menambahkan method/fungsi text() ke jQuery Selector.

Berikut contoh penggunaannya:

   Sedang belajar jQuery di Duniailkom...

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

Untuk mengambil nilai teks yang ada didalam tag

, saya bisa menggunakan perintah $(“#paragraf”).text(). Selanjutnya nilai ini disimpan ke dalam variabel nilai, lalu ditampilkan dengan fungsi alert(nilai).

Jika anda men-klik tombol “Ambil Nilai” , hasilnya adalah: “Sedang belajar jQuery di Duniailkom…”. Perhatikan bahwa method text() akan menghapus semua tag HTML yang terdapat di dalam tag

, seperti tag dan yang juga berada di dalam paragraf tersebut.

Bagaimana jika kita juga ingin mengambil nilai yang ada di dalam tag

lengkap beserta tag HTML-nya? Gunakan method html() jQuery

---

Cara Mengambil nilai HTML dengan method html() jQuery

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

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

   Sedang belajar jQuery di Duniailkom...

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

Seperti yang terlihat, kali ini hasil nya adalah: “Sedang belajar jQuery di Duniailkom…”.

---

Cara Mengambil nilai form HTML dengan method val() jQuery

Baik method text() maupun html() sudah mencukupi untuk mengambil nilai yang ada disetiap element HTML. Tapi khusus untuk form, jQuery menyediakan method val(). Langsung saja kita lihat contoh penggunaannya:

Nama: 

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

Kali ini saya memiliki sebuah tag . Silahkan langsung anda klik tombol “Ambil Nilai”, atau ubah teks yang ada di dalam inputan form tersebut. Perintah $(“#nama”).val() akan menampilkan nilai apapun yang anda input ke dalam isian form tersebut.

Bagaimana dengan objek form lain seperti ?

Caranya sama persis, berikut contohnya:

Pilih Kota:

   Jakarta
   Bandung
   Bogor

Silahkan anda pilih salah satu nama kota, lalu klik tombol “Ambil Nilai”. Nilai yang ditampilkan berasal dari atribut value dari setiap tag .

Bagaimana dengan checkbox?

Untuk checkbox perlu penyeleksian lebih lanjut, karena jika menggunakan method val() secara langsung, nilai form akan dikembalikan apapun kondisi checkbox (baik sudah dipilih maupun belum). Untuk mengatasi hal ini, kita bisa menggunakan selector khusus jQuery, yakni :checked.

Berikut contoh penggunannya:

Saya itu: 
   Keren
   Ganteng
   Cool



  

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

var nilai1 = $("#keren:checked").val();
var nilai2 = $("#ganteng:checked").val();
var nilai3 = $("#cool:checked").val();
alert(nilai1+' '+nilai2+' '+nilai3);

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

Silahkan anda coba dari link codepen berikut:

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

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

Bagaimana cara mengatasinya? cukup dengan menambahkan beberapa kondisi IF, dimana jika isi variabel nilai adalah undefined, lakukan sesuatu, misalnya mengosongkan variabel.

Berikut revisinya:

 


Saya itu: 
   Keren
   Ganteng
   Cool



  

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 sudah dipilih. Dalam kasus seperti ini anda juga bisa menyaksikan bahwa jQuery saja tidaklah cukup. Kita tetap membutuhkan JavaScript dasar untuk menangani masalah yang muncul.

---

Dalam tutorial 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 wk.com