När du skapar ett formulär eller ett frågeformulär kan det finnas ett krav på att allokera ett användarinmatningsvärde till ett specifikt fält. Till exempel att lägga till konfidentiella poster, d.v.s. ett lösenord eller ett kodat värde för att använda dem. I sådana fall hjälper inställningen av värdet för ett dolt indataelement via JavaScript till att hålla data säker och säker.
Den här bloggen kommer att diskutera proceduren för att ställa in värdet på ett dolt inmatningsfält genom JavaScript
Hur ställer jag in värdet på ett dolt inmatningsfält via JavaScript?
För att ställa in värdet på det dolda inmatningsfältet via JavaScript, använd nedan angivna metoder:
Metod 1: Ställ in värdet för det dolda elementet via innerHTML-egenskapen
den ' innerHTML egenskapen returnerar elementets HTML-innehåll. Den här egenskapen kan användas för att ställa in och lägga till det användardefinierade värdet till det allokerade dolda inmatningsfältet.
Syntax:
element.innerHTML = text
I ovanstående syntax, ' element ' refererar till elementet som måste läggas till med ' text ' värde.
Exempel
Låt oss gå igenom nedanstående exempel:
< inmatning typ = 'dold' id = 'hiddenElement' värde = '' >< manus >
låta myInput = prompt ( 'Vänligen ange din text' , '' ) ;
om ( myInput ! = null ) {
låta x = document.getElementById ( 'hiddenElement' ) .innerHTML = 'Värdet på det dolda elementet är: ' + myInput;
varna ( x )
}
manus >
I ovanstående kodblock:
- Skapa först inmatningsfältet med de angivna attributen.
- den ' typ ' attribut med värdet ' dold ” betyder att det är ett dolt fält.
- Efter det kommer ' prompt ” dialogrutan tar ett värde från användaren.
- Kontrollera nu det användardefinierade värdet så att det inte är ' null ' använda ' om ' tillstånd.
- Till sist, komma åt det dolda inmatningsfältet genom att ' id ' använda ' getElementById() ”-metoden och ställ in det användardefinierade värdet på det via ” innerHTML ' fast egendom.
- Slutligen, visa det bifogade värdet via en varning.
Produktion
Som observerats läggs användarinmatningsvärdet till det dolda inmatningsfältet.
Metod 2: Ställ in värdet för det dolda elementet med hjälp av jQuery-metoden
I detta tillvägagångssätt, jQuerys ' val() ”-metoden kommer att användas för att allokera värdet på det synliga inmatningstextfältet till det dolda inmatningsfältet.
Exempel
Låt oss överblicka följande kod:
< sid > Ange värdet för dolt element sid >< inmatning id = 'min ingång' värde = '' typ = 'text' />< br >
< inmatning id = 'hiddenElement' typ = 'dold' värde = '' />
< br >
< knapp id = 'btnShow' > Skicka in knapp >
< manus src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js' > manus >
< manus >
$ ( '#btnShow' ) .på ( 'klick' , fungera ( ) {
låta inputValue = $ ( '#myInput' ) .val ( ) ;
$ ( '#hiddenElement' ) .val ( inputValue ) ;
varna ( 'Värdet på dolda element är:' + inputValue ) ;
} ) ;
manus >
I kodraderna ovan:
- Inkludera först ett inmatningstextfält med de angivna attributen.
- På samma sätt, allokera ett annat dolt inmatningsfält, vilket framgår av dess ' typ ' attribut.
- Lade till
- Efter det, inkludera jQuery-biblioteket med hjälp av ' src ' attribut i '