CARA MENAMPILKAN HASIL FORM DENGAN JAVASCRIPT

Sebagai seorang pengembang web, pemahaman dasar tentang JavaScript sangat krusial. Salah satu fungsinya adalah menampilkan hasil form di halaman web. Di artikel ini, kita akan mempelajari cara melakukannya dengan mudah dan efisien.

Persiapan Form HTML

Sebelum menampilkan hasil form dengan JavaScript, tentu kamu perlu form tersebut. Misalnya kita ingin membuat form sederhana berisi nama dan email.

<form id="formKu">
  <label>Nama:</label><br>
  <input type="text" id="nama" name="nama"><br>
  <label>Email:</label><br>
  <input type="text" id="email" name="email"><br>
  <input type="submit" value="Kirim">
</form>

Fungsi JavaScript untuk Menangani Form

Setelah form HTML sudah siap, berikutnya kita perlu fungsi JavaScript untuk menangani hasil form tersebut.

document.getElementById("formKu").addEventListener("submit", function(e){
  e.preventDefault();
  
  var nama = document.getElementById('nama').value;
  var email = document.getElementById('email').value;

  console.log("Nama: " + nama);
  console.log("Email: " + email);
});

Fungsi ini akan mengambil nilai dari input form saat form disubmit dan menampilkan hasil di console.

Menampilkan Hasil Form di Halaman

Selanjutnya, kita akan membuat elemen HTML untuk menampung dan menampilkan hasil form.

<p id="hasil"></p>

Kemudian kita perlu memodifikasi sedikit fungsi JavaScript yang telah kita buat sebelumnya.

document.getElementById("formKu").addEventListener("submit", function(e){
  e.preventDefault();
  
  var nama = document.getElementById('nama').value;
  var email = document.getElementById('email').value;

  var hasil = "Nama: " + nama + ", Email: " + email;
  
  document.getElementById('hasil').innerText = hasil;
});

Kesimpulan

Seperti itulah cara menampilkan hasil form dengan JavaScript. Dengan memahami cara kerjanya, kamu bisa lebih leluasa membuat interaksi di halaman web yang kamu kembangkan. Selamat mencoba!