Hai teman-teman semuanya? apa kabar? semoga tetap dalam keadaan baik, Kita Lanjut lagi belajarnya, masih pada pembahasan jquery kali ini kita akan belajar mengubah value pada inputan dengan fungsi val() pada jquery.
Seperti yang kita tahu, fungsi val() pada jquery berfungsi untuk mendapatkan suatu nilai(value) pada sebuah element html, jadi dengan fungsi val ini kita dapat mengambil nilai atau mengubah nilai pada suatu element inputan. untuk penjelasan lebih jelasnya mungkin kita langsung saja praktek, pertama silahkan teman-teman buat sebuah file dan ketikan script berikut ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <head> </head> <body> <p>Nama: <input type="text" id="test" value="nama saya"></p> <button id="btn">ubah</button> </body> </html> |
Saya membuat sebuah inputan yang telah saya berikan value “nama saya” lalu saya membuat sebuah tombol dengan id btn yang nanti akan kita berikan fungsi klik nya, nah jika sudah sekarang kita masuk pada scripting jquerynya, silahkan teman-teman tambahkan script berikut ini pada bagian head.
|
1 2 3 4 5 6 7 8 9 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#btn").click(function(){ $("#test").val("Fahrizal"); }); }); </script> |
Pada script jquery ini pertama saya mereload library dari jquery yang dapat kita ambil dari website resmi jquery.com lalu setelah ini itu saya saya membuat sebuah fungsi ketika tombol diklik maha element yang ber id test akan berganti nilainya menjadi fahrizal yang sebelumnya bernilai “nama saya”
Jadi dengan fungsi val ini kita dapat mengambil nilai value dari element inputan atau menggantinya,
jika teman-teman save maka hasilnya akan seperti berikut ini ketika sebelum kita mengklik tombol:
Dan jika kita klik tombol ubah maka hasilnya akan seperti berikut ini:
Gimana? cukup mudah bukan, mungkin untuk tutorial kali ini tentang mengubah value pada inputan dengan fungsi val() pada jquery cukup sampai disini dulu, semoga tutorial yang singkat ini dapat bermanfaat untuk teman-teman semuanya, sampai bertemu lagi pada tutorial berikutnya.
Terimakasih.