Bagaimana cara menghentikan penyegaran formulir html setelah mengirimkan?

Secara default, saat kami mengirimkan formulir di halaman web, secara otomatis menyegarkan halaman setelah mengirimkan data formulir ke server web. Namun terkadang Anda mungkin ingin mencegah penyegaran halaman saat pengiriman formulir. Ini diperlukan jika Anda perlu mengirim data formulir melalui AJAX. Pada artikel ini, kita akan belajar bagaimana mencegah penyegaran halaman pada pengiriman formulir

Cara Mencegah Penyegaran Halaman pada Pengiriman Formulir

Katakanlah Anda memiliki formulir berikut

<form id='myform'>
   ...
</form>

Anda dapat mencegah penyegaran halaman menggunakan JavaScript biasa, atau perpustakaan pihak ketiga seperti jQuery. Kami akan melihat kedua metode ini

1. Menggunakan JavaScript

Berikut adalah kode untuk mencegah penyegaran halaman menggunakan JavaScript

var form = document.getElementById("myform");
function handleForm(event) { event.preventDefault(); } 
form.addEventListener('submit', handleForm);

Pada kode di atas, pertama-tama kita mendapatkan elemen form dari ID-nya. Kemudian kita mendefinisikan event handler untuk form tersebut, yang disebut handleForm. Kami mendefinisikannya untuk memanggil event. preventDefault() yang pada dasarnya menonaktifkan perilaku default elemen saat handler dipicu. Alternatifnya, Anda juga dapat mengembalikan nilai salah di sini. Dalam hal ini, perilaku default adalah penyegaran halaman. Terakhir, kami menambahkan event handler ini ke event 'submit' dari form

2. Menggunakan jQuery

Anda juga dapat menggunakan jQuery untuk mencegah penyegaran halaman

$("#myform").submit(function(e) {
    e.preventDefault();
});

Di sini kita langsung memanggil e. fungsi preventDefault() di mana e adalah singkatan dari event, pada fungsi submit(), yang merupakan event handler untuk jQuery. Alih-alih memanggil fungsi preventDefault(), Anda juga dapat mengembalikan nilai salah di sini

3. Menggunakan atribut onsubmit

Anda juga dapat menggunakan atribut onsubmit dari elemen formulir, untuk menentukan fungsi mana yang akan dipanggil, dan menonaktifkan penyegaran halaman

<form id="myform" onsubmit="yourFunction();return false">
   ...
</form>

Dalam kode di atas, saat formulir dikirimkan, yourFunction() dipanggil terlebih dahulu, lalu false dikembalikan, sehingga mencegah perilaku default penyegaran halaman

Pada artikel ini, kita akan membahas 2 opsi bagaimana Anda dapat mencegah acara pengiriman formulir HTML Anda memuat ulang halaman. Biasanya, saat Anda mengirimkan formulir, itu dialihkan ke tautan atribut tindakan. Tetapi Anda dapat menghentikan pemuatan ulang itu dan memanggil AJAX atau fungsi Javascript lainnya

1. preventDefault

Anda dapat memanggil fungsi preventDefault pada target acara dan itu akan menghentikan formulir dari pengalihan ke halaman yang ditentukan dalam atribut tindakan dari

Kemudian Anda dapat membuat fungsi Javascript berikut untuk mencegah pemuatan ulang halaman

function onFormSubmit() {
	event.preventDefault();

	// your Javascript code here
}

Dalam metode ini, formulir pertama kali dicegah dari pengiriman dan kemudian kode Javascript Anda akan dijalankan. Jadi ini mencegah acara pengiriman formulir terlebih dahulu, kemudian akan menjalankan kode Javascript kami yang merupakan pendekatan yang baik

Anda dapat mempelajari lebih lanjut tentang preventDefault dari sini

2. kembali salah

Pendekatan kedua adalah menggunakan pernyataan return false dalam kode Javascript Anda. Untuk ini, Anda juga perlu mengembalikan nilai dari fungsi event onsubmit. Mari kita lihat ini

Kemudian buat fungsi Javascript Anda seperti itu

function onFormSubmit() {
	// your Javascript code here
	
	return false;
}

Dalam metode ini, kode Javascript Anda berjalan terlebih dahulu sebelum mencegah pengiriman formulir

Rekomendasi

Kami akan merekomendasikan metode pertama i. e. preventDefault karena ini adalah baris pertama dari fungsi Javascript. Jadi jika ada kesalahan dalam kode Javascript Anda, browser Anda tidak akan dimuat ulang dan dengan demikian Anda dapat melihat kesalahan di konsol browser

Sekarang Anda telah belajar untuk mencegah acara pengiriman formulir. Anda juga dapat menampilkan pop-up untuk konfirmasi jika ada fungsi hapus. Anda dapat mengikuti tutorial ini untuk menampilkan konfirmasi pop-up sebelum mengirimkan formulir

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);

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 menghentikan penyegaran formulir setelah mengirimkan?

Bagaimana cara menghentikan pemuatan ulang HTML?

Bisakah Anda mengirimkan formulir tanpa memuat ulang halaman?

Bagaimana cara menghentikan pengiriman ulang konfirmasi saat penyegaran?