Saat membuat formulir atau kuesioner, mungkin ada persyaratan untuk mengalokasikan nilai masukan pengguna ke bidang tertentu. Misalnya, menambahkan entri rahasia, yaitu kata sandi atau nilai yang disandikan untuk menggunakannya. Dalam kasus seperti itu, menyetel nilai elemen input tersembunyi melalui JavaScript membantu menjaga keamanan dan keamanan data.
Blog ini akan membahas prosedur untuk mengatur nilai field input tersembunyi melalui JavaScript
Bagaimana Cara Mengatur Nilai Bidang Input Tersembunyi melalui JavaScript?
Untuk menyetel nilai bidang input tersembunyi melalui JavaScript, terapkan pendekatan yang disebutkan di bawah ini:
Metode 1: Tetapkan Nilai Elemen Tersembunyi Melalui Properti innerHTML
“ innerHTML ” properti mengembalikan konten HTML elemen. Properti ini dapat digunakan untuk menyetel dan menambahkan nilai yang ditentukan pengguna ke kolom input tersembunyi yang dialokasikan.
Sintaksis:
elemen.innerHTML = teks
Dalam sintaks di atas, “ elemen ” mengacu pada elemen yang perlu ditambahkan dengan “ teks ' nilai.
Contoh
Mari kita lihat contoh yang disebutkan di bawah ini:
< memasukkan Tipe = 'tersembunyi' Indo = 'elemen tersembunyi' nilai = '' >< naskah >
membiarkan myInput = prompt ( 'Silakan masukkan Teks Anda' , '' ) ;
jika ( myInput ! = nol ) {
membiarkan x = document.getElementById ( 'elemen tersembunyi' ) .innerHTML = 'Nilai elemen tersembunyi adalah:' + masukan saya;
peringatan ( x )
}
naskah >
Di blok kode di atas:
- Pertama, buat bidang input yang memiliki atribut yang dinyatakan.
- “ Tipe atribut ” dengan nilai “ tersembunyi ” menandakan bahwa itu adalah bidang tersembunyi.
- Setelah itu, “ mengingatkan Kotak dialog mengambil nilai dari pengguna.
- Sekarang, terapkan centang pada nilai yang ditentukan pengguna sedemikian rupa sehingga bukan ' batal ' menggunakan ' jika ' kondisi.
- Terakhir, akses kolom input tersembunyi dengan “ Indo ' menggunakan ' getElementById() ” dan tetapkan nilai yang ditentukan pengguna melalui metode “ innerHTML ' Properti.
- Terakhir, tampilkan nilai yang ditambahkan melalui peringatan.
Keluaran
Seperti yang diamati, nilai masukan pengguna ditambahkan ke bidang masukan tersembunyi.
Metode 2: Tetapkan Nilai Elemen Tersembunyi Menggunakan Pendekatan jQuery
Dalam pendekatan ini, ' val() ” metode akan digunakan untuk mengalokasikan nilai bidang teks input yang terlihat ke bidang input tersembunyi.
Contoh
Mari ikhtisar kode berikut:
< p > Masukkan nilainya untuk elemen tersembunyi p >< memasukkan Indo = 'Masukan saya' nilai = '' Tipe = 'teks' />< br >
< memasukkan Indo = 'elemen tersembunyi' Tipe = 'tersembunyi' nilai = '' />
< br >
< tombol Indo = 'btnShow' > Kirim tombol >
< naskah src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js' > naskah >
< naskah >
$ ( '#btnTunjukkan' ) .pada ( 'klik' , fungsi ( ) {
membiarkan nilai masukan = $ ( '#masukanku' ) .val ( ) ;
$ ( '#elementersembunyi' ) .val ( nilaimasukan ) ;
peringatan ( 'Nilai Elemen tersembunyi adalah : ' + Nilai masukan ) ;
} ) ;
naskah >
Pada baris kode di atas:
- Pertama, sertakan bidang teks input yang memiliki atribut yang disebutkan.
- Demikian juga, alokasikan bidang input tersembunyi lainnya, seperti yang terlihat dari “ Tipe ” atribut.
- Menambahkan tag
- Setelah itu, sertakan library jQuery dengan bantuan “ src ” atribut di “
” tag. - Dalam kode JS, akses tombol yang dibuat dan kaitkan “ pada() ” dengan itu untuk menjalankan fungsi pada klik tombol.
- Dalam definisi fungsi, akses input yang terlihat “ teks ” dan ambil nilainya menggunakan “ val() ' metode.
- Pada langkah selanjutnya, nilai yang diambil akan dialokasikan ke input tersembunyi “ teks ” melalui kolom “ val() ' metode.
- Terakhir, tampilkan nilai resultan yang dialokasikan ke “ bidang masukan tersembunyi ” melalui peringatan.
Keluaran
Pada output di atas terlihat nilai input yang terlihat “ teks ” bidang dialokasikan ke bidang “ tersembunyi ” bidang masukan.
Kesimpulan
Untuk menyetel nilai kolom input tersembunyi melalui JavaScript, terapkan “ innerHTML ” properti atau jQuery “ val() ' metode. Properti innerHTML dapat digunakan untuk menerapkan fungsionalitas yang diinginkan dengan menambahkan nilai yang ditentukan pengguna. Metode val() dapat diterapkan untuk mengalokasikan nilai field input teks yang terlihat ke field input tersembunyi Blog ini membahas prosedur untuk mengatur nilai input field tersembunyi melalui JavaScript.