Når du oppretter et skjema eller et spørreskjema, kan det være et krav om å allokere en brukerinndataverdi til et spesifikt felt. For eksempel ved å legge til konfidensielle oppføringer, det vil si et passord eller en kodet verdi for å bruke dem. I slike tilfeller hjelper det å angi verdien til et skjult inngangselement gjennom JavaScript med å holde dataene trygge.
Denne bloggen vil diskutere fremgangsmåten for å angi verdien av et skjult inndatafelt gjennom JavaScript
Hvordan angi verdien av et skjult inndatafelt gjennom JavaScript?
For å angi verdien av det skjulte inndatafeltet gjennom JavaScript, bruk fremgangsmåtene nedenfor:
Metode 1: Angi verdien av det skjulte elementet via innerHTML-egenskapen
« indreHTML '-egenskapen returnerer elementets HTML-innhold. Denne egenskapen kan brukes til å angi og legge til den brukerdefinerte verdien til det tildelte skjulte inndatafeltet.
Syntaks:
element.innerHTML = tekst
I syntaksen ovenfor, ' element ' refererer til elementet som må legges til med ' tekst 'verdi.
Eksempel
La oss gå gjennom eksemplet nedenfor:
< input type = 'skjult' id = 'skjultElement' verdi = '' >< manus >
la myInput = ledetekst ( 'Vennligst skriv inn teksten din' , '' ) ;
hvis ( myInput ! = null ) {
la x = document.getElementById ( 'skjultElement' ) .innerHTML = 'Verdien av skjult element er: ' + myInput;
varsling ( x )
}
manus >
I kodeblokken ovenfor:
- Først oppretter du inndatafeltet med de angitte attributtene.
- « type ' attributt med verdien ' skjult ” betyr at det er et skjult felt.
- Etter det, ' ledetekst ” dialogboksen tar en verdi fra brukeren.
- Sett nå en sjekk på den brukerdefinerte verdien slik at den ikke er ' null ' bruker ' hvis ' tilstand.
- Til slutt, få tilgang til det skjulte inndatafeltet ved å ' id ' bruker ' getElementById() '-metoden og sett den brukerdefinerte verdien til den via ' indreHTML ' eiendom.
- Vis til slutt den vedlagte verdien via et varsel.
Produksjon
Som observert legges brukerinndataverdien til det skjulte inndatafeltet.
Metode 2: Angi verdien av det skjulte elementet ved å bruke jQuery-tilnærmingen
I denne tilnærmingen er jQuerys ' val() ”-metoden vil bli brukt for å tildele verdien av det synlige tekstfeltet til det skjulte inndatafeltet.
Eksempel
La oss se på følgende kode:
< s > Skriv inn verdien til skjult element s >< input id = 'myInput' verdi = '' type = 'tekst' />< br >
< input id = 'skjultElement' type = 'skjult' verdi = '' />
< br >
< knapp id = 'btnShow' > Sende inn knapp >
< manus src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js' > manus >
< manus >
$ ( '#btnShow' ) .på ( 'klikk' , funksjon ( ) {
la inputValue = $ ( '#myInput' ) .val ( ) ;
$ ( '#hiddenElement' ) .val ( inputValue ) ;
varsling ( 'Verdien av skjult element er:' + inngangsverdi ) ;
} ) ;
manus >
I kodelinjene ovenfor:
- Ta først med et tekstfelt som har de angitte attributtene.
- På samme måte alloker du et annet skjult inndatafelt, som det fremgår av ' type ' Egenskap.
- Lagt til
- Deretter inkluderer du jQuery-biblioteket ved hjelp av ' src '-attributt i ' ' stikkord.
- Gå til den opprettede knappen i JS-koden og tilknytt ' på() ” metode med den for å utføre funksjonen på knappen klikk.
- I funksjonsdefinisjonen får du tilgang til den synlige inngangen ' tekst '-feltet og hent verdien ved å bruke ' val() 'metoden.
- I neste trinn vil den hentede verdien bli allokert til den skjulte inngangen ' tekst '-feltet via ' val() 'metoden.
- Vis til slutt den resulterende verdien som er tildelt ' skjult inndatafelt ' via et varsel.
Produksjon
I utgangen ovenfor kan det sees at verdien av den synlige inngangen ' tekst '-feltet er tildelt ' skjult ' inndatafelt.
Konklusjon
For å angi verdien til et skjult inndatafelt gjennom JavaScript, bruk ' indreHTML ' egenskap eller jQuery ' val() 'metoden. InnerHTML-egenskapen kan brukes til å bruke ønsket funksjonalitet ved å legge til den brukerdefinerte verdien. Val()-metoden kan brukes for å allokere verdien av det synlige inndatafeltet til det skjulte inndatafeltet. Denne bloggen diskuterte prosedyren for å angi verdien til et skjult inndatafelt gjennom JavaScript.