Minggu, 20 Mei 2018

Belajar jQuery : Mendapatkan Nilai Dari Element


Codins - Kembali lagi ke tutorial jQuery, setelah pada tutorial sebelumnya kita mengenal callback function, kali ini kita akan belajar car mendapatkan nilai dari sebuah element di jquery. Mendapatkan nilai atau get value akan sangat berguna dalam membuat aplikasi web, misal kita memiliki form dan ingin mendapatkan inputan dari form tersebut kita bisa menggunakan fitur get value dari jquery.

Get Value jQuery

Ada beberapa function bawaan dari jQuery untuk mengambil atau mendapatkan nilai dari suatu element pada halaman html. Beberapa function tersebut diantaranya adalah : 
  • text() : mendapatkan nilai teks pada elemen html
  • html() : mendapatkan nilai elemen pada html
  • val() : mendapatkan nilai value dari elemen html, biasanya berupa inputan dalam form
  • attr() : mendapatkan nilai dari suatu atribut pada elemen html
Dengan function bawaan diatas kita bisa dengan mudah mendapatkan nilai dari suatu elemen html. Kita akan mencoba satu persatu function diatas. Untuk membuatnya cukup mudah, kita buat terlebih dulu file html dengan nama getdata.html kemudian ikuti langkah berikut.

Mendapatkan Nilai Dengan text()

getdata.html

Penjelasan sintaks diatas :

  • <p class="teks"> Saya adalah... </p> : kita akan mendapatkan nilai ( isi dari ) dari tag p dengan class teks
  • <button id="ambilteks"> : membuat button untuk melakukan event pengambilan teks
  • var teks = $('.teks').text(); : membuat variabel teks yang berisi selector untuk mengambil nilai pada tag p dengan class teks, materi variabel javascript bisa dibaca disini
  • alert(teks) : menampilkan popup berisi nilai yang diambil dari tag p dengan class teks
Setelah itu coba untuk membuka file tersebut, maka ketika kita klik button ambil teks akan muncul pop up seperti pada gambar dibawah :

Mendapatkan Nilai Dengan html()

Method mendapatkan nilai dengan html() sebenarnya sama persis dengan method text(), sintaksnya pun tidak jauh berbeda berikut sintaksnya : 


Ketika kita coba jalankan sintaks diatas, maka akan tampil seperti gambar dibawah ini : 

Mendapatkan Nilai Dengan val()

Untuk mendapatkan nilai dengan method val caranya tidak terlalu sulit, pertama kita akan membuat form untuk menerima inputan, form ini saya ambil dari tutorial javascript sebelumnya di Membuat Validasi Form Dengan Javascript.



Penjelasan sintaks diatas :

  • <input type="text" id="nama" ... : disini kita membuat inputan dengan id nama, perlu diingat jika kita ingin menggunakan selector pada id maka digunakan # sebaliknya jika attributnya class maka menggunakan titik .
  • var nama = $('#nama').val() : untuk mendapatkan nilai dari inputan dengan id nama, kita hanya menggunakan function .val()
  • alert : menampilkan data yang ditampung pada variabel nama dan nim
Kita akan coba jalankan sintaks diatas, maka akan tampil seperti screenshot dibawah :

Kemudian kita isikan form tersebut seperti pada gambar diatas, lalu kita klik button tambah data, maka akan menampilkan pesan pop up seperti pada screenshot dibawah ini : 

Mendapatkan Nilai Dengan attr()

Terakhir kita akan mencoba untuk mendapatkan nilai menggunakan function attr(), untuk itu silakan jalankan sintaks dibawah ini : 


Penjelasan sintaks diatas :

  • <input type="number" ... : membuat inputan dengan tipe angka (number)
  • var telepon = $("#telepon").attr('type') : mengambil nilai atribut type dari inputan dengan id telepon
  • alert(telepon) : menampilkan nilai atribut tipe
Setelah itu kita akan mencoba menjalankan sintaks diatas, ketika kita menekan tombol klik bukan angka yang kita masukan yang tampil, tetapi akan tampil number. Ini karena nilai yang kita ambil adalah nilai dari atribut type, bukan dari nilai inputan.

Saya rasa cukup sampai disini dulu tutorial kali ini, semoga Belajar jQuery : Mendapatkan Nilai Dari Element ini bermanfaat bagi anda dan saya tentunya.

Related Posts

Belajar jQuery : Mendapatkan Nilai Dari Element
4/ 5
Oleh