hx-post — HTMX — Hyper Sheets

hx-post mengirim POST request — biasanya untuk mengirim data ke server. Form Submit Simpan HTMX otomatis mengambil semua form values dan mengirimnya sebagai…

hx-post="alamat" mengirim request POST, yaitu request untuk mengirim data yang mengubah sesuatu di server, misalnya mencatat order baru. Taruh di <form>, dan saat form dikirim, htmx mengumpulkan setiap field ber-name di dalam form itu lalu mengirimnya di body request (bagian isi request, di bawah header-nya). Balasan HTML dari server ditaruh seperti di hx-get. Bayangin nota di meja Laundry Bu Rini. Kamu mengisi nama dan berat cucian di nota, menyerahkannya ke Bu Rini, dia mencatatnya di buku order, lalu memberi potongan nota sebagai tanda terima. Form itu notanya, POST itu menyerahkan nota, dan balasan HTML itu tanda terimanya.

🧪 Tebakan cepat: Sebuah form berisi <input placeholder="Nama" value="Bu Tini"> (tanpa name) dan <input name="berat" value="4">. Form dikirim dengan hx-post. Apa yang diterima server? Jawabannya ada di bagian "Yang terkirim: field yang punya name".

Form pertama dengan hx-post

Ini meja terima cucian Bu Rini:

<form hx-post="/order" hx-target="#nota">
  <input name="nama" value="Bu Tini">
  <input name="berat" value="4">
  <button>Terima cucian</button>
</form>
<div id="nota"></div>

hx-post="/order" di <form>: pemicu bawaan form adalah submit, jadi request dikirim saat tombolnya diklik atau saat Enter ditekan di salah satu kotak.
<button> di dalam form otomatis bertipe submit, jadi gak perlu type="submit".
hx-target="#nota": balasannya masuk ke <div id="nota">, bukan menimpa form.
Tiap <input> punya name. Nama inilah yang dipakai server untuk membaca nilainya.

Yang terkirim: field yang punya name

Menekan Terima cucian mengirim request ini:

POST /order
HX-Request: true
HX-Target: nota
HX-Current-URL: http://localhost:8000/papan
Content-Type: application/x-www-form-urlencoded

nama=Bu%20Tini&berat=4

Body ada di bawah baris kosong. Formatnya name=nilai, disambung dengan &, dan spasi ditulis %20.
Content-Type: application/x-www-form-urlencoded memberi tahu server format body itu, sama dengan form HTML biasa.
Yang dikirim cuma field yang punya name dan berada di dalam form. Field tanpa name dilewati, jadi di tebakan tadi server cuma menerima berat=4. Itu jawaban tebakannya.
Kotak di luar <form> juga gak ikut, walau dia punya name.
Tombol dengan hx-post di dalam form (form-nya sendiri gak punya hx-post) tetap mengirim semua field form itu. Untuk hx-get, nilai form-nya gak ikut.

Balasannya: tanda terima dari server

Server mencatat order baru dengan nomor 15 dan tarif Rp 7.000 per kg, lalu membalas potongan HTML:

<p>Order #15 dicatat: Bu Tini, 4 kg, Rp 28.000.</p>

htmx menjadikannya isi #nota. Di Laravel, balasan ini biasanya view Blade kecil yang dikembalikan controller.

Kenapa POST, bukan GET

GET untuk membaca. Nilainya ditaruh di URL, jadi tercatat di riwayat browser dan log server, dan request-nya aman diulang.
POST untuk mengubah data. Nilainya di body.
Form yang sama dengan hx-get mengirim GET /order?nama=Bu%20Tini&berat=4. Kalau route Laravel-nya Route::post('/order', ...), server membalas 405 Method Not Allowed.

htmx punya atribut untuk method lain juga:

Atribut	Untuk	Contoh di laundry
`hx-get`	membaca	`GET /order` memuat papan
`hx-post`	membuat	`POST /order` mencatat order baru
`hx-put`	mengganti seluruh data	`PUT /order/12` mengganti semua data order #12
`hx-patch`	mengubah sebagian	`PATCH /order/12` mengubah statusnya saja
`hx-delete`	menghapus	`DELETE /order/14` menghapus order yang dibatalkan

Di htmx 2, hx-delete menaruh nilainya di URL seperti GET. POST, PUT, dan PATCH memakai body.

Balasan error gak ditempel

htmx cuma menempel balasan sukses (status 2xx). Balasan 204 No Content juga gak ditempel. Balasan 4xx dan 5xx gak ditempel sama sekali: htmx memicu event htmx:responseError, dan halamannya tetap. Jadi kalau server membalas 422 dengan <p>Nama wajib diisi.</p>, kalimat itu gak muncul di #nota. Cara menampilkan error validasi dibahas di pelajaran validasi form.

⚠️ Jebakan yang sering ketemu

Field tanpa name. Nilainya gak dikirim. Di latihan, minimal 2 input di dalam form harus punya name.
Field di luar <form>. Gak ikut terkirim. Taruh input-nya di antara <form> dan </form>.
Lupa hx-target. Tujuannya jadi form itu sendiri: tanda terimanya menimpa kotak isian dan tombolnya.
Mengira gak terjadi apa-apa. Balasan 4xx/5xx gak ditempel, jadi halamannya diam. Cek status balasannya di tab Network.
Lupa token CSRF di Laravel. Laravel menolak POST tanpa token dengan 419 Page Expired. Tulis @csrf di dalam form, dan htmx ikut mengirim field _token-nya.

TL;DR: hx-post="/order" di <form> mengirim request POST saat form di-submit. htmx mengirim setiap field ber-name di dalam form sebagai body nama=Bu%20Tini&berat=4 (application/x-www-form-urlencoded). Field tanpa name atau di luar form gak ikut. hx-target="#nota" menunjuk tempat balasannya, kalau gak, balasannya menimpa form. POST untuk membuat atau mengubah data, GET untuk membaca, dan ada juga hx-put, hx-patch, hx-delete. Balasan 2xx ditempel, 4xx dan 5xx gak.

hx-post — HTMX