Cara mereset kotak di javascript

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 ini sedang digunakan. Apakah Anda memerlukan kata sandi Anda?

Mohon saat menjawab pertanyaan

1. Baca pertanyaan dengan hati-hati
2. Pahami bahwa bahasa Inggris bukanlah bahasa utama semua orang, jadi toleran terhadap ejaan dan tata bahasa yang buruk
3. Jika pertanyaan diutarakan dengan buruk, mintalah klarifikasi, abaikan, atau edit pertanyaan dan perbaiki masalahnya. Penghinaan tidak diterima
4. 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()" />

<input type="reset" value="Reset Form">

Bahkan, kita juga bisa menggunakan metode

<input type="button" value="Reset Form" onClick="this.form.reset()" />

<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" onclick="this.form.reset();">
 
<input type="button" name="clear" value="Clear Form" onclick="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

1. 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

1. 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
}

1. Kita dapat mengetahui tipe dari setiap elemen form dalam larik frm_elements dengan mengambil properti tipenya

field_type = frm_elements[i].type.toLowerCase(); 

1. 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;

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()" />

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

Bagaimana Anda mereset sesuatu di JavaScript?

Bagaimana cara membuat fungsi reset di JavaScript?

Bagaimana cara mereset div di JavaScript?

Bagaimana cara me-refresh formulir di JavaScript?