Kosongkan semua bidang dalam formulir setelah kembali dengan tombol kembali browser

Saya membutuhkan cara untuk menghapus semua bidang dalam formulir saat pengguna menggunakan tombol kembali browser. Saat ini, browser mengingat semua nilai terakhir dan menampilkannya saat Anda kembali.

Klarifikasi lebih lanjut tentang mengapa saya membutuhkan ini, saya memiliki kolom input yang dinonaktifkan yang nilainya dihasilkan secara otomatis menggunakan algoritme untuk membuatnya unik dalam grup data tertentu. Setelah saya mengirimkan formulir dan data dimasukkan ke dalam database, pengguna seharusnya tidak dapat menggunakan nilai yang sama lagi untuk mengirimkan formulir yang sama. Oleh karena itu, saya telah menonaktifkan bidang input di tempat pertama. Tetapi jika pengguna menggunakan tombol kembali browser, browser mengingat nilai terakhir dan nilai yang sama dipertahankan di bidang masukan. Karenanya pengguna dapat mengirimkan kembali formulir dengan nilai yang sama.

Yang tidak saya mengerti adalah apa yang sebenarnya terjadi saat Anda menekan tombol kembali di browser. Sepertinya seluruh halaman diambil dari cache tanpa pernah menghubungi server jika ukuran halaman berada dalam batas cache browser. Bagaimana cara memastikan bahwa halaman dimuat dari server terlepas dari pengaturan browser saat Anda menekan tombol kembali di browser?

Browser modern menerapkan sesuatu yang disebut cache back-forward (BFCache). Ketika Anda menekan tombol kembali / maju, halaman yang sebenarnya tidak dimuat ulang (dan skrip tidak pernah dijalankan ulang).

Jika Anda harus melakukan sesuatu jika pengguna menekan tombol kembali / maju - dengarkan BFCache pageshowdan pagehideacara:

window.addEventListener("pageshow", () => {
  // update hidden input field
});

Lihat detail selengkapnya untuk implementasi Gecko dan WebKit .

Cara lain tanpa JavaScript adalah menggunakan <form autocomplete="off">untuk mencegah browser mengisi ulang formulir dengan nilai terakhir.

Lihat juga pertanyaan ini

Menguji ini hanya dengan satu <input type="text"> di dalam formulir, tetapi berfungsi dengan baik di Chrome dan Firefox saat ini, sayangnya tidak di IE10.

Saya menemukan posting ini saat mencari cara untuk menghapus seluruh formulir yang terkait dengan BFCache (cache tombol mundur / maju) di Chrome.

Selain dari apa yang diberikan Sim, kasus penggunaan saya mengharuskan detail yang perlu digabungkan dengan Formulir Jelas di Tombol Kembali? .

Saya menemukan bahwa cara terbaik untuk melakukan ini adalah dengan mengizinkan formulir berperilaku seperti yang diharapkan, dan memicu peristiwa:

$(window).bind("pageshow", function() {
    var form = $('form'); 
    // let the browser natively reset defaults
    form[0].reset();
});

Jika Anda tidak menangani inputkejadian untuk menghasilkan objek dalam JavaScript, atau hal lain dalam hal ini, maka Anda sudah selesai. Namun, jika Anda mendengarkan acara, setidaknya di Chrome Anda perlu memicu changesendiri acara (atau acara apa pun yang ingin Anda tangani, termasuk acara khusus):

form.find(':input').not(':button,:submit,:reset,:hidden').trigger('change');

Yang harus ditambahkan setelah itu resetuntuk berbuat baik apapun.

Jika Anda perlu kompatibel dengan browser lama, opsi "pageshow" mungkin tidak berfungsi. Kode berikut berhasil untuk saya.

$(window).load(function() {
    $('form').get(0).reset(); //clear form data on page load
});

Inilah yang berhasil bagi saya.

$(window).bind("pageshow", function() {
    $("#id").val('');
    $("#another_id").val('');
});

Saya awalnya memiliki ini di $(document).readybagian jquery saya, yang juga berfungsi. Namun, saya mendengar bahwa tidak semua browser $(document).readyaktif saat menekan tombol kembali, jadi saya mengeluarkannya. Saya tidak tahu pro dan kontra dari pendekatan ini, tetapi saya telah menguji di beberapa browser dan di beberapa perangkat, dan tidak ada masalah dengan solusi ini yang ditemukan.

Tautan di bawah mungkin membantu Anda ..

Tombol kembali browser mengembalikan bidang kosong , Hapus Formulir di Tombol Kembali?

Semoga ini bisa membantu ... Semoga Sukses