Mengambil nilai Custom Attribute dengan Jquery

Pernahkah kalian membuat sebuah website dan memiliki ide untuk membuat sebuah program dimana dapat melakukan pengolahan data menggunakan javascript. Berbagai cara memang dilakukan untuk optimalisasi website agar bisa berjalan dengan cepat. Banyak website besar yang menggunakan PHP sebagai dasar Bahasa program yang digunakan. Namun tentu untuk memaksimalkan pengalaman para pengguna atau pengunjung website, kita harus memiliki nilai lebih dalam user experience.

Seperti yang kita ketahui, proses eksekusi pada php adalah sebagai Bahasa serverside yang memerlukan reload untuk melakukan perintah yang berhubungan dengan data.  Seperti contoh kali ini kita akan mencoba untuk mengambil sebuah data pada custom attribute untuk diletakan pada kolom inputan, yang dimaksud dengan custom attribute disini adalah attribute html yang kita buat dan definisikan sendiri menggunakan bantuan dari JQuery.

Baiklah teman-teman jika kalian masih penasaran, sekarang kita akan coba melakukan contoh sederhana pada artikel ini.

Pertama kita buat sebuah struktur html seperti ini

<!DOCTYPE html>
<html>
<head>
    <title> Custom Attr </title>
</head>
<body>
    
<input type="text" id="idedit">
<button type="button" class="btn btn-primary" id="data_id" data-isi="isi data terkini">Eksekusi</button>

</body>
</html>

Pada struktur HTML diatas kita bisa melihat ada sebuah atribut bernama data-isi. Dimana atribut ini adalah atribut yang saya buat sendiri yang memiliki fungsi sebagai penampung data yang akan dikirim atau di munculkan pada elemen tertentu.

Selanjutnya karena kita membutuhkan JQuery, maka kita perlu menghubungkan html yang kita miliki dengan plugin JQuery. Kita bisa tambahkan source berikut ke HTML kalian.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>

Jika sudah maka kita akan memberikan fungsi pada struktur HTML diatas dengan mengetikkan baris kode berikut.

$('#data_id').click(function () {
  var ambilVal = $(this).attr('data-isi');
    $("#idedit").val(ambilVal);
});

Pada baris kode diatas kita bisa melihat bahwa saya menggunakan data_id berupa tombol sebagai indicator atau trigger yang ketika kita melakukan klik pada tombol tersebut maka akan membuat variable ambilVal yang menampung data dari attribute data-isi, lalu meletakan value tersebut ke dalam kolom input dengan id #idedit yang sudah saya buat. Demikian artikel tentang cara mengambil nilai custom attribute dengan JQuery. Semoga bermanfaat

17 Oktober 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat