Javascript Hapus Value Form dan Reload / Refresh Page. Beberapa hari lalu di salah satu aplikasi kantor pembutuhkan upgrade fitur terkait inputan form yang berupa type text. Fitur yang ada pada aplikasi ini menggunakan bahasa javascript.
Salah satu fungsi dari fitur tersebut yaitu bagaimana membuat sebuah form itu dapat di hapus dengan otomatis menggunakan sebuah aksi javascript melalui sebuah tag checkbox html yang di klik oleh pengguna aplikasi.
Selain itu fitur kombinasi lainya terkait dari fitur ini adalah ketika checkbox dalam keadaan terceklis atau checked, value form sudah terisi nilainya. Untuk value ini Kita menggunakan bantuan bahasa program php. Nah ketika di klik tidak di ceklis atau unchecked maka halaman akan tereload atau terefresh halaman atau page webnya.
Sebelum di hapus:
Form Input hapus dengan onclick
Sesudah terhapus:
Form terhapus setlah onclick
Baiklah berikut script javascript dan html yang Saya maksud semoga dapat membnatu teman teman semua untuk pengembangan aplikasi yang sedang dilakukan.
Script Html
<input type="checkbox" id="tipeNo" name="tipeNo" onclick="RenderNoIndukOtomatis();" checked> <input type="text" id="Collections_NoInduk_0" class="form-control" name="Collections[NoInduk][0]" value="".$noinduk."" >
Script Javascript
function RenderNoIndukOtomatis(){
var <strong>tipeNo</strong> = document.getElementById('tipeNo').checked;
if(tipeNo == false){
<strong>document.querySelectorAll("[id^=Collections_NoInduk_]").forEach(x => x.value = '');</strong>
document.querySelectorAll("[id^=Collections_NomorBarcode_]").forEach(x => x.value = ''); document.querySelectorAll("[id^=Collections_RFID_]").forEach(x => x.value = '');
}else{
location.reload();
}
Untuk penjelasan javascriptnya yaitu:
- tipeNo ini adalah variabel yang kita gunakan untuk melakukan cek terhadap checkbox html yang akan menjadi pemicu perintah javascriptnya. Fungsi yang kita gunakan adalah onclick, yaitu event terjadi kita diklik
- document.querySelectorAll(“[id^=Collections_NoInduk_]”).forEach(x => x.value = ”); untuk fungsi dari fitur script ini adalah membaca semua tag hatml yang ada id dengan ketentuan seperti yang di maksud. Untuk pembacaanya adalah semua atau setiap. Jadi fungsi script ini juga dapat digunakan untuk menghitung jumlah yang ada untuk di gunakan sebagai looping. Kemudian setelah itu terdapat foreach dan selanjutnya yang fungsinya untuk mengisi form input text yang di maksud value nya menjadi kosong atua empty.
- location.reload(); nah yang ketika adalah fungsi reload atau refresh halaman web menggunakan javascript ini.
Penjelasan alur logikanya yaitu: secara default atau bawaan awal, checkbox terceklis dan form terisi value default, kemudian kita checkbox di uncheck maka value terhapus, selanjutkan ketika checbox di ceklis laki maka halaman web atau page terefresh lagi.
Semoga script simpel ini bermanfaat buat teman-teman semua.