Cara Mengambil Nilai HTML dengan jQuery

belajar javascript

Dalam lanjutan tutorial belajar jQuery di infanthree ini saya akan mengulas cara mengambil nilai elemen HTML memakai jQuery.

Mengambil nilai dari sebuah element HTML cukup kerap dilakukan. Misalnya saya membuat kotak isian form <input type=”text”>. Bagaimana cara mengambil nilai yang telah diisi memakai JavaScript?

Dengan JavaScript ‘murni’ kita dapat memakai property innerHTML. Tetapi caranya cukup panjang sebab harus digabung dengan fungsi document.getElementById(). Saya telah 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 ialah memakai 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 Infanthree</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>Infanthree...</b>
</p>
<button id="tombol">Ambil Nilai</button>
</body>
</html>

Untuk mengambil nilai teks yang ada didalam tag <p id=”paragraf”>, saya bisa memakai perintah $(“#paragraf”).text(). Berikutnya nilai ini disimpan ke dalam variabel nilai, lalu ditampilkan dengan fungsi alert(nilai).

Bila kamu men-klik tombol “Ambil Nilai” , hasilnya ialah: “Sedang belajar jQuery di Infanthree…”. Perhatikan bahwa method text() akan menghapus seluruh tag HTML yang ada di dalam tag <p>, seperti tag <em> dan <b> yang juga berada di dalam paragraf itu.

Bagaimana bila kita juga mau mengambil nilai yang terdapat di dalam tag <p> lengkap bersama tag HTML-nya? Pakai method html() jQuery

Cara Mengambil nilai HTML dengan method html() jQuery

Cara selanjutnya untuk mengamnil nilai HTML dengan jQuery ialah memakai method html(). Penggunaannya sama persis dengan method text(). Bedanya, hasil dari method html() akan tetap mempertahankan tag HTML yang terdapat di dalam element HTML itu.

Memakai contoh yang sama, berikut hasil yang di bisa dengan method html():

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery Infanthree</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>Infanthree...</b>
</p>
<button id="tombol">Ambil Nilai</button>
</body>
</html>

Seperti yang tampak, saat ini hasil nya ialah: “Sedang belajar <em>jQuery</em> di <b>Infanthree…</b>”.

Cara Mengambil nilai form HTML dengan method val() jQuery

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery Infanthree</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="Infanthree...">
<button id="tombol">Ambil Nilai</button>
</body>
</html>

Saat ini saya mempunyai sebuah tag <input type=”text”>. Silahkan langsung kamu tekan tombol “Ambil Nilai”, atau ubah teks yang terdapat di dalam inputan form itu. Perintah $(“#nama”).val() akan menampilkan nilai apapun yang kamu input ke dalam isian form itu.

Bagaimana dengan objek form lain seperti <select>?

Caranya sama persis, berikut misalnya:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery Infanthree</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>

Silahkan kamu pilih salah satu nama kota, lalu tekan tombol “Ambil Nilai”. Nilai yang ditampilkan asalnya dari atribut value dari setiap tag <option>.

Bagaimana dengan checkbox?

Untuk checkbox perlu penyeleksian lebih jauh, sebab bila memakai method val() secara langsung, nilai form akan dikembalikan apapun keadaan checkbox (baik telah dipilih ataupun belum). Untuk mengatasi hal ini, kita dapat memakai selector khusus jQuery, yaitu :checked.

Berikut contoh penggunannya:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery Infanthree</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 mempunyai 3 check box: Keren, Ganteng dan Cool. Saat 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 cuma saat keadaan checkbox itu dalam kondisi ter-checklist (perhatikan cara penulisan jQuery selector, #keren:checked).

Namun, sekarang muncul masalah baru. Saat checkbox tidak terpilih, method val() akan mengembalikan nilai undefined. Ini terjadi sebab selector :checked tidak mendapatkan element HTML yang kita tulis (sebab belum di check).

Bagaimana cara menanggulanginya? cukup dengan menambahkan beberapa keadaan IF, dimana bila isi variabel nilai ialah undefined, lakukan sesuatu, contohnya mengosongkan variabel.

Berikut revisinya:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar jQuery Infanthree</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>

Saat ini saat tombol Ambil Nilai di klik, yang akan tampil cuma nilai checkbox yang telah dipilih. Dalam kasus semacam ini kamu juga dapat menyaksikan bahwa jQuery saja tidaklah cukup. Kita tetap memerlukan JavaScript dasar untuk menangani masalah yang timbul.


Butuh Web Developer Makassar atau Jasa SEO di Makassar yang bergaransi? Jangan ragu dengan infanthree.com. Kami juga penyedia Jasa Pembuatan Aplikasi Android di Makassar yang terkemuka. Selain itu ada layanan SEM, SMM, Internet Marketing Agency Makassar dan Social Media, Pembuatan Logo, Konten, Video, Maskot dan Instalasi jaringan ataupun mikrotik, hingga pelatihan komputer dan internet marketing.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

WhatsApp chat