javascript mengubah nilai bentuk

Dalam pembangunan web, borang biasanya digunakan sebagai alat untuk pengguna menyerahkan data, dan halaman perlu menggunakan JavaScript untuk mengubah suai atau mengawalnya. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk menukar nilai borang dan menyediakan beberapa kes aplikasi praktikal biasa.

Kaedah JavaScript untuk menukar nilai borang

1 Gunakan JavaScript DOM untuk menetapkan nilai elemen borang

DOM ialah API standard untuk JavaScript untuk mengendalikan elemen halaman, yang boleh. digunakan untuk mengakses dan Mengubah suai mana-mana elemen dalam halaman web, termasuk elemen bentuk. Untuk elemen seperti kotak teks, kotak lungsur dan kotak semak dalam borang, anda boleh menukar nilainya dengan menetapkan atribut nilai elemen.

Sebagai contoh, jika anda ingin menukar nilai kotak input nama dalam borang kepada "Harry", anda boleh menggunakan kod berikut:

document.getElementById("name").value = "Harry";

Kod ini mula-mula memilih elemen borang dengan ID "nama", Kemudian tetapkan atribut nilainya kepada "Harry".

2. Gunakan API Borang JavaScript untuk mengubah suai nilai elemen borang

API Borang ialah enkapsulasi peringkat lebih tinggi bagi elemen borang berdasarkan DOM. Dengan mengakses objek Borang untuk mengendalikan elemen borang, anda mengelak daripada menggunakan atribut id untuk memilih elemen borang secara individu, menjadikan kod lebih bersih dan lebih mudah difahami.

Sebagai contoh, jika anda ingin menetapkan elemen borang bernama "pengguna" kepada keadaan yang dipilih, anda boleh menggunakan kod berikut:

document.forms['formName'].elements['user'].checked = true;

Di sini, kami mula-mula memilih borang melalui nama attribute of the form , dan kemudian pilih elemen form tertentu melalui atribut name elemen form. Seterusnya, tetapkan atribut elemen yang diperiksa kepada benar untuk memilihnya.

Senario permohonan biasa bagi operasi borang

1. Pengisian automatik borang

Dalam sesetengah kes, anda mungkin perlu mengisi elemen tertentu secara automatik dalam borang. Sebagai contoh, dalam halaman log masuk, jika pengguna sudah log masuk, nilai lalai kawalan nama pengguna dan kata laluan perlu digantikan dengan maklumat log masuk pengguna.

const username = 'example_user';
const password = 'example_password';
document.getElementById('username').value = username;
document.getElementById('password').value = password;

2. Kawalan ketersediaan elemen borang

Apabila borang mengandungi berbilang elemen borang, kadangkala perlu mengawal ketersediaan elemen borang lain berdasarkan status pemilihan elemen borang semasa . Contohnya, apabila anda memilih pilihan, anda mungkin mahu mendayakan kotak senarai juntai bawah atau kotak input teks yang lain.

const selectElement = document.getElementById('selectElement');
const textInput = document.getElementById('textInput');
const dropDown = document.getElementById('dropDown');

selectElement.addEventListener('click', () => {
    if (selectElement.value === 'large') {
        textInput.disabled = true;
        dropDown.disabled = false;
    } else if (selectElement.value === 'small') {
        textInput.disabled = false;
        dropDown.disabled = true;
    } else {
        textInput.disabled = true;
        dropDown.disabled = true;
    }
});

Dalam contoh ini, kami menggunakan acara mendengar untuk menangkap peristiwa klik pada kotak senarai lungsur. Kemudian, tetapkan ketersediaan kotak input teks dan kotak senarai juntai bawah berdasarkan nilai pilihan.

3. Tetapan semula borang

Apabila pengguna perlu mengisi borang semula, semua elemen borang mungkin perlu ditetapkan semula. Dalam contoh ini, kami menambah butang "Tetapkan Semula" pada semua kotak input teks dan kotak senarai juntai bawah dalam borang, dan terus memanggil kaedah tetapan semula() borang.

<form id="myForm">
    <label for="fname">First Name:</label>
    <input type="text" id="fname" name="fname"><br><br>

    <label for="lname">Last Name:</label>
    <input type="text" id="lname" name="lname"><br><br>

    <select id="gender" name="gender">
        <option value="male">Male</option>
        <option value="female">Female</option>
    </select><br><br>

    <button type="reset" onclick="document.getElementById('myForm').reset()">Reset</button>
</form>

Di atas ialah kaedah menukar nilai bentuk dalam JavaScript dan senario aplikasi yang berkaitan. Sudah tentu, ini hanya sebahagian daripada borang pengubahsuaian js, dan kaedah pemprosesan yang lebih terperinci mesti dikendalikan mengikut keperluan pembangunan.

Atas ialah kandungan terperinci javascript mengubah nilai bentuk. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!