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 <input type=”text”>. 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:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery Duniailkom</title>
<script src="jquery-2.1.4.js"></script>
<script>
   $(document).ready(function() {
 
     $("#tombol").click(function() {
       var nilai = $("#paragraf").text();
       alert(nilai);
     })
 
   });
   </script>
</head>
<body>
<p id="paragraf">
   Sedang belajar <em>jQuery</em> di <b>Duniailkom...</b>
</p>
<button id="tombol">Ambil Nilai</button>
</body>
</html>

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 <p id=”paragraf”>, 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 <p>, seperti tag <em> dan <b> yang juga berada di dalam paragraf tersebut.

Bagaimana jika kita juga ingin mengambil nilai yang ada di dalam tag <p> 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():

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery Duniailkom</title>
<script src="jquery-2.1.4.js"></script>
<script>
   $(document).ready(function() {
 
     $("#tombol").click(function() {
       var nilai = $("#paragraf").html();
       alert(nilai);
     })
 
   });
   </script>
</head>
<body>
<p id="paragraf">
   Sedang belajar <em>jQuery</em> di <b>Duniailkom...</b>
</p>
<button id="tombol">Ambil Nilai</button>
</body>
</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 adalah: “Sedang belajar <em>jQuery</em> di <b>Duniailkom…</b>”.


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:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery Duniailkom</title>
<script src="jquery-2.1.4.js"></script>
<script>
   $(document).ready(function() {
 
     $("#tombol").click(function() {
       var nilai = $("#nama").val();
       alert(nilai);
     })
 
   });
   </script>
</head>
<body>
Nama: <input type="text" id="nama" value="Duniailkom...">
<button id="tombol">Ambil Nilai</button>
</body>
</html>

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

Kali ini saya memiliki sebuah tag <input type=”text”>. 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 <select>?

Caranya sama persis, berikut contohnya:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery Duniailkom</title>
<script src="jquery-2.1.4.js"></script>
<script>
   $(document).ready(function() {
 
     $("#tombol").click(function() {
       var nilai = $("#kota").val();
       alert(nilai);
     })
 
   });
   </script>
</head>
<body>
Pilih Kota:
<select id="kota" name="kota">
   <option value="jakarta">Jakarta</option>
   <option value="bandung">Bandung</option>
   <option value="bogor">Bogor</option>
</select>
<button id="tombol">Ambil Nilai</button>
</body>
</html>

Cara Mengambil nilai form HTML dengan jQuery

Silahkan anda pilih salah satu 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 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:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery Duniailkom</title>
<script src="jquery-2.1.4.js"></script>
<script>
   $(document).ready(function() {
  
     $("#tombol").click(function() { 
       var nilai1 = $("#keren:checked").val();
       var nilai2 = $("#ganteng:checked").val();
       var nilai3 = $("#cool:checked").val();
       alert(nilai1+' '+nilai2+' '+nilai3);
     })
  
   });
   </script>
</head>
<body>
Saya itu: 
  <input type="checkbox" id="keren" value="Saya Keren"> Keren
  <input type="checkbox" id="ganteng" value="Saya Ganteng"> Ganteng
  <input type="checkbox" id="cool" value="Saya Cool"> Cool
<br><br>
  <button id="tombol">Ambil Nilai</button>
</body>
</html>

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:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery Duniailkom</title>
<script src="jquery-2.1.4.js"></script>
 <script>
   $(document).ready(function() {
  
     $("#tombol").click(function() { 
       var nilai1 = $("#keren:checked").val();
       var nilai2 = $("#ganteng:checked").val();
       var nilai3 = $("#cool:checked").val();
       
       if (nilai1==undefined) {nilai1="";}
       if (nilai2==undefined) {nilai2="";}
       if (nilai3==undefined) {nilai3="";}
       
       alert(nilai1+' '+nilai2+' '+nilai3);
     })
  
   });
  </script>
</head>
<body>
Saya itu: 
  <input type="checkbox" id="keren" value="Saya Keren"> Keren
  <input type="checkbox" id="ganteng" value="Saya Ganteng"> Ganteng
  <input type="checkbox" id="cool" value="Saya Cool"> Cool
<br><br>
  <button id="tombol">Ambil Nilai</button>
</body>
</html>

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.


Tutorial Terkait:

9 Comments

  1. Rusman
    26 Mar 16
  2. Rusman
    27 Mar 16
    • Andre
      27 Mar 16
  3. Ab
    15 Jun 16
    • Andre
      16 Jun 16
  4. Ridwan
    19 Aug 16
    • Andre
      20 Aug 16
  5. edwin
    25 Nov 16
    • Andre
      25 Nov 16

Add Comment