Tutorial JQuery Part 5 : Mengambil Nilai Input html dengan JQuery

Halaman sebuah website tentu memiliki interaksi dengan user. Interaksi tersebut bisa berupa inputan dari user yang kemudian dikelola oleh website. Apakah inputan tersebut di publish, diolah atau menjadi data private.

Nah JQuery menyediakan function untuk menangkap input dari user. Function tersebut berupa "val()" ( val-> Value merupakan Perintah mengambil nilai input). Kita akan coba membuat aplikasi untuk menghitung usia.

User akan menginputkan tahun lahir kemudian sistem akan mengelola input tersebut sehingga didapatkanlah usia. Rumus usia

usia = tahun sekarang - tahun lahir

1. Silahkan buat file baru dengan menambahkan form input di halaman html tersebut. Jangan lupa buat link untuk menyambungkan ke jQuery. Perhtikan code dibawah ini:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Input JQuery</title>
    <script src="jquery.3.6.3.js"></script>
  </head>
  <body>
    <label>Masukkan Tahun Lahir</label>
    <br><input class="thn_lahir" type="text" />
    <br><button>Hitung Usia</button>
  </body>
</html>

Terdapat dua elemen yang kita masukkan di halaman html. Yaitu komponen input dan komponen button. Komponen input memiliki class yang nanti akan dikelola oleh jQuery.

2. Tambahkan scipt jQuery. Letak script tersebut bebas. Disini akan diletakkan di bawah tag body penutup

<script>
    $(document).ready(function () {
      $("button").click(function () {
        ....
       });
    });
  </script>

Event yang diberikan kepada komponen button adalah click. Artinya ketikan tombol button di tekan maka function akan dijalankan.

3. Tangkap nilai input dengan function val() dengan menambahkan script berikut:

        $("button").click(function() {
            var thn_lahir = $(".thn_lahir").val();
            alert(thn_lahir);
        });

Var adalah sebuah perintah javascript yang menandakan bahwa script berikutnya adalah sebuah variabel. Jadi disini kita memiliki variabel dengan nama "thn_lahir". Nilai dari variabel tersebut merupakan nilai input yang diberikan oleh user.

Simpan projek anda dan jalankan. Input usia pada form input kemudian tekan button. Jika proses berjalan lancar maka akan keluar alert yang memberi tahukan tahun lahir anda.

4. Sempurnakan script anda dengan menambahkan tahun sekarang kemudian rumus menghitung usia. Perhatikan script sempurnanya:

<script>
    $(document).ready(function() {
        $("button").click(function() {
            var thn_lahir = $(".thn_lahir").val();
            var thn_sekarang = new Date().getUTCFullYear();
            var usia = thn_sekarang - thn_lahir;
            alert("Usia Anda " + usia + " Tahun");
        });
    });
</script>

var thn_sekarang = new Date().getUTCFullYear(); merupakan perintah untuk mengambil tahun sekarang yang ada didalam sistem komputer. Tahun tersebut disimpan pada variabel "thn_sekarang". Kemudian data tersebut dikelola dengan rumus menghitung usia. Hasilnya akan ditampilkan di dalam alert.

Penutup

Dari materi diatas, anda dapat mengembangkan menjadi berbagai aplikasi. Tergantung kebutuhan dan kesanggupan. Terimakasih telah singgah di sini.

Edunesia

Post a Comment

Contact Form