Űrlap vagy kérdőív létrehozásakor előállhat egy felhasználói beviteli érték hozzárendelése egy adott mezőhöz. Például bizalmas bejegyzések, azaz jelszó vagy kódolt érték hozzáfűzése azok felhasználásához. Ilyen esetekben egy rejtett beviteli elem értékének JavaScript-en keresztüli beállítása segít az adatok biztonságban tartásában.
Ez a blog a rejtett beviteli mező értékének JavaScript segítségével történő beállításának eljárását tárgyalja
Hogyan állítsuk be a rejtett beviteli mező értékét JavaScript segítségével?
A rejtett beviteli mező értékének JavaScript segítségével történő beállításához használja az alábbi módszereket:
1. módszer: Állítsa be a rejtett elem értékét a belső HTML tulajdonságon keresztül
Az ' innerHTML ” tulajdonság az elem HTML-tartalmát adja vissza. Ez a tulajdonság használható a felhasználó által megadott érték beállítására és hozzáfűzésére a hozzárendelt rejtett beviteli mezőhöz.
Szintaxis:
element.innerHTML = szöveg
A fenti szintaxisban: ' elem ' arra az elemre utal, amelyet hozzá kell fűzni a ' szöveg ” értékét.
Példa
Nézzük végig az alábbi példát:
< bemenet típus = 'rejtett' id = 'rejtett elem' érték = '' >< forgatókönyv >
hagyja myInput = prompt ( 'Kérem írja be a szövegét' , '' ) ;
ha ( myInput ! = null ) {
hagyja x = document.getElementById ( 'rejtett elem' ) .innerHTML = 'A rejtett elem értéke: ' + myInput;
éber ( x )
}
forgatókönyv >
A fenti kódblokkban:
- Először hozzon létre egy beviteli mezőt a megadott attribútumokkal.
- Az ' típus ' attribútum a következő értékkel: ' rejtett ” azt jelenti, hogy ez egy rejtett mező.
- Ezt követően a „ gyors ” párbeszédablak értéket vesz a felhasználótól.
- Most ellenőrizze a felhasználó által megadott értéket úgy, hogy ne ' nulla ' használni a ' ha ' állapot.
- Végül nyissa meg a rejtett beviteli mezőt a ' id ' használni a ' getElementById() ” módszert, és állítsa be a felhasználó által megadott értéket a „ innerHTML ' ingatlan.
- Végül jelenítse meg a hozzáfűzött értéket egy figyelmeztetéssel.
Kimenet
Ahogy megfigyeltük, a felhasználói beviteli érték hozzá van fűzve a rejtett beviteli mezőhöz.
2. módszer: Állítsa be a rejtett elem értékét a jQuery Approach segítségével
Ebben a megközelítésben a jQuery „ val() ” metódus fogja használni a látható beviteli szövegmező értékének hozzárendelését a rejtett beviteli mezőhöz.
Példa
Tekintsük át a következő kódot:
< p > Adja meg az értéket számára rejtett elem p >< bemenet id = 'saját bemenet' érték = '' típus = 'szöveg' />< br >
< bemenet id = 'rejtett elem' típus = 'rejtett' érték = '' />
< br >
< gomb id = 'btnShow' > Beküldés gomb >
< forgatókönyv src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js' > forgatókönyv >
< forgatókönyv >
$ ( '#btnShow' ) .tovább ( 'kattint' , funkció ( ) {
hagyja inputValue = $ ( '#myInput' ) .val ( ) ;
$ ( '#hiddenElement' ) .val ( inputValue ) ;
éber ( 'A rejtett elem értéke: + inputValue ) ;
} ) ;
forgatókönyv >
A fenti kódsorokban:
- Először is adjon meg egy beviteli szövegmezőt a megadott attribútumokkal.
- Hasonlóképpen jelöljön ki egy másik rejtett beviteli mezőt, amint az a „ típus ' tulajdonság.
- Hozzáadott
- Ezután vegye be a jQuery könyvtárat a „ src ' attribútum a '