Tutorial JavaScript Part#10: Form Hendling pada JavaScript
Tutorial JavaScript Part#10: Form Hendling pada JavaScript
Di artikel kali ini, kita akan membahas tutorial JavaScript yang sangat penting untuk pengembangan web: cara menangani form. Kita akan belajar mengambil input dari form, melakukan validasi, dan menangani event submit secara efektif menggunakan JavaScript murni (vanilla JS).
Tutorial ini cocok untuk pemula maupun developer menengah yang ingin memahami dasar interaksi form dalam sebuah aplikasi web.
1. Mengambil Input Form di JavaScript
Kita ingin membuat form sederhana yang meminta nama pengguna. Setelah pengguna
mengetikkan nama dan menekan tombol, nama tersebut akan ditampilkan di layar.
langsung saya kita coba.
Pertama kita buat form input sederhana, untuk menamilkan inputan dan 1 buah
tombol, fokus kita ke functional dari program javascript. jadi mungkin
tampilan form nya masih berantakan. atau kalian bisa coba langsung style
sendiri agar lebih rapih.
untuk cara style Html nya bisa di lihat pada tutorial berikut ini :
Contoh Kode:
ambil-input.js
<!DOCTYPE html>
<html>
<head>
<title>Dasar JavaScript Part 10</title>
</head>
<body>
<h4>Belajar JavaScript | form Hendling</h4>
<form>
<input type="text" id="nama" placeholder="Masukkan nama Anda" />
<button type="button" id="submitBtn">Kirim</button>
</form>
<p id="output"></p>
<script>
document
.getElementById("submitBtn")
.addEventListener("click", function () {
const nama = document.getElementById("nama").value;
document.getElementById("output").innerText =
"Halo, " + nama + "!";
});
</script>
</body>
</html>
Penjelasan:
document.getElementById("nama").value mengambil nilai dari input.
Event listener dipasang pada tombol untuk menjalankan fungsi saat diklik.
Hasilnya akan ditampilkan ke elemen dengan id="output".
Event listener dipasang pada tombol untuk menjalankan fungsi saat diklik.
Hasilnya akan ditampilkan ke elemen dengan id="output".
Hasil Running:
Halo, Ucok!
Halo, Ucok!
Jika pengguna mengetik "Ucok" dan klik Kirim, maka akan muncul:
2. Validasi Form Sebelum Submit
selanjutnya kita akan coba membuat validasi sederhana,Misalnya kita ingin memastikan bahwa pengguna mengisi nama dan email sebelum mengirimkan form. atau menekan tombol submit.
tambahkan satu input lagi di dalam form nya, misal kita membuat input email.
lalu kita update kode javascript nya dan coba kita beri validasi sederhana,
seperti berikut ini.
Contoh Kode:
Validasi.js
document.getElementById("submitBtn")
.addEventListener("click", function () {
const nama = document.getElementById("nama").value.trim();
const email = document.getElementById("email").value.trim();
if (nama === "" || email === "") {
alert("Nama dan email wajib diisi!");
} else {
alert("Data valid. Siap dikirim.");
document.getElementById("output").innerText =
"Halo, " + nama + "! , Email kamu " + email;
}
});
Penjelasan:
Fungsi trim() digunakan untuk menghindari input kosong yang hanya berisi
spasi.
Jika salah satu input kosong, tampilkan alert error.
Jika semua valid, tampilkan alert sukses. lalu nama dan Email akan di tampilkan
Jika salah satu input kosong, tampilkan alert error.
Jika semua valid, tampilkan alert sukses. lalu nama dan Email akan di tampilkan
Hasil Running:
Nama dan email wajib diisi!
Jika semua terisi: Data valid. Siap dikirim.
Nama dan email wajib diisi!
Jika semua terisi: Data valid. Siap dikirim.
Jika input kosong:
3. Menangani Event Submit Form
Kita ingin memproses pengiriman form dengan cara yang tidak me-refresh
halaman, biasanya kita sering membuat form dan dalam button dengan type
Submit. dengan menggunakan type submit ini jika button di klik setelah
validasi data selesai maka data akan di kirim entah itu proses Create, Update
atau delete tergantung dari action form nya, dan halaman input form yang di
buka akan di refresh.
selanjut nya kita coba kirim data dan mencetak data ke konsol. tanpa
me-refresh halaman input nya, buat satau input form lagi dengan type nya
submit, agar bisa terlihat perbedaan nya dimana.
Contoh Kode:
form_submit.js
<form id="frmInput">
<input type="text" id="nama" placeholder="Masukkan nama Anda" />
<input type="text" id="email" placeholder="Masukkan nama Email" />
<button type="submit">Kirim</button>
</form>
function.js
document .getElementById("frmInput")
.addEventListener("submit", function (e) {
e.preventDefault(); // mencegah reload
const nama = document.getElementById("nama").value;
const email = document.getElementById("email").value;
console.log("Data Terkirim:");
console.log("Nama:", nama);
console.log("Email:", email);
});
Penjelasan:
addEventListener("submit", ...) digunakan untuk menangani pengiriman form.
e.preventDefault() menghentikan perilaku default form (yaitu reload halaman).
Data diambil dan dicetak ke konsol sebagai simulasi pengiriman ke server.
addEventListener("submit", ...) digunakan untuk menangani pengiriman form.
e.preventDefault() menghentikan perilaku default form (yaitu reload halaman).
Data diambil dan dicetak ke konsol sebagai simulasi pengiriman ke server.
Hasil Running:
Jika Anda buka konsol browser dan submit form:
Jika Anda buka konsol browser dan submit form:
Data Terkirim:
Nama: Budi
Email: budi@example.com
Nama: Budi
Email: budi@example.com
4. Menggunakan Object.fromEntries() untuk Mengambil Data Form
pada Step 1 sampai 3 kita masih menggunakan teknik manual untuk
mengambil data input yang ada di form, jika ada banyak data input kita
harus definisikan 1 per satu variabel untuk menampung dan mengambil data pada
form nya.
Kita ingin menyederhanakan proses pengambilan banyak input dari form. Daripada
mengambil satu per satu (getElementById), kita akan menggunakan pendekatan
yang lebih modern dengan FormData dan Object.fromEntries().
Catatan:
jika ingin menggunakan teknik Object.fromEntries(). pada input tag wajib memberi atribut name. karna pada step sebelumnya kita hanya menggunakan id. dan tetap menggunakan form event submit atau type button nya submit.
tambahkan atribut name pada input nya lalu coba ubah kode nya seperti kode
berikut ini.
Contoh Kode:
Object.fromEntries
document
.getElementById("frmInput")
.addEventListener("submit", function (e) {
e.preventDefault();
const formData = new FormData(e.target);
const data = Object.fromEntries(formData.entries());
console.log("Data Form:");
console.log(data);
});
Penjelasan:
FormData(e.target) membuat objek FormData dari form.
formData.entries() menghasilkan pasangan kunci-nilai dari input form.
Object.fromEntries() mengubah pasangan tersebut menjadi objek JavaScript biasa.
Hasil akhirnya adalah objek seperti:
{ nama: "Arif", email: "Arif@example.com" }
jadi output data nya berupa Array key dan value, jadi kita bisa olah lagi lebih lanjut untuk menyesuaikan kebutuhan dari setiap function yang akan di jalankan. misal menggunakan fungsi loping atau ambil langsung data berdasarkan key nya.
Sampai disini kita sudah berhasil mempelajari cara untuk form handling ,
mengambil input, memvalidasi, dan menangani evnt submit form dengan
javascript.
Jangan ragu untuk bereksperimen dan tanyakan hal-hal yang masih membuat kamu bingung melalui kolom komentar! 💬
Incoming Search Terms:
- cara menangani form dengan javascript
- javascript ambil input form
- validasi input form javascript
- tutorial javascript untuk pemula
- form submit tanpa refresh javascript
- contoh form login javascript
- cara mencegah reload form javascript
- javascript event handling form
- belajar javascript form handler
- belajar formData javascript
- Object.fromEntries javascript
- cara membuat validasi form manual javascript
0 Response to "Tutorial JavaScript Part#10: Form Hendling pada JavaScript"
Posting Komentar