Anda dapat dengan mudah mengatur ulang semua nilai formulir menggunakan tombol HTML menggunakan atribut. Mengklik tombol reset mengembalikan formulir ke keadaan semula (nilai default) sebelum pengguna mulai memasukkan nilai ke dalam bidang, memilih tombol radio, kotak centang, dll. Mungkin ada banyak skenario.
Saya menemukan cara membuat tombol setel ulang di Javascript dan menyetel ulang bidang dalam formulir yang merupakan jenis tarik-turun bidang, teks dan tanggal. Tapi itu tidak berfungsi mengatur ulang bidang yang multi-pilih dan grup kotak centang. Saya melakukannya di dalam Confluence di dalam ConfiForms
Saya pada dasarnya hanya membutuhkan solusi Javascript yang berfungsi untuk mengatur ulang atau membersihkan bidang untuk grup multi-pilih atau kotak centang
berfungsi CustomScript saya (formId) {
AJS. $('#' + fomdId). menemukan('. simpan-cf-btn'). setelah('Atur Ulang');
AJS. $('#' + formID). menemukan('. cf_reset_btn'). klik(fungsi() {
AJS. $('#' + formID). temukan('#i_totr'). val('');
AJS. $('#' + formID). temukan('#i_judul'). val('');
});
}
Apa yang telah saya coba
Saya mencoba di bawah ini tetapi tidak berhasil
function cfSetValue(formId, 'my multiselect field', '',
BENAR);
});
Saya akan merekomendasikan menggunakan tombol untuk menghapus formulir. Tidak memerlukan Javascript dan ditangani oleh browser
Jika Anda menggunakan Javascript maka Anda perlu menggunakan metode prop() yang sesuai untuk mengubah status elemen input
Tambahkan solusi Anda di sini
B I U S small BIG code var & link [^] encode untab case indent outdent
Pratinjau 0
Anggota yang Ada
atau Bergabunglah dengan kami
Unduh, Pilih, Komentari, Publikasikan
Email muEmail ini sedang digunakan. Apakah Anda memerlukan kata sandi Anda?
Kata Sandi OpsionalMohon saat menjawab pertanyaan
- Baca pertanyaan dengan hati-hati
- Pahami bahwa bahasa Inggris bukanlah bahasa utama semua orang, jadi toleran terhadap ejaan dan tata bahasa yang buruk
- Jika pertanyaan diutarakan dengan buruk, mintalah klarifikasi, abaikan, atau edit pertanyaan dan perbaiki masalahnya. Penghinaan tidak diterima
- Jangan beritahu seseorang untuk membaca manual. Kemungkinan mereka memiliki dan tidak mendapatkannya. Berikan jawaban atau lanjutkan ke pertanyaan berikutnya
Konten ini, bersama dengan kode sumber dan file terkait, dilisensikan di bawah The Code Project Open License (CPOL)
Menggunakan tombol 'Reset' HTML adalah cara mudah untuk mengatur ulang semua bidang formulir ke nilai defaultnya. Misalnya, cuplikan kode di bawah ini menunjukkan bidang <input type="button" value="Reset Form" onClick="this.form.reset()" /> 1 jenis "reset", yang saat diklik akan mengatur ulang semua bidang formulir
<input type="reset" value="Reset Form"> _
Bahkan, kita juga bisa menggunakan metode <input type="button" value="Reset Form" onClick="this.form.reset()" /> 2 form untuk mencapai efek yang sama, menggunakan elemen tombol sederhana
<input type="button" value="Reset Form" onClick="this.form.reset()" />
Metode ini sangat mudah digunakan, tetapi tidak menyediakan fungsionalitas untuk menghapus semua bidang, termasuk nilai defaultnya. Untuk mencapai ini, kita perlu menulis fungsi JavaScript yang akan menghapus nilai masing-masing bidang
Contoh sederhana untuk menghapus semua elemen formulir menggunakan JavaScript
Mari kita lihat contoh bentuk sederhana
<form name="data_entry" action="#"> Company Name: <input type="text" size="35" name="company_name"> Select Business Type: <input type="radio" name="business_category" value="1"> Manufacturer <input type="radio" name="business_category" value="2"> Whole Sale Supplier <input type="radio" name="business_category" value="3"> Retailer <input type="radio" name="business_category" value="4"> Service Provider Email Address: <input type="text" size="30" name="email"> Keep Information Private: <input type="checkbox" name="privacy"> <input type="button" name="reset_form" value="Reset Form" title="this.form.reset();"> <input type="button" name="clear" value="Clear Form" title="clearForm(this.form);"> </form> _
Seperti yang Anda lihat, tombol pertama cukup mengatur ulang semua bidang menggunakan ini. membentuk. reset() seperti yang dijelaskan sebelumnya. Sekarang mari kita tuliskan fungsi JavaScript yang berfungsi sebagai penangan onClick untuk tombol kedua pada formulir di atas
- Dalam fungsi ini, pertama-tama kita perlu memperoleh referensi ke semua elemen dalam objek form
var frm_elements = oForm.elements;
di mana, oForm adalah referensi ke objek form yang diteruskan ke fungsi menggunakan ini. bentuk seperti yang ditunjukkan pada formulir di atas. oForm. elemen sekarang menjadi larik Javascript yang menyimpan referensi ke setiap elemen formulir
- Kita kemudian harus mengulangi objek elemen bentuk individual dari larik frm_elements (Langkah 1), menggunakan konstruksi for-loop
for(i=0; i<frm_elements.length; i++) { // code for accessing each element goes here } _
- Kita dapat mengetahui tipe dari setiap elemen form dalam larik frm_elements dengan mengambil properti tipenya
field_type = frm_elements[i].type.toLowerCase();
- Jika frm_elements[i] memegang referensi ke salah satu dari <input type="button" value="Reset Form" onClick="this.form.reset()" /> 3 elemen, nilainya dapat dihapus hanya dengan menyetelnya ke string kosong
frm_elements[i].value = ""; _
Dalam hal elemen radio dan kotak centang, kami akan menggunakan pendekatan yang berbeda
if (frm_elements[i].checked) { frm_elements[i].checked = false; }
Jika frm_elements[i] adalah objek bertipe pilih (baik pilih-satu atau pilih-multi), kita dapat mengatur properti selectedIndex ke -1
frm_elements[i].selectedIndex = -1;
- Kita dapat mengelompokkan teknik ini dengan menggunakan saklar javascript, dengan cara ini
for (i = 0; i < frm_elements.length; i++) { field_type = frm_elements[i].type.toLowerCase(); switch (field_type) { case "text": case "password": case "textarea": case "hidden": frm_elements[i].value = ""; break; case "radio": case "checkbox": if (frm_elements[i].checked) { frm_elements[i].checked = false; } break; case "select-one": case "select-multi": frm_elements[i].selectedIndex = -1; break; default: break; } }
Lihat demo untuk melihat cara kerjanya, dan bandingkan hasil mengklik tombol reset dan tombol dengan handler onClick kustom yang baru saja kita kodekan. Anda juga dapat mengunduh kode dari sini
Menggambarkan perbedaan antara mengatur ulang dan membersihkan formulir
Seperti yang diilustrasikan oleh demo di atas, kedua tombol berfungsi serupa, untuk formulir khusus ini, karena tidak ada nilai elemen dalam formulir ini yang disetel saat pemuatan halaman. Sehingga perbedaan fungsi kedua tombol tersebut tidak terlihat. Mari kita menetapkan nilai default untuk beberapa elemen form. Misalnya, cuplikan kode berikut menetapkan default untuk elemen radio bernama “business_category” ke nilai 3
<input type="button" value="Reset Form" onClick="this.form.reset()" /> 0
Demikian pula, kami juga dapat menetapkan default untuk beberapa elemen formulir lainnya. Lihat demo ini, sebagai contoh dan bandingkan dengan yang sebelumnya. Seperti yang pasti Anda perhatikan, perbedaannya sekarang jelas, karena tombol Reset tidak menghapus nilai default, tidak seperti tombol lainnya, yang tidak