Tijdens het maken van een formulier of een vragenlijst kan er een vereiste zijn om een gebruikersinvoerwaarde toe te wijzen aan een specifiek veld. Bijvoorbeeld het toevoegen van vertrouwelijke vermeldingen, d.w.z. een wachtwoord of een gecodeerde waarde om ze te gebruiken. In dergelijke gevallen helpt het instellen van de waarde van een verborgen invoerelement via JavaScript om de gegevens veilig te houden.
In deze blog wordt de procedure besproken om de waarde van een verborgen invoerveld via JavaScript in te stellen
Hoe de waarde van een verborgen invoerveld instellen via JavaScript?
Pas de onderstaande benaderingen toe om de waarde van het verborgen invoerveld via JavaScript in te stellen:
Methode 1: stel de waarde van het verborgen element in via de eigenschap innerHTML
De ' binnenHTML ” eigenschap retourneert de HTML-inhoud van het element. Deze eigenschap kan worden gebruikt om de door de gebruiker gedefinieerde waarde in te stellen en toe te voegen aan het toegewezen verborgen invoerveld.
Syntaxis:
element.innerHTML = tekst
In de bovenstaande syntaxis, ' element ” verwijst naar het element dat moet worden toegevoegd met de “ tekst ' waarde.
Voorbeeld
Laten we het onderstaande voorbeeld eens bekijken:
< invoer type = 'verborgen' ID kaart = 'verborgenElement' waarde = '' >< script >
laat mijnInvoer = prompt ( 'Voer uw tekst in' , '' ) ;
als ( mijnInput ! = nul ) {
laat x = document.getElementById ( 'verborgenElement' ) .innerHTML = 'De waarde van het verborgen element is: ' + mijnInput;
alarm ( x )
}
script >
In het bovenstaande codeblok:
- Maak eerst het invoerveld met de vermelde attributen.
- De ' type ” attribuut met de waarde “ verborgen ” betekent dat het een verborgen veld is.
- Daarna is de “ snel ” dialoogvenster neemt een waarde van de gebruiker.
- Pas nu een controle toe op de door de gebruiker gedefinieerde waarde zodat deze niet ' nul ' de ... gebruiken ' als ' voorwaarde.
- Ga ten slotte naar het verborgen invoerveld door zijn ' ID kaart ' de ... gebruiken ' getElementById() ' methode en stel de door de gebruiker gedefinieerde waarde in via de ' binnenHTML ' eigenschap.
- Geef ten slotte de toegevoegde waarde weer via een waarschuwing.
Uitgang
Zoals waargenomen, wordt de door de gebruiker ingevoerde waarde toegevoegd aan het verborgen invoerveld.
Methode 2: stel de waarde van het verborgen element in met behulp van de jQuery-benadering
In deze benadering, jQuery's ' waarde() ” methode zal worden gebruikt om de waarde van het zichtbare invoertekstveld toe te wijzen aan het verborgen invoerveld.
Voorbeeld
Laten we de volgende code eens bekijken:
< p > Voer de waarde in voor verborgen element p >< invoer ID kaart = 'mijnInvoer' waarde = '' type = 'tekst' />< br >
< invoer ID kaart = 'verborgenElement' type = 'verborgen' waarde = '' />
< br >
< knop ID kaart = 'btnShow' > Indienen knop >
< script src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js' > script >
< script >
$ ( '#btnShow' ) .Aan ( 'Klik' , functie ( ) {
laat invoerwaarde = $ ( '#mijnInvoer' ) .val ( ) ;
$ ( '#verborgenElement' ) .val ( invoerwaarde ) ;
alarm ( 'De waarde van het verborgen element is: ' + invoerwaarde ) ;
} ) ;
script >
In de bovenstaande regels code:
- Neem eerst een invoertekstveld op met de genoemde attributen.
- Wijs op dezelfde manier een ander verborgen invoerveld toe, zoals blijkt uit het ' type ” attribuut.
- Toegevoegd
- Voeg daarna de jQuery-bibliotheek toe met behulp van de ' src ” attribuut in de “