În timpul creării unui formular sau a unui chestionar, poate exista o cerință de a aloca o valoare introdusă de utilizator unui anumit câmp. De exemplu, adăugarea de intrări confidențiale, adică o parolă sau o valoare codificată pentru a le utiliza. În astfel de cazuri, setarea valorii unui element de intrare ascuns prin JavaScript ajută la păstrarea datelor în siguranță și în siguranță.
Acest blog va discuta procedura de setare a valorii unui câmp de intrare ascuns prin JavaScript
Cum să setați valoarea unui câmp de intrare ascuns prin JavaScript?
Pentru a seta valoarea câmpului de intrare ascuns prin JavaScript, aplicați abordările de mai jos:
Metoda 1: Setați valoarea elementului ascuns prin proprietatea innerHTML
„ innerHTML ” proprietatea returnează conținutul HTML al elementului. Această proprietate poate fi utilizată pentru a seta și a adăuga valoarea definită de utilizator la câmpul de intrare ascuns alocat.
Sintaxă:
element.innerHTML = text
În sintaxa de mai sus, „ element ” se referă la elementul care trebuie atașat cu „ text ” valoare.
Exemplu
Să trecem prin exemplul de mai jos:
< intrare tip = 'ascuns' id = „hiddenElement” valoare = '' >< scenariu >
lăsa myInput = prompt ( „Vă rugăm să introduceți textul” , '' ) ;
dacă ( myInput ! = nul ) {
lăsa x = document.getElementById ( „hiddenElement” ) .innerHTML = 'Valoarea elementului ascuns este: ' + myInput;
alerta ( X )
}
scenariu >
În blocul de cod de mai sus:
- În primul rând, creați câmpul de intrare având atributele declarate.
- „ tip „atribut cu valoarea „ ascuns ” înseamnă că este un câmp ascuns.
- După aceea, „ prompt ” caseta de dialog ia o valoare de la utilizator.
- Acum, aplicați o verificare asupra valorii definite de utilizator, astfel încât să nu fie „ nul ' folosind ' dacă ' condiție.
- În cele din urmă, accesați câmpul de introducere ascuns prin „ id ' folosind ' getElementById() ” și setați-o valoarea definită de utilizator prin intermediul „ innerHTML ” proprietate.
- În cele din urmă, afișați valoarea adăugată printr-o alertă.
Ieșire
După cum sa observat, valoarea introdusă de utilizator este atașată câmpului de intrare ascuns.
Metoda 2: Setați valoarea elementului ascuns utilizând abordarea jQuery
În această abordare, jQuery „ val() ” va fi utilizată pentru a aloca valoarea câmpului de text de intrare vizibil câmpului de introducere ascuns.
Exemplu
Să trecem în revistă următorul cod:
< p > Introduceți valoarea pentru element ascuns p >< intrare id = 'myInput' valoare = '' tip = 'text' />< br >
< intrare id = „hiddenElement” tip = 'ascuns' valoare = '' />
< br >
< buton id = 'btnShow' > Trimite buton >
< scenariu src = „https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js” > scenariu >
< scenariu >
$ ( „#btnShow” ) .pe ( 'clic' , funcţie ( ) {
lăsa inputValue = $ ( „#myInput” ) .val ( ) ;
$ ( „#hiddenElement” ) .val ( inputValue ) ;
alerta ( „Valoarea elementului ascuns este : ” + inputValue ) ;
} ) ;
scenariu >
În rândurile de cod de mai sus:
- În primul rând, includeți un câmp de text de intrare având atributele declarate.
- De asemenea, alocați un alt câmp de intrare ascuns, după cum se vede din „ tip ” atribut.
- S-a adăugat eticheta
- După aceea, includeți biblioteca jQuery cu ajutorul „ src ' atribut în '