Bab 4: Forms & Controls

// Akses form
const form = document.forms[0];           // Form pertama di halaman
const form2 = document.forms.myForm;      // Form dengan name="myForm"
const form3 = document.forms["my-form"];  // Form dengan name="my-form"

// Akses elemen di dalam form
const input = form.elements.username;     // Input dengan name="username"
const email = form.elements["email"];     // Input dengan name="email"
const allInputs = form.elements;          // Semua elemen form (collection)

<form name="register">
  <input name="username" value="Budi">
  <input name="email" value="budi@email.com">
  <select name="role">
    <option value="user">User</option>
    <option value="admin">Admin</option>
  </select>
</form>

const form = document.forms.register;

// Baca nilai
console.log(form.elements.username.value); // "Budi"
console.log(form.elements.email.value);    // "budi@email.com"
console.log(form.elements.role.value);     // "user"

// Tulis nilai
form.elements.username.value = "Ani";
form.elements.role.value = "admin"; // Select berubah ke "Admin"

<form name="settings">
  <fieldset name="appearance">
    <input name="theme" value="dark">
    <input name="fontSize" value="16">
  </fieldset>
</form>

const form = document.forms.settings;
const fieldset = form.elements.appearance;

// Fieldset juga punya .elements!
console.log(fieldset.elements.theme.value); // "dark"

const input = document.querySelector('input[name="username"]');
console.log(input.form); // Referensi ke <form> parent-nya
// Berguna kalau kamu punya referensi input tapi butuh form-nya

// Text input
input.value = "teks baru";
input.value; // "teks baru"

// Checkbox / Radio
checkbox.checked = true;  // boolean!
checkbox.checked;         // true/false (BUKAN value!)

// Select
select.value = "option2";           // Set by value
select.selectedIndex = 1;           // Set by index
select.options[1].selected = true;  // Set by option

// Multiple select
const selected = Array.from(select.selectedOptions).map(opt => opt.value);

// Textarea
textarea.value = "isi baru"; // BUKAN innerHTML!

<form name="order">
  <input name="product" value="Laptop">
  <input name="quantity" type="number" value="1">
  <input name="express" type="checkbox">
  <select name="payment">
    <option value="transfer">Transfer</option>
    <option value="cod">COD</option>
    <option value="credit">Kartu Kredit</option>
  </select>
  <button type="submit">Pesan</button>
</form>

<!-- Tulis JavaScript untuk:
1. Baca semua nilai form dan tampilkan sebagai objek
2. Set quantity jadi 3
3. Centang checkbox express
4. Ubah payment ke "credit"
5. Tampilkan ringkasan pesanan di console
-->

const input = document.querySelector("input");

input.addEventListener("focus", function() {
  console.log("Input aktif — siap diketik");
  this.style.borderColor = "blue";
});

input.addEventListener("blur", function() {
  console.log("Input tidak aktif");
  this.style.borderColor = "";
  
  // Validasi saat blur (user selesai mengisi)
  if (this.value.length < 3) {
    this.style.borderColor = "red";
  }
});

input.focus(); // Beri focus ke input
input.blur();  // Hapus focus dari input

// Berguna untuk: auto-focus saat halaman load, pindah focus setelah validasi

<!-- tabindex="0" — bisa di-focus, urutan sesuai DOM -->
<div tabindex="0">Bisa di-focus!</div>

<!-- tabindex="-1" — bisa di-focus via JS, tapi TIDAK via Tab key -->
<div tabindex="-1">Focus via JS saja</div>

<!-- tabindex="1+" — urutan Tab custom (HINDARI, bikin bingung) -->

const div = document.querySelector("div[tabindex]");
div.addEventListener("focus", () => console.log("Div di-focus!"));
div.focus(); // Bekerja karena ada tabindex

// focus/blur TIDAK bubble!
// focusin/focusout BUBBLE — bisa pakai event delegation

const form = document.querySelector("form");

// ❌ Tidak bekerja (focus tidak bubble)
form.addEventListener("focus", handler);

// ✅ Bekerja (focusin bubble)
form.addEventListener("focusin", function(event) {
  event.target.style.background = "lightyellow";
});

form.addEventListener("focusout", function(event) {
  event.target.style.background = "";
  // Validasi di sini
});

// Elemen mana yang sedang di-focus?
console.log(document.activeElement); // Elemen yang aktif saat ini
// Kalau tidak ada yang di-focus → document.body

const form = document.querySelector("form");

form.addEventListener("focusout", function(event) {
  const input = event.target;
  if (input.tagName !== "INPUT") return;
  
  // Validasi berdasarkan atribut
  if (input.required && !input.value.trim()) {
    showError(input, "Wajib diisi!");
  } else if (input.type === "email" && !input.value.includes("@")) {
    showError(input, "Email tidak valid!");
  } else {
    clearError(input);
  }
});

function showError(input, message) {
  input.classList.add("error");
  let errorDiv = input.nextElementSibling;
  if (!errorDiv || !errorDiv.classList.contains("error-msg")) {
    errorDiv = document.createElement("div");
    errorDiv.className = "error-msg";
    input.after(errorDiv);
  }
  errorDiv.textContent = message;
}

function clearError(input) {
  input.classList.remove("error");
  const errorDiv = input.nextElementSibling;
  if (errorDiv?.classList.contains("error-msg")) {
    errorDiv.remove();
  }
}

<form id="signup">
  <input name="name" placeholder="Nama (min 2 huruf)" required>
  <input name="email" placeholder="Email" type="email" required>
  <input name="password" placeholder="Password (min 6)" type="password" required>
  <button type="submit">Daftar</button>
</form>

<!-- Tulis JavaScript untuk:
1. Validasi setiap input saat blur (focusout)
2. Tampilkan pesan error di bawah input yang salah
3. Input yang valid → border hijau
4. Input yang invalid → border merah + pesan error
5. Auto-focus ke input pertama saat halaman load
6. Pakai event delegation (focusin/focusout di form)
-->

const input = document.querySelector("input");

input.addEventListener("input", function() {
  // Fire SETIAP kali nilai berubah (ketik, paste, delete, dll)
  console.log("Nilai sekarang:", this.value);
});

// Untuk text input: fire saat BLUR (setelah user selesai edit)
input.addEventListener("change", function() {
  console.log("Nilai final:", this.value);
});

// Untuk select, checkbox, radio: fire LANGSUNG saat berubah
select.addEventListener("change", function() {
  console.log("Pilihan baru:", this.value); // Langsung!
});

checkbox.addEventListener("change", function() {
  console.log("Checked:", this.checked); // Langsung!
});

input.addEventListener("cut", function(event) {
  console.log("Cut:", event.clipboardData.getData("text/plain"));
});

input.addEventListener("copy", function(event) {
  console.log("Copy:", window.getSelection().toString());
});

input.addEventListener("paste", function(event) {
  // Baca data yang di-paste
  const pasted = event.clipboardData.getData("text/plain");
  console.log("Paste:", pasted);
  
  // Bisa dicegah!
  if (pasted.includes("<script>")) {
    event.preventDefault();
    alert("Paste tidak diizinkan!");
  }
});

const searchInput = document.getElementById("search");
const resultsList = document.getElementById("results");
const items = ["Apel", "Anggur", "Alpukat", "Bayam", "Brokoli", "Cabai"];

searchInput.addEventListener("input", function() {
  const query = this.value.toLowerCase();
  
  const filtered = items.filter(item => 
    item.toLowerCase().includes(query)
  );
  
  resultsList.innerHTML = filtered
    .map(item => `<li>${item}</li>`)
    .join("");
});

const textarea = document.querySelector("textarea");
const counter = document.querySelector(".counter");
const maxLength = 280;

textarea.addEventListener("input", function() {
  const remaining = maxLength - this.value.length;
  counter.textContent = `${remaining} karakter tersisa`;
  counter.style.color = remaining < 20 ? "red" : "";
  
  if (remaining < 0) {
    this.value = this.value.slice(0, maxLength); // Potong
  }
});

const phoneInput = document.getElementById("phone");

phoneInput.addEventListener("input", function() {
  // Hapus semua non-digit
  this.value = this.value.replace(/\D/g, "");
});

// Atau cegah input non-angka
phoneInput.addEventListener("keydown", function(event) {
  // Izinkan: backspace, delete, tab, arrow keys
  const allowed = ["Backspace", "Delete", "Tab", "ArrowLeft", "ArrowRight"];
  if (allowed.includes(event.key)) return;
  
  // Cegah non-angka
  if (!/\d/.test(event.key)) {
    event.preventDefault();
  }
});

<div>
  <input id="search" placeholder="Cari buah...">
  <ul id="fruit-list">
    <li>Apel</li><li>Anggur</li><li>Alpukat</li>
    <li>Mangga</li><li>Melon</li><li>Manggis</li>
    <li>Jeruk</li><li>Jambu</li>
  </ul>
</div>

<!-- Tulis JavaScript untuk:
1. Ketik di search → filter list secara real-time (pakai "input" event)
2. Highlight huruf yang cocok dengan <mark> tag
3. Kalau tidak ada hasil → tampilkan "Tidak ditemukan"
4. Kosongkan search → tampilkan semua
-->

const form = document.querySelector("form");

form.addEventListener("submit", function(event) {
  event.preventDefault(); // Cegah reload halaman!
  
  // Validasi
  const name = form.elements.name.value;
  if (!name) {
    alert("Nama wajib diisi!");
    return;
  }
  
  // Kirim data (misal via fetch)
  console.log("Mengirim:", name);
});

// ⚠️ Enter di input → submit form!
// Ini behavior bawaan browser
// Kalau tidak mau → preventDefault di submit event

// Submit form via JavaScript (TANPA trigger event "submit"!)
form.submit();

// ⚠️ form.submit() TIDAK trigger event "submit"
// Jadi validasi di event handler TIDAK jalan!
// Kalau perlu validasi → panggil manual sebelum submit()

const form = document.getElementById("contact-form");

form.addEventListener("submit", async function(event) {
  event.preventDefault();
  
  const submitBtn = form.querySelector('button[type="submit"]');
  submitBtn.disabled = true;
  submitBtn.textContent = "Mengirim...";
  
  try {
    // Kumpulkan data form
    const formData = new FormData(form);
    
    // Kirim ke server
    const response = await fetch("/api/contact", {
      method: "POST",
      body: formData
    });
    
    if (response.ok) {
      alert("Berhasil dikirim!");
      form.reset(); // Kosongkan form
    } else {
      alert("Gagal mengirim!");
    }
  } catch (error) {
    alert("Error: " + error.message);
  } finally {
    submitBtn.disabled = false;
    submitBtn.textContent = "Kirim";
  }
});

const form = document.querySelector("form");
const formData = new FormData(form);

// Baca data
console.log(formData.get("username"));    // Nilai input name="username"
console.log(formData.get("email"));       // Nilai input name="email"

// Iterasi semua
for (const [key, value] of formData) {
  console.log(`${key}: ${value}`);
}

// Convert ke object biasa
const data = Object.fromEntries(formData);
console.log(data); // { username: "Budi", email: "budi@mail.com", ... }

// Tambah data extra
formData.append("timestamp", Date.now());

form.addEventListener("submit", function(event) {
  event.preventDefault();
  
  const errors = [];
  const name = form.elements.name.value.trim();
  const email = form.elements.email.value.trim();
  const password = form.elements.password.value;
  
  if (!name) errors.push("Nama wajib diisi");
  if (name.length < 2) errors.push("Nama minimal 2 karakter");
  if (!email) errors.push("Email wajib diisi");
  if (!email.includes("@")) errors.push("Email tidak valid");
  if (password.length < 6) errors.push("Password minimal 6 karakter");
  
  if (errors.length > 0) {
    showErrors(errors);
    return;
  }
  
  // Semua valid → kirim
  submitForm(new FormData(form));
});

function showErrors(errors) {
  const errorDiv = document.getElementById("errors");
  errorDiv.innerHTML = errors.map(e => `<p class="error">${e}</p>`).join("");
}

form.reset(); // Kembalikan semua input ke nilai DEFAULT (bukan kosong!)
// Nilai default = yang ada di atribut value HTML

// Event "reset" juga bisa ditangkap
form.addEventListener("reset", function(event) {
  // Bisa dicegah
  if (!confirm("Yakin mau reset?")) {
    event.preventDefault();
  }
});

<form id="registration">
  <input name="fullname" placeholder="Nama Lengkap">
  <input name="email" type="email" placeholder="Email">
  <input name="password" type="password" placeholder="Password">
  <input name="confirm" type="password" placeholder="Konfirmasi Password">
  <select name="role">
    <option value="">-- Pilih Role --</option>
    <option value="student">Student</option>
    <option value="teacher">Teacher</option>
  </select>
  <button type="submit">Daftar</button>
  <button type="reset">Reset</button>
</form>
<div id="output"></div>

<!-- Tulis JavaScript untuk:
1. Validasi saat submit:
   - Nama minimal 3 karakter
   - Email harus valid (ada @)
   - Password minimal 8 karakter
   - Confirm harus sama dengan password
   - Role harus dipilih
2. Tampilkan semua error sekaligus (jangan satu-satu)
3. Kalau valid → tampilkan data di #output (JANGAN kirim ke server)
4. Pakai FormData untuk kumpulkan data
5. Konfirmasi sebelum reset
-->