Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > javascript mengubah nilai bentuk

javascript mengubah nilai bentuk

WBOY
Lepaskan: 2023-05-17 19:20:06
asal
1514 orang telah melayarinya

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";
Salin selepas log masuk

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;
Salin selepas log masuk

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;
Salin selepas log masuk

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;
    }
});
Salin selepas log masuk

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>
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan