Při vytváření formuláře nebo dotazníku se může vyskytnout požadavek na přiřazení hodnoty uživatelského vstupu konkrétnímu poli. Například připojování důvěrných záznamů, tj. hesla nebo zakódované hodnoty za účelem jejich použití. V takových případech nastavení hodnoty skrytého vstupního prvku pomocí JavaScriptu pomáhá udržovat data v bezpečí.
Tento blog bude diskutovat o postupu nastavení hodnoty skrytého vstupního pole pomocí JavaScriptu
Jak nastavit hodnotu skrytého vstupního pole pomocí JavaScriptu?
Chcete-li nastavit hodnotu skrytého vstupního pole pomocí JavaScriptu, použijte níže uvedené postupy:
Metoda 1: Nastavte hodnotu skrytého prvku prostřednictvím vlastnosti innerHTML
' vnitřní HTML ” vrátí obsah HTML prvku. Tuto vlastnost lze použít k nastavení a připojení uživatelem definované hodnoty k přidělenému skrytému vstupnímu poli.
Syntax:
element.innerHTML = text
Ve výše uvedené syntaxi „ živel ” odkazuje na prvek, který je třeba připojit znakem “ text “hodnota.
Příklad
Pojďme si projít níže uvedený příklad:
< vstup typ = 'skrytý' id = 'hiddenElement' hodnota = '' >< skript >
nechat myInput = výzva ( 'Zadejte prosím svůj text' , '' ) ;
-li ( myInput ! = null ) {
nechat x = document.getElementById ( 'hiddenElement' ) .innerHTML = 'Hodnota skrytého prvku je: ' + myInput;
upozornění ( X )
}
skript >
Ve výše uvedeném bloku kódu:
- Nejprve vytvořte vstupní pole s uvedenými atributy.
- ' typ ” atribut s hodnotou “ skrytý “ znamená, že se jedná o skryté pole.
- Poté se „ výzva ” dialogové okno přebírá hodnotu od uživatele.
- Nyní aplikujte kontrolu na uživatelem definovanou hodnotu tak, aby nebyla „ nula ' za použití ' -li “podmínka.
- Nakonec přejděte do skrytého vstupního pole pomocí jeho „ id ' za použití ' getElementById() “ a nastavte jí uživatelem definovanou hodnotu pomocí “ vnitřní HTML ' vlastnictví.
- Nakonec zobrazte připojenou hodnotu prostřednictvím upozornění.
Výstup
Jak bylo pozorováno, hodnota uživatelského vstupu je připojena ke skrytému vstupnímu poli.
Metoda 2: Nastavte hodnotu skrytého prvku pomocí přístupu jQuery
V tomto přístupu jQuery „ val() ” metoda bude použita k přiřazení hodnoty viditelného vstupního textového pole skrytému vstupnímu poli.
Příklad
Podívejme se na následující kód:
< p > Zadejte hodnotu pro skrytý prvek p >< vstup id = 'můj vstup' hodnota = '' typ = 'text' />< br >
< vstup id = 'hiddenElement' typ = 'skrytý' hodnota = '' />
< br >
< knoflík id = 'btnShow' > Předložit knoflík >
< skript src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js' > skript >
< skript >
$ ( '#btnShow' ) .na ( 'kliknout' , funkce ( ) {
nechat inputValue = $ ( '#myInput' ) .val ( ) ;
$ ( '#hiddenElement' ) .val ( inputValue ) ;
upozornění ( 'Hodnota skrytého prvku je:' + vstupní hodnota ) ;
} ) ;
skript >
Ve výše uvedených řádcích kódu:
- Nejprve zahrňte vstupní textové pole s uvedenými atributy.
- Podobně přidělte další skryté vstupní pole, jak je zřejmé z jeho „ typ ' atribut.
- Přidána značka
- Poté zahrňte knihovnu jQuery pomocí „ src ” atribut v “