Cara menghentikan pemuatan ulang halaman saat mengklik tombol di html

Saya memiliki tombol di halaman web yang akan memanggil metode JavaScript saat diklik, tetapi ada efek sampingnya yaitu seluruh halaman disegarkan setelah tombol diklik

Click

Bagaimana cara menghentikan penyegaran halaman saat tombol diklik?

Pada bagian ini, kita akan melihat bagaimana menggunakan event. preventDefault() untuk menghentikan penyegaran halaman pada pengiriman formulir. Acara. preventDefault() membatasi perilaku penyegaran halaman default dari formulir selama pengiriman formulir

Pengguna dapat mengikuti sintaks di bawah ini untuk mencoba metode ini

Sintaksis

_

Sintaks mendefinisikan formulir

//Get form element var form=document.getElementById("formId"); function submitForm(event){ //Preventing page refresh event.preventDefault(); } //Calling a function during form submission. form.addEventListener('submit', submitForm);

Sintaks menambahkan pendengar acara ke acara pengiriman formulir. Fungsi panggilan balik memanggil acara tersebut. preventDefault() metode yang mencegah penyegaran halaman

Contoh

Dalam contoh ini, form berisi dua field input. Saat pengguna mengklik tombol kirim, fungsi callback event handler memulai eksekusi. Pengiriman formulir dan pencegahan penyegaran halaman segera terjadi

Program to stop form refreshing page on submit in JavaScript using event.preventDefault()

Name:

Email:

Menggunakan "return false" untuk menghentikan penyegaran halaman pada pengiriman formulir

Di bagian ini, kita akan melihat cara menggunakan "return false" untuk menghentikan penyegaran halaman saat pengiriman formulir. "return false" membatalkan penyegaran halaman

Pengguna dapat mengikuti sintaks di bawah ini untuk mencoba metode ini

Sintaksis

_

Sintaks memanggil fungsi JavaScript pada tindakan pengiriman formulir. "return false" mengikuti pemanggilan fungsi

Contoh

Dalam contoh ini, dua kotak centang adalah kolom input formulir. Formulir tersebut memiliki fungsi pemanggilan acara kirim dan pernyataan kembali "salah".

Pernyataan "return false" menghapus penyegaran halaman pada pengiriman formulir. Tombol kirim mati, dan halaman menampilkan pengiriman formulir yang berhasil atas permintaan pengguna

Program to stop form refreshing page on submit in JavaScript using return false

Egan likes bike
Egna likes car

Menggunakan pengiriman formulir Ajax untuk menghentikan penyegaran halaman pada pengiriman formulir

Pada bagian ini, kita akan melihat bagaimana menggunakan ajax form submit untuk menghentikan refresh halaman pada form submission. Pengiriman formulir ajax adalah cara berbeda untuk mengirimkan formulir tanpa penyegaran halaman

Pengguna dapat mengikuti sintaks di bawah ini untuk mencoba metode ini

Sintaksis

_

Sintaks mendefinisikan formulir dengan mengirimkan fungsi panggilan balik yang melakukan pengiriman formulir

//Get the form data var data=new FormData(document.getElementById("formId")); //Create XMLHttpRequest var xhr=new XMLHttpRequest(); //Open the connection and send the data to the server xhr.open("POST", "SERVER-SCRIPT"); xhr.send(data); //Avoids default form submit return false;

Sintaks membaca elemen form dan membuka koneksi xhr. Kemudian kirimkan data formulir ke server dengan memblokir tindakan pengiriman formulir default

Contoh

Sampel formulir kandidat dengan empat bidang teks tersedia dalam contoh ini. Fungsi kejadian pengiriman formulir membaca formulir ini, membuat XMLHttpRequest, dan memulai koneksi untuk mengirim data ke server

Pernyataan "return false" di akhir definisi fungsi menghentikan pengiriman formulir default, dan pengiriman formulir ajax terjadi

Program to stop form refreshing page on submit in JavaScript using ajax form submit

Candidate Data

_

Menggunakan pengiriman formulir API ambil untuk menghentikan penyegaran halaman pada pengiriman formulir

Di bagian ini, kita akan melihat cara menggunakan pengiriman formulir API pengambilan untuk menghentikan penyegaran halaman pada pengiriman formulir. Pengiriman formulir API pengambilan adalah cara lain untuk mengirimkan formulir tanpa penyegaran halaman. Halaman dirender setelah formulir ajax dikirimkan

Pengguna dapat mengikuti sintaks di bawah ini untuk mencoba metode ini

Sintaksis

_

Sintaksnya memiliki formulir dengan panggilan fungsi kirim untuk melakukan pengiriman formulir API pengambilan

//Get the form var data=new FormData(document.getElementById("formId")); //Use fetch syntax to submit the form data fetch("SERVER-SCRIPT", { method: "post", body: data }); //Stop default form submit action return false;

Sintaks membaca data formulir dan mengirimkannya menggunakan API pengambilan dengan menghentikan pengiriman formulir default

Contoh

Dalam contoh ini, coba pilih drop-down sebagai kolom input. Formulir memiliki fungsi kirim yang mengambil FormData dan mengirimkannya. Pernyataan "return false" di akhir fungsi menghentikan tindakan pengiriman formulir secara default. Perhatikan bahwa halaman dirender setelah pengiriman formulir API pengambilan

//Get form element var form=document.getElementById("formId"); function submitForm(event){ //Preventing page refresh event.preventDefault(); } //Calling a function during form submission. form.addEventListener('submit', submitForm); 0

Tutorial ini mengajari kami empat cara untuk berhenti menyegarkan halaman saat mengirimkan. Metode preventDefault() dan "return false" adalah untuk menghentikan penyegaran halaman pada pengiriman formulir default. Metode ajax dan metode API pengambilan adalah metode alternatif untuk pengiriman formulir tanpa penyegaran halaman

Bagaimana cara membuat tombol HTML tidak memuat ulang halaman?

Mengapa tombol HTML saya menyegarkan halaman?

Bagaimana mencegah pemuatan ulang halaman saat klik tombol di MVC?

Bagaimana cara menghindari penyegaran halaman setelah acara klik tombol di jQuery?