Bab 13: Form Handling Dasar jQuery – Mengelola Input dan Form dengan Mudah

Bab 13: Form Handling Dasar jQuery – Mengelola Input dan Form dengan Mudah

Setelah mempelajari Traversing DOM, bab berikutnya adalah Form Handling Dasar jQuery. Form Handling memungkinkan Anda mengambil, memvalidasi, dan memproses data dari form tanpa harus menulis kode JavaScript murni yang panjang.

Fitur ini sangat penting untuk:

  • Validasi input
  • Mengambil nilai input secara real-time
  • Mengirim data ke server dengan AJAX
  • Membuat pengalaman pengguna lebih interaktif

1. Mengambil Nilai Input dengan .val()

Method .val() digunakan untuk mengambil atau mengubah nilai input.

Contoh Mengambil Nilai Input:

$("#btnSubmit").click(function(){
  var nama = $("#nama").val();
  alert("Nama Anda: " + nama);
});

Contoh Mengubah Nilai Input:

$("#nama").val("Andi");

2. Menangani Event Submit Form

Untuk menangani submit form, gunakan method .submit() dan prevent default agar halaman tidak reload.

Contoh:

$("#form").submit(function(e){
  e.preventDefault(); // mencegah reload halaman
  var nama = $("#nama").val();
  alert("Form dikirim! Nama: " + nama);
});

3. Menggunakan Event Focus dan Blur pada Form

  • .focus() → ketika input aktif
  • .blur() → ketika input kehilangan fokus

Contoh:

$("#nama").focus(function(){
  $(this).css("border", "2px solid green");
});

$("#nama").blur(function(){
  $(this).css("border", "1px solid gray");
});

4. Menangani Checkbox dan Radio Button

Mengambil nilai Checkbox:

$("#btnCek").click(function(){
  var checked = $("input[type='checkbox']:checked").map(function(){
    return $(this).val();
  }).get();
  alert("Checkbox terpilih: " + checked.join(", "));
});

Mengambil nilai Radio Button:

var gender = $("input[name='gender']:checked").val();
alert("Gender: " + gender);

5. Contoh Lengkap Form Handling Dasar

<!DOCTYPE html>
<html>
<head>
  <title>Form Handling Dasar jQuery</title>
</head>
<body>

<form id="form">
  Nama: <input type="text" id="nama" placeholder="Ketik nama..."><br><br>
  Gender: 
  <input type="radio" name="gender" value="Pria">Pria
  <input type="radio" name="gender" value="Wanita">Wanita<br><br>
  Hobi:
  <input type="checkbox" value="Membaca">Membaca
  <input type="checkbox" value="Olahraga">Olahraga<br><br>
  <button type="submit" id="btnSubmit">Kirim</button>
</form>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  // Menangani submit form
  $("#form").submit(function(e){
    e.preventDefault();
    var nama = $("#nama").val();
    var gender = $("input[name='gender']:checked").val();
    var hobi = $("input[type='checkbox']:checked").map(function(){
      return $(this).val();
    }).get();

    alert("Nama: " + nama + "\nGender: " + gender + "\nHobi: " + hobi.join(", "));
  });

  // Event focus dan blur
  $("#nama").focus(function(){
    $(this).css("border", "2px solid green");
  });

  $("#nama").blur(function(){
    $(this).css("border", "1px solid gray");
  });
</script>

</body>
</html>

6. Tips dan Kesalahan Umum

  • ❌ Lupa e.preventDefault() → halaman reload
  • ❌ Salah selector input (misal name atau id)
  • ❌ Tidak memeriksa apakah radio/checkbox dipilih
  • ❌ Lupa menempatkan jQuery di dalam $(document).ready()

Kesimpulan

Pada Bab 13: Form Handling Dasar jQuery, Anda telah mempelajari cara:

  • Mengambil dan mengubah nilai input dengan .val()
  • Menangani submit form dengan .submit()
  • Mengelola checkbox, radio button, dan event focus/blur

Form Handling adalah dasar penting sebelum mempelajari Form Validation dan AJAX Form, sehingga interaksi pengguna menjadi lebih dinamis dan praktis.

Related Posts