Lecture ini sangat penting karena mulai mengajarkan cara mengambil data yang diketik/dipilih user dari sebuah form HTML menggunakan JavaScript.

Kalau lecture sebelumnya kita belajar:

JavaScript mengubah DOM → sekarang kita belajar membaca data dari DOM.

Bayangkan form sebagai sebuah formulir kertas:

Nama depan       : Budi
Nama belakang    : Santoso
Email            : budi@gmail.com
Pekerjaan        : Salaried Employee
Tanggal lahir    : 10-05-2000
Gender           : Male
Kontak           : ☑ Phone
                   ☑ Email
                   ☐ SMS

JavaScript harus bisa mengambil semua informasi tersebut agar nantinya bisa diproses atau dikirim ke server.

1. Gambaran besar lecture

Di lecture ini kita belajar membaca beberapa jenis form element:

1. Text input
2. Email input
3. Number input
4. Date input
5. Select / dropdown
6. Radio button
7. Checkbox

Kebanyakan sebenarnya sangat sederhana.

Untuk input biasa:

element.value

Sedangkan radio button dan checkbox sedikit berbeda karena kita harus memperhatikan mana yang sedang dipilih/checked.

Mental model utamanya:

HTML Form
   ↓
JavaScript mencari element
   ↓
JavaScript membaca property
   ↓
.value / .checked
   ↓
Data user

2. Form HTML yang digunakan

Kurang lebih form-nya memiliki:

Apply for Loan
│
├── First Name
├── Last Name
├── Email
├── Occupation
├── Date of Birth
├── Gender
│    ├── Male
│    ├── Female
│    └── Do not specify
│
└── How to Contact
     ├── Phone
     ├── Email
     └── SMS

Di sini kita memiliki dua kategori besar:

Input yang hanya punya satu value

Misalnya:

First Name
Last Name
Email
Occupation
Date of Birth

Kita cukup membaca:

element.value

Input yang bisa memilih berdasarkan status

Misalnya:

Gender
Contact options

Kita harus memperhatikan:

element.checked

3. Sebelum membaca data: pahami event submit

Ada satu konsep penting di awal lecture.

User mengisi form lalu klik:

Apply for Loan

Kita ingin menjalankan:

applyForLoan()

Misalnya HTML:

<button onclick="applyForLoan(event)">
    Apply for Loan
</button>

Kemudian:

function applyForLoan(event) {
    ...
}

Ketika button diklik, browser menghasilkan sebuah event object.

User klik button
       ↓
click event
       ↓
event object
       ↓
applyForLoan(event)

4. Kenapa ada event?

Karena kita ingin mengontrol perilaku default browser.

Ini menjadi penting kalau button berada di dalam:

<form>

Secara default, button di dalam form biasanya dianggap sebagai submit button.

Misalnya:

<form>
    ...
    <button>
        Apply for Loan
    </button>
</form>

Ketika button diklik:

Klik button
   ↓
Form submit
   ↓
Browser melakukan request
   ↓
Page reload

Itulah yang ditunjukkan instructor dalam lecture.

5. Apa masalah page reload?

Misalnya kita melakukan:

console.log("button clicked");

User klik button.

Kita mungkin melihat:

button clicked

tetapi setelah itu browser melakukan reload.

Akibatnya keadaan halaman kembali seperti awal.

Console yang tadi kita lihat juga bisa hilang/ter-reset.

Padahal kita ingin:

Klik Apply for Loan → JavaScript membaca data → proses data → tampilkan hasil.

Kita tidak ingin browser melakukan submit/reload secara default.

6. Solusinya: preventDefault()

Kita mendapatkan event object:

function applyForLoan(event) {

Kemudian:

event.preventDefault();

Artinya:

“Browser, jangan lakukan perilaku default dari event ini.”

Jadi:

Sebelum:

click
 ↓
submit form
 ↓
reload page


Setelah preventDefault():

click
 ↓
JavaScript menangani
 ↓
tidak reload

7. Apa arti preventDefault()?

Mari pecahkan namanya.

event.preventDefault();

event

Object yang berisi informasi tentang event.

prevent

Mencegah.

default

Perilaku bawaan.

Jadi:

Mencegah perilaku default browser.

Contohnya pada form:

event.preventDefault();

→ jangan submit/reload secara default.

8. Penting: preventDefault() bukan menghentikan event

Ini sering membingungkan.

event.preventDefault();

bukan berarti:

event-nya dibatalkan.

Yang dicegah adalah default action-nya.

Misalnya:

click event
   ↓
listener tetap berjalan
   ↓
applyForLoan() tetap berjalan
   ↓
preventDefault()
   ↓
default submit/reload dicegah

Jadi JavaScript tetap bisa membaca input.

9. Membaca input text

Sekarang masuk ke inti lecture.

Misalnya HTML:

<input id="fName">

User mengetik:

Budi

JavaScript:

let fNameElement =
    document.getElementById("fName");

Kita mendapatkan DOM element.

Kemudian:

let fName =
    fNameElement.value;

Sekarang:

fName = "Budi"

10. Pola paling penting: .value

Untuk input biasa, ingat:

element.value

Misalnya:

<input id="fName">
<input id="lName">
<input id="email">

JavaScript:

let fName =
    document.getElementById("fName").value;

let lName =
    document.getElementById("lName").value;

let email =
    document.getElementById("email").value;

Misalnya user mengisi:

First Name : Budi
Last Name  : Santoso
Email      : budi@gmail.com

hasilnya:

fName = "Budi"
lName = "Santoso"
email = "budi@gmail.com"

11. Perhatikan dua operasi yang berbeda

Ini penting.

Saat kita menulis:

document.getElementById("fName")

kita mendapatkan:

element

Sedangkan:

document.getElementById("fName").value

kita mendapatkan:

value yang ada di dalam element

Jadi:

getElementById()
       ↓
DOM element
       ↓
.value
       ↓
nilai/value user

Contoh:

let input =
    document.getElementById("fName");

input adalah element.

Sedangkan:

let name = input.value;

name adalah value.

12. Apakah .value hanya untuk text input?

Tidak.

Ini salah satu pesan penting dari lecture.

.value dapat digunakan untuk berbagai input:

<input type="text">
<input type="email">
<input type="number">
<input type="date">

Misalnya:

document.getElementById("email").value;

atau:

document.getElementById("age").value;

atau:

document.getElementById("dob").value;

Jadi jangan berpikir:

.value hanya untuk <input type="text">.

Lebih tepat:

Banyak form control memiliki property .value untuk membaca value saat ini.

13. Catatan penting: .value sering berupa String

Ini penting untuk materi JavaScript berikutnya.

Misalnya:

<input type="number" id="age">

User memasukkan:

25

Kemudian:

let age = document.getElementById("age").value;

Walaupun input-nya:

type="number"

hasil .value biasanya:

"25"

yaitu String, bukan Number.

Jadi kalau mau melakukan operasi matematika:

let age =
    Number(document.getElementById("age").value);

atau:

let age =
    +document.getElementById("age").value;

Ini menghubungkan kembali dengan materi type coercion yang sudah kita pelajari.

14. Membaca dropdown <select>

Lecture kemudian menambahkan occupation sebagai dropdown.

HTML-nya kira-kira:

<select id="occupation" name="occupation">
    <option value="government-emp">
        Government Employee
    </option>

    <option value="salaried">
        Salaried Employee
    </option>

    <option value="self-employed">
        Self Employed
    </option>
</select>

Tampilannya:

Occupation:
┌──────────────────────────────┐
│ Salaried Employee          ▼ │
└──────────────────────────────┘

15. Membaca value dropdown

Caranya ternyata sama:

let occupation =
    document.getElementById("occupation").value;

Kalau user memilih:

Self Employed

dan HTML:

<option value="self-employed">
    Self Employed
</option>

maka:

occupation

berisi:

"self-employed"

Bukan:

"Self Employed"

16. Ini konsep yang sangat penting: text vs value

Perhatikan:

<option value="salaried">
    Salaried Employee
</option>

Ada dua informasi:

value     = "salaried"
text      = "Salaried Employee"

.value membaca:

"salaried"

bukan teks:

"Salaried Employee"

Jadi:

select.value

→ mendapatkan value dari option yang dipilih.

17. Kenapa HTML menggunakan value berbeda dengan text?

Karena biasanya kita ingin value yang dikirim/diproses oleh program lebih sederhana.

Contoh:

<option value="govt">
    Government Employee
</option>

User melihat:

Government Employee

Tetapi aplikasi bisa bekerja dengan:

govt

Ini pola yang sangat umum dalam form.

18. Membaca Date input

HTML:

<input
    type="date"
    id="dob"
>

User memilih:

10 May 2000

JavaScript:

let dob =
    document.getElementById("dob").value;

Sekali lagi:

Karena ini juga <input>, kita menggunakan .value.

Jadi jangan membuat aturan:

“Date punya cara khusus.”

Untuk pembacaan dasarnya:

input.value

sudah cukup.

19. Sekarang masuk ke bagian yang agak tricky: Radio Button

Ini bagian yang perlu kamu pahami lebih hati-hati.

Misalnya:

<input
    type="radio"
    name="gender"
    value="male"
>
Male

<input
    type="radio"
    name="gender"
    value="female"
>
Female

<input
    type="radio"
    name="gender"
    value="none"
>
Do not specify

Tampilannya:

Gender:

○ Male
○ Female
○ Do not specify

User hanya boleh memilih satu.

20. Kenapa radio button menggunakan name yang sama?

Karena:

name="gender"

digunakan pada semua radio button.

Contohnya:

<input type="radio" name="gender">
<input type="radio" name="gender">
<input type="radio" name="gender">

Browser menganggap ketiganya satu grup.

Sehingga:

Male          ○
Female        ○
Do not specify ○

Ketika Male dipilih:

Male          ●
Female        ○
Do not specify ○

Ketika Female dipilih:

Male          ○
Female        ●
Do not specify ○

21. Cara berpikir radio button

Untuk radio button kita tidak bisa sekadar mengatakan:

document.querySelector(...)

lalu langsung menganggap itulah pilihan user.

Kita harus mencari:

Radio button mana yang sedang checked?

Ini sebabnya selector lecture menggunakan:

input[name="gender"]:checked

Mari kita pecahkan.

22. Memahami selector input[name="gender"]:checked

Selector ini terlihat rumit, tapi sebenarnya sederhana.

Bagian pertama

input

Artinya:

Cari element <input>.

Bagian kedua

[name="gender"]

Artinya:

Yang memiliki attribute name="gender".

Jadi:

input[name="gender"]

berarti:

Semua input yang memiliki name gender.

23. Bagian :checked

Kemudian:

:checked

artinya:

Hanya element yang sedang dipilih/checked.

Jadi:

input[name="gender"]:checked

berarti:

Cari input dengan name="gender" yang sedang dicentang.

24. Visualisasi selector radio

Misalnya:

<input name="gender" value="male">      ○
<input name="gender" value="female">    ●
<input name="gender" value="none">      ○

Selector:

input[name="gender"]:checked

akan menemukan:

                 ↓
<input name="gender" value="female"> ●

Bukan ketiganya.

25. Kemudian kita ambil .value

Setelah mendapatkan radio button yang checked:

let gender =
    document.querySelector(
        'input[name="gender"]:checked'
    ).value;

Perhatikan urutannya:

querySelector()
      ↓
radio button yang checked
      ↓
.value
      ↓
nilai radio button

Misalnya Female dipilih:

<input
    name="gender"
    value="female"
    checked
>

maka:

gender

berisi:

"female"

26. Ini kombinasi dua konsep

Radio button menggabungkan:

CSS selector

input[name="gender"]:checked

dan:

DOM property

.value

Jadi:

document.querySelector(
    'input[name="gender"]:checked'
).value;

dibaca:

“Cari radio button gender yang sedang dipilih, lalu ambil value-nya.”

27. Kenapa radio button lebih tricky?

Karena ada beberapa element, tetapi kita hanya menginginkan satu element yang aktif.

Misalnya:

3 radio button
       ↓
pilih yang checked
       ↓
1 element
       ↓
ambil .value

Sedangkan text input hanya:

1 input
 ↓
.value

28. Bagaimana kalau tidak ada radio yang checked?

Nah, ini catatan teknis yang sangat penting.

Misalnya:

document.querySelector(
    'input[name="gender"]:checked'
)

tidak menemukan apa pun.

Hasilnya:

null

Kalau langsung:

null.value

akan error.

Karena itu lecture kemudian membuat salah satu radio button default checked:

<input
    type="radio"
    name="gender"
    value="male"
    checked
>

Sehingga selalu ada pilihan.

29. Sekarang checkbox

Checkbox berbeda dengan radio button.

Radio:

○ Male
○ Female
○ Other

Hanya satu yang bisa dipilih.

Checkbox:

☐ Phone
☐ Email
☐ SMS

Bisa memilih lebih dari satu.

Misalnya:

☑ Phone
☑ Email
☐ SMS

30. Kenapa checkbox lebih sulit?

Karena kita tidak mencari:

satu checkbox yang checked.

Kita ingin:

semua checkbox yang checked.

Misalnya:

Phone  ☑
Email  ☑
SMS    ☐

hasil yang kita inginkan:

["phone", "email"]

31. Semua checkbox diberi name="contact"

HTML:

<input
    type="checkbox"
    name="contact"
    value="phone"
>

<input
    type="checkbox"
    name="contact"
    value="email"
>

<input
    type="checkbox"
    name="contact"
    value="sms"
>

Karena semuanya:

name="contact"

kita bisa mencari semuanya berdasarkan name.

32. Menggunakan getElementsByName()

JavaScript:

let contactElements =
    document.getElementsByName("contact");

Berbeda dengan:

getElementById()

yang mengambil satu element berdasarkan ID.

getElementsByName() mengambil sekumpulan element yang memiliki name tertentu.

Mental model:

getElementById()
     ↓
1 element

getElementsByName()
     ↓
sekumpulan element

33. Hasilnya adalah NodeList

Instructor menyebut hasilnya sebagai NodeList.

Misalnya:

let contactElements =
    document.getElementsByName("contact");

hasilnya kira-kira:

NodeList
│
├── input#phone
├── input#email
└── input#sms

Kita kemudian bisa melakukan loop.

34. Sedikit koreksi penting dari caption

Di caption ada pernyataan kurang lebih:

“a node list is nothing but it is an array”

Ini tidak benar secara teknis.

NodeList bukan Array biasa.

Contohnya:

Array.isArray(contactElements)

bisa menghasilkan:

false

Tetapi NodeList memang bisa diakses dengan index dan memiliki length, sehingga untuk pembelajaran dasar terasa mirip array:

contactElements[0]
contactElements[1]
contactElements[2]

Jadi mental model beginner:

Anggap NodeList sebagai kumpulan element yang bisa kita loop.

Tetapi secara teknis:

NodeList ≠ Array.

35. Mengapa dibuat array contacts?

Instructor membuat:

let contacts = [];

Kenapa?

Karena kita ingin mengumpulkan value dari checkbox yang dipilih.

Misalnya:

Phone ☑
Email ☑
SMS   ☐

maka:

contacts

akan menjadi:

["phone", "email"]

36. Loop semua checkbox

Kemudian:

for (
    let i = 0;
    i < contactElements.length;
    i++
) {
    ...
}

Kalau ada tiga checkbox:

index 0 → Phone
index 1 → Email
index 2 → SMS

Loop akan berjalan tiga kali.

37. Mengecek .checked

Di dalam loop:

if (contactElements[i].checked) {
    ...
}

.checked berbeda dengan .value.

.value

Memberikan nilai:

"phone"
"email"
"sms"

.checked

Memberikan status Boolean:

true
false

Contoh:

Phone:
value   = "phone"
checked = true

38. Jadi checkbox punya dua informasi penting

Bayangkan:

<input
    type="checkbox"
    value="phone"
    checked
>

Ada:

.value
   ↓
"phone"

.checked
   ↓
true

Kalau tidak dipilih:

.value
   ↓
"phone"

.checked
   ↓
false

Jadi:

.value = “checkbox ini mewakili apa?”

.checked = “checkbox ini sedang dipilih atau tidak?”

39. Logic checkbox secara lengkap

Kode lecture kurang lebih:

let contacts = [];

let contactElements =
    document.getElementsByName("contact");

for (
    let i = 0;
    i < contactElements.length;
    i++
) {
    let contactElement = contactElements[i];

    if (contactElement.checked) {
        contacts.push(contactElement.value);
    }
}

Mari kita baca seperti manusia:

Buat array kosong bernama contacts.

Ambil semua element yang memiliki name="contact".

Loop satu per satu.

Kalau checkbox tersebut dicentang, masukkan value-nya ke array contacts.

40. Contoh prosesnya

Misalnya:

Phone  ☑
Email  ☐
SMS    ☑

NodeList:

[Phone, Email, SMS]

Iterasi pertama

Phone
checked = true

Maka:

contacts.push("phone");

Array:

["phone"]

Iterasi kedua

Email
checked = false

Tidak melakukan apa-apa.

Array tetap:

["phone"]

Iterasi ketiga

SMS
checked = true

Maka:

contacts.push("sms");

Array menjadi:

["phone", "sms"]

41. Visualisasi checkbox

HTML checkbox
       ↓
getElementsByName("contact")
       ↓
┌───────────────┐
│ Phone         │
│ Email         │
│ SMS           │
└───────────────┘
       ↓
     LOOP
       ↓
┌─────────────────────────┐
│ checked?                │
│                         │
│ Phone → true  → PUSH    │
│ Email → false → SKIP    │
│ SMS   → true  → PUSH    │
└─────────────────────────┘
       ↓
contacts
       ↓
["phone", "sms"]

42. push() di sini mengingatkan materi Array

Kita sudah belajar sebelumnya:

array.push(value);

menambahkan item ke bagian belakang array.

Di lecture ini konsep tersebut digunakan secara nyata:

contacts.push(contactElement.value);

Misalnya:

contacts = [];

lalu:

contacts.push("phone");

menjadi:

["phone"]

kemudian:

contacts.push("sms");

menjadi:

["phone", "sms"]

Jadi lecture ini sekaligus menggabungkan:

• DOM
• .checked
• .value
• loop
• array
• push()

43. Perbedaan value dan checked

Ini salah satu cheat sheet terpenting dari lecture:

Contoh:

input.value

→ "Budi"

Sedangkan:

checkbox.checked

→ true

44. Perbedaan cara membaca setiap form element

Sekarang kita bisa buat tabel besar.

Ini sebenarnya inti seluruh lecture.

45. Kenapa radio menggunakan querySelector()?

Karena kita hanya membutuhkan satu radio button, yaitu yang checked.

document.querySelector(
    'input[name="gender"]:checked'
)

Hasil:

satu element

Kemudian:

.value

46. Kenapa checkbox menggunakan getElementsByName()?

Karena kita membutuhkan semua checkbox dengan nama tertentu.

document.getElementsByName("contact")

Hasil:

banyak element

Kemudian kita loop:

for (...) {
    ...
}

Lalu cek:

.checked

47. Perbedaan radio dan checkbox secara fundamental

Radio

Satu grup
     ↓
Banyak pilihan
     ↓
Hanya satu yang dipilih
     ↓
Cari :checked
     ↓
.value

Checkbox

Satu grup
     ↓
Banyak pilihan
     ↓
Bisa banyak yang dipilih
     ↓
Ambil semua
     ↓
Loop
     ↓
Cek .checked
     ↓
Ambil .value
     ↓
Masukkan ke array

Ini cara paling mudah mengingatnya.

48. Kenapa name penting?

name memiliki fungsi penting dalam form.

Untuk radio:

name="gender"

membuat radio button menjadi satu grup.

Untuk checkbox:

name="contact"

memudahkan kita mendapatkan semua checkbox yang berhubungan dengan contact.

Jadi jangan menganggap:

name

hanya atribut formal.

Ia juga membantu kita mengelompokkan form controls.

49. ID dan variable name jangan tertukar

Lecture juga menekankan sesuatu yang bagus.

Misalnya HTML:

<input id="fName">

Kita menulis:

let fName = ...

Kelihatannya sama.

Tapi sebenarnya tidak wajib sama.

Kita bisa saja:

let firstNameInput =
    document.getElementById("fName");

Yang wajib cocok adalah:

document.getElementById("fName")

dengan:

id="fName"

Sedangkan nama variable:

firstNameInput

bebas.

50. Jadi ada dua “nama”

Misalnya:

<input id="fName">

dan:

let firstName = document.getElementById("fName");

Ada:

HTML ID
   ↓
fName

dan:

JavaScript variable
   ↓
firstName

Keduanya berbeda.

Yang harus sama:

getElementById("fName")
              ↕
        id="fName"

51. Flow lengkap Apply for Loan

Sekarang kita gabungkan semuanya.

User mengisi form
       ↓
First Name
Last Name
Email
Occupation
DOB
Gender
Contact
       ↓
Klik Apply for Loan
       ↓
applyForLoan(event)
       ↓
event.preventDefault()
       ↓
cegah submit/reload
       ↓
Ambil value input
       ↓
Ambil value dropdown
       ↓
Ambil date
       ↓
Cari radio yang :checked
       ↓
Ambil semua checkbox
       ↓
Cek .checked satu per satu
       ↓
Masukkan value ke array
       ↓
Semua data user berhasil dibaca

52. Kalau dibuat seperti pseudocode

Secara manusia:

Ketika Apply for Loan diklik:

1. Jangan reload halaman.

2. Ambil first name.

3. Ambil last name.

4. Ambil email.

5. Ambil occupation.

6. Ambil tanggal lahir.

7. Cari gender yang checked.

8. Ambil semua contact checkbox.

9. Untuk setiap checkbox:
      kalau checked:
          simpan value-nya.

10. Sekarang kita memiliki semua data user.

Ini persis tujuan lecture.

53. Contoh hasil akhirnya

Misalnya user mengisi:

First Name:
Budi

Last Name:
Santoso

Email:
budi@gmail.com

Occupation:
Salaried Employee

DOB:
2000-05-10

Gender:
Male

Contact:
Phone ☑
Email ☑
SMS ☐

JavaScript bisa menghasilkan data:

fName = "Budi";

lName = "Santoso";

email = "budi@gmail.com";

occupation = "salaried";

dob = "2000-05-10";

gender = "male";

contacts = ["phone", "email"];

Nah, data seperti inilah yang nantinya bisa kita gunakan untuk menampilkan modal:

Thank you Budi Santoso!

We will contact you through:
Phone
Email

Dan itulah yang akan dibangun di lecture berikutnya.

54. Connection dengan lecture sebelumnya

Coba lihat perkembangan kita.

Sebelumnya kita belajar:

JavaScript
   ↓
Mencari DOM
   ↓
Mengubah DOM

Misalnya:

modal.classList.remove("hide");

Sekarang:

JavaScript
   ↓
Mencari DOM
   ↓
Membaca DOM

Misalnya:

document.getElementById("fName").value;

Jadi ada dua arah interaksi:

             JAVASCRIPT
             /        \
            ↓          ↓
       READ DOM      MODIFY DOM
            ↓          ↓
       baca data     ubah UI

55. Konsep value sebenarnya sangat sederhana

Jangan terlalu menghafal banyak kode.

Ingat pertanyaan:

“Kalau saya ingin tahu apa isi form control ini sekarang, apa yang saya gunakan?”

Jawab:

.value

Contoh:

input.value
select.value
dateInput.value

56. Tetapi checked menjawab pertanyaan berbeda

Kalau pertanyaannya:

“Apakah checkbox/radio ini sedang dipilih?”

Gunakan:

.checked

Misalnya:

if (checkbox.checked) {
    ...
}

Ini akan menghasilkan:

true

atau:

false

57. Mental model super sederhana

Bayangkan setiap form element seperti sebuah kotak.

Text input

┌──────────────┐
│ Budi         │
└──────────────┘
       ↓
    .value
       ↓
    "Budi"

Dropdown

┌────────────────┐
│ Salaried     ▼ │
└────────────────┘
       ↓
    .value
       ↓
   "salaried"

Radio

○ Male
● Female
○ None
       ↓
    :checked
       ↓
   Female
       ↓
    .value
       ↓
  "female"

Checkbox

☑ Phone
☑ Email
☐ SMS

      ↓

cek satu per satu
      ↓
.checked
      ↓
true / false
      ↓
kalau true → .value
      ↓
array

58. Catatan teknis: getElementsByName() bukan Array

Seperti yang disebut tadi, ini perlu kamu ingat secara perlahan.

let contacts =
    document.getElementsByName("contact");

Hasilnya adalah NodeList.

Memang bisa:

contacts[0]
contacts[1]
contacts.length

sehingga mirip array.

Tetapi:

Array.isArray(contacts)

→ false.

Untuk level course sekarang, tidak perlu terlalu dipikirkan. Cukup pegang:

NodeList = kumpulan DOM elements yang bisa kita iterasi.

59. Catatan teknis kedua: nama contact vs contacts

Jangan sampai bingung.

Misalnya:

let contacts = [];

ini array milik kita.

Sedangkan:

document.getElementsByName("contact");

contact adalah HTML name attribute.

Jadi:

HTML:
name="contact"

JavaScript:
contacts = []

Tidak harus sama.

60. Cheat sheet akhir lecture

Input biasa

let value =
    document.getElementById("myInput").value;

Dropdown

let occupation =
    document.getElementById("occupation").value;

Date

let dob =
    document.getElementById("dob").value;

Radio

let gender =
    document.querySelector(
        'input[name="gender"]:checked'
    ).value;

Baca:

Cari radio gender yang checked → ambil value.

Checkbox

let contacts = [];

let contactElements =
    document.getElementsByName("contact");

for (let i = 0; i < contactElements.length; i++) {

    if (contactElements[i].checked) {
        contacts.push(
            contactElements[i].value
        );
    }
}

Baca:

Ambil semua checkbox contact → loop → kalau checked → ambil value → masukkan ke array.

61. Ringkasan perbedaan yang wajib kamu kuasai

🧠 Inti lecture dalam satu gambar mental

                FORM
                  │
       ┌──────────┼──────────┐
       ↓          ↓          ↓
     INPUT      SELECT     RADIO/CHECKBOX
       │          │          │
       ↓          ↓          ↓
    .value      .value    .checked
                             │
                      ┌──────┴──────┐
                      ↓             ↓
                    RADIO       CHECKBOX
                      ↓             ↓
                  :checked        LOOP
                      ↓             ↓
                    .value       .checked
                                    ↓
                                  .value
                                    ↓
                                  push()
                                    ↓
                                  ARRAY

Dan sebelum semuanya dilakukan ketika button berada dalam form:

Klik Apply for Loan
        ↓
applyForLoan(event)
        ↓
event.preventDefault()
        ↓
tidak reload
        ↓
baca semua data

🎯 Jadi kalau ada satu hal yang harus kamu bawa dari lecture ini:

Untuk membaca value form element, biasanya kita mendapatkan DOM element terlebih dahulu, kemudian menggunakan .value. Untuk radio dan checkbox, kita perlu memperhatikan .checked terlebih dahulu karena yang kita butuhkan adalah element yang sedang dipilih.

Dan pola checkbox yang paling penting:

Semua checkbox
      ↓
loop
      ↓
checked?
  ↙       ↘
yes       no
 ↓         ↓
value     skip
 ↓
push ke array

Setelah lecture ini, kamu sudah punya kemampuan penting untuk membuat form yang benar-benar membaca input user, bukan sekadar menampilkan HTML. Lecture berikutnya tinggal membawa data yang sudah kita baca ini ke custom modal dan menampilkannya kepada user.