Podczas tworzenia formularza lub kwestionariusza może wystąpić wymóg przypisania wartości wprowadzonej przez użytkownika do określonego pola. Na przykład dołączanie poufnych wpisów, tj. hasła lub zakodowanej wartości w celu ich wykorzystania. W takich przypadkach ustawienie wartości ukrytego elementu wejściowego za pomocą JavaScript pomaga w zapewnieniu bezpieczeństwa danych.
W tym blogu omówimy procedurę ustawiania wartości ukrytego pola wejściowego za pomocą JavaScript
Jak ustawić wartość ukrytego pola wejściowego za pomocą JavaScript?
Aby ustawić wartość ukrytego pola wejściowego za pomocą JavaScript, zastosuj poniższe metody:
Metoda 1: Ustaw wartość ukrytego elementu za pomocą właściwości innerHTML
„ wewnętrzny HTML ” zwraca zawartość HTML elementu. Tej właściwości można użyć do ustawienia i dołączenia wartości zdefiniowanej przez użytkownika do przydzielonego ukrytego pola wejściowego.
Składnia:
element.innerHTML = tekst
W powyższej składni „ element ” odnosi się do elementu, do którego należy dołączyć „ tekst ' wartość.
Przykład
Przeanalizujmy poniższy przykład:
< Wejście rodzaj = 'ukryty' ID = „ukryty element” wartość = '' >< scenariusz >
pozwalać moje dane wejściowe = zachęta ( „Proszę wprowadzić swój tekst” , '' ) ;
jeśli ( moje wejście ! = zero ) {
pozwalać x = dokument.getElementById ( „ukryty element” ) .innerHTML = „Wartość ukrytego elementu to:” + moje wejście;
alarm ( x )
}
scenariusz >
W powyższym bloku kodu:
- Najpierw utwórz pole wejściowe o podanych atrybutach.
- „ rodzaj ” atrybut o wartości „ ukryty ” oznacza, że jest to pole ukryte.
- Następnie „ podpowiedź ” okno dialogowe pobiera wartość od użytkownika.
- Teraz zastosuj sprawdzenie wartości zdefiniowanej przez użytkownika, tak aby nie była to „ zero ' używając ' jeśli ' stan.
- Na koniec uzyskaj dostęp do ukrytego pola wprowadzania za pomocą „ ID ' używając ' getElementById() ” i ustaw dla niej wartość zdefiniowaną przez użytkownika za pomocą „ wewnętrzny HTML ' własność.
- Na koniec wyświetl dołączoną wartość za pomocą alertu.
Wyjście
Jak zaobserwowano, wartość wprowadzona przez użytkownika jest dołączana do ukrytego pola wprowadzania.
Metoda 2: Ustaw wartość ukrytego elementu za pomocą podejścia jQuery
W tym podejściu „jQuery” wartość() ” zostanie wykorzystana do przypisania wartości widocznego wejściowego pola tekstowego do ukrytego pola wejściowego.
Przykład
Przyjrzyjmy się następującemu kodowi:
< p > Wprowadź wartość dla ukryty element p >< Wejście ID = „moje dane wejściowe” wartość = '' rodzaj = 'tekst' />< br >
< Wejście ID = „ukryty element” rodzaj = 'ukryty' wartość = '' />
< br >
< przycisk ID = „btnPokaż” > Składać przycisk >
< scenariusz źródło = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js' > scenariusz >
< scenariusz >
$ ( „#btnPokaż” ) .na ( 'Kliknij' , funkcjonować ( ) {
pozwalać wartość wejściowa = $ ( „#moje dane wejściowe” ) .val ( ) ;
$ ( „#ukryty element” ) .val ( wartość wejściowa ) ;
alarm ( 'Wartość ukrytego elementu to:' + wartość wejściowa ) ;
} ) ;
scenariusz >
W powyższych liniach kodu:
- Po pierwsze, dołącz pole tekstu wejściowego o określonych atrybutach.
- Podobnie przydziel inne ukryte pole wprowadzania, jak wynika z jego „ rodzaj ' atrybut.
- Dodano tag
- Następnie dołącz bibliotekę jQuery za pomocą „ źródło ” atrybut w „
”znacznik. - W kodzie JS uzyskaj dostęp do utworzonego przycisku i skojarz „ na() ” z nim, aby wykonać funkcję po kliknięciu przycisku.
- W definicji funkcji uzyskaj dostęp do widocznego wejścia „ tekst ” i pobierz jego wartość za pomocą „ wartość() ' metoda.
- W następnym kroku pobrana wartość zostanie przypisana do ukrytego wejścia „ tekst ” przez „ wartość() ' metoda.
- Na koniec wyświetl wynikową wartość przypisaną do „ ukryte pole wprowadzania ” za pośrednictwem alertu.
Wyjście
Na powyższym wyjściu widać, że wartość widocznego wejścia „ tekst pole ” jest przypisane do ukryty ' pole wejściowe.
Wniosek
Aby ustawić wartość ukrytego pola wejściowego za pomocą JavaScript, zastosuj „ wewnętrzny HTML ”właściwość lub jQuery” wartość() ' metoda. Właściwość innerHTML może służyć do zastosowania żądanej funkcjonalności przez dodanie wartości zdefiniowanej przez użytkownika. Metodę val() można zastosować do przydzielenia wartości widocznego pola tekstowego do ukrytego pola W tym blogu omówiono procedurę ustawiania wartości ukrytego pola wejściowego za pomocą JavaScript.