Hvordan angi verdien av et skjult inndatafelt gjennom JavaScript?

Hvordan Angi Verdien Av Et Skjult Inndatafelt Gjennom Javascript



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 '