Submit Click Event Javascript

Submit Click Event Javascript

3 min read Jun 18, 2024
Submit Click Event Javascript

Submit Click Event JavaScript

Dalam pengembangan web, seringkali kita perlu menangani event click pada tombol submit. Event click ini digunakan untuk menjalankan tindakan tertentu saat tombol diklik, seperti mengirimkan data ke server atau menjalankan fungsi JavaScript lainnya.

Berikut beberapa cara untuk menangani submit click event dalam JavaScript:

1. Menggunakan Event Listener

Metode ini melibatkan penggunaan event listener pada elemen tombol submit.

Contoh Kode:

const submitButton = document.getElementById('submitButton');

submitButton.addEventListener('click', function(event) {
  event.preventDefault(); // Mencegah pengiriman formulir default

  //  Tindakan yang akan dijalankan saat tombol diklik
  console.log('Tombol Submit Diklik!');
});

Penjelasan:

  • document.getElementById('submitButton'): Mendapatkan elemen tombol submit dengan ID "submitButton".
  • addEventListener('click', function(event) { ... }): Menambahkan event listener untuk event click pada tombol submit.
  • event.preventDefault(): Mencegah formulir mengirimkan data secara default. Hal ini berguna jika kita ingin memproses data secara manual.
  • console.log('Tombol Submit Diklik!');: Menjalankan aksi tertentu saat tombol diklik.

2. Menggunakan Attribute onclick

Metode ini melibatkan penggunaan attribute onclick langsung pada tag HTML tombol submit.

Contoh Kode:




Penjelasan:

  • onclick="handleSubmit()": Menjalankan fungsi handleSubmit() saat tombol submit diklik.
  • function handleSubmit() { ... }: Fungsi yang berisi kode yang akan dijalankan saat tombol submit diklik.

3. Menggunakan Form Submit Event

Metode ini melibatkan penggunaan event listener untuk event submit pada form.

Contoh Kode:

const form = document.getElementById('myForm');

form.addEventListener('submit', function(event) {
  event.preventDefault(); // Mencegah pengiriman formulir default

  // Tindakan yang akan dijalankan saat form disubmit
  console.log('Form Disubmit!');
});

Penjelasan:

  • document.getElementById('myForm'): Mendapatkan elemen form dengan ID "myForm".
  • addEventListener('submit', function(event) { ... }): Menambahkan event listener untuk event submit pada form.
  • event.preventDefault(): Mencegah formulir mengirimkan data secara default.
  • console.log('Form Disubmit!');: Menjalankan aksi tertentu saat form disubmit.

Kesimpulan

Terdapat beberapa cara untuk menangani submit click event dalam JavaScript. Pilih metode yang paling sesuai dengan kebutuhan Anda dan pastikan untuk memahami cara kerjanya.

Related Post