Durante la creazione di un modulo o di un questionario, potrebbe essere necessario assegnare un valore di input utente a un campo specifico. Ad esempio, aggiungendo voci riservate, ovvero una password o un valore codificato per utilizzarle. In tali casi, l'impostazione del valore di un elemento di input nascosto tramite JavaScript aiuta a mantenere i dati al sicuro.
Questo blog discuterà la procedura per impostare il valore di un campo di input nascosto tramite JavaScript
Come impostare il valore di un campo di input nascosto tramite JavaScript?
Per impostare il valore del campo di input nascosto tramite JavaScript, applica gli approcci indicati di seguito:
Metodo 1: impostare il valore dell'elemento nascosto tramite la proprietà innerHTML
Il ' innerHTML La proprietà ” restituisce il contenuto HTML dell'elemento. Questa proprietà può essere utilizzata per impostare e aggiungere il valore definito dall'utente al campo di input nascosto allocato.
Sintassi:
element.innerHTML = testo
Nella sintassi precedente, “ elemento ' si riferisce all'elemento che deve essere aggiunto con ' testo ' valore.
Esempio
Esaminiamo l'esempio riportato di seguito:
< ingresso genere = 'nascosto' id = 'elemento nascosto' valore = '' >< copione >
permettere mioInput = prompt ( 'Inserisci il tuo testo' , '' ) ;
Se ( myInput ! = nullo ) {
permettere x = documento.getElementById ( 'elemento nascosto' ) .innerHTML = 'Il valore dell'elemento nascosto è: ' + mioInput;
mettere in guardia ( X )
}
copione >
Nel blocco di codice sopra:
- Innanzitutto, crea il campo di input con gli attributi indicati.
- Il ' genere ” attributo con il valore “ nascosto ” significa che è un campo nascosto.
- Dopodiché il “ richiesta La finestra di dialogo prende un valore dall'utente.
- Ora, applica un controllo sul valore definito dall'utente in modo tale che non sia ' nullo ' usando il ' Se ' condizione.
- Infine, accedi al campo di input nascosto con il suo ' id ' usando il ' getElementById() ” e impostare il valore definito dall'utente tramite il metodo “ innerHTML ' proprietà.
- Infine, visualizza il valore aggiunto tramite un avviso.
Produzione
Come osservato, il valore di input dell'utente viene aggiunto al campo di input nascosto.
Metodo 2: impostare il valore dell'elemento nascosto utilizzando l'approccio jQuery
In questo approccio, jQuery ' vale() Il metodo verrà utilizzato per assegnare il valore del campo di testo di input visibile al campo di input nascosto.
Esempio
Esaminiamo il seguente codice:
< p > Immettere il valore per elemento nascosto p >< ingresso id = 'mioInput' valore = '' genere = 'testo' />< fratello >
< ingresso id = 'elemento nascosto' genere = 'nascosto' valore = '' />
< fratello >
< pulsante id = 'btnMostra' > Invia pulsante >
< copione src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js' > copione >
< copione >
$ ( '#btnMostra' ) .su ( 'clic' , funzione ( ) {
permettere inputValue = $ ( '#mioInput' ) .val ( ) ;
$ ( '#elementonascosto' ) .val ( inputValore ) ;
mettere in guardia ( 'Il valore dell'elemento nascosto è: ' + inputValore ) ;
} ) ;
copione >
Nelle righe di codice precedenti:
- Innanzitutto, includi un campo di testo di input con gli attributi indicati.
- Allo stesso modo, alloca un altro campo di input nascosto, come evidente dal suo ' genere 'attributo.
- Aggiunto tag
- Successivamente, includi la libreria jQuery con l'aiuto del ' src attributo ' in '
etichetta '. - Nel codice JS, accedere al pulsante creato e associare il ' su() ” metodo con esso per eseguire la funzione sul clic del pulsante.
- Nella definizione della funzione, accedi all'input visibile ' testo ” e recuperare il suo valore utilizzando il “ vale() ' metodo.
- Nel passaggio successivo, il valore recuperato verrà assegnato all'input nascosto ' testo ” tramite il “ vale() ' metodo.
- Infine, visualizza il valore risultante assegnato a ' campo di input nascosto ” tramite un avviso.
Produzione
Nell'output sopra, si può vedere che il valore dell'input visibile ' testo ” campo è assegnato al “ nascosto ' Campo di inserimento.
Conclusione
Per impostare il valore di un campo di input nascosto tramite JavaScript, applica il ' innerHTML ” proprietà o il jQuery “ vale() ' metodo. La proprietà innerHTML può essere utilizzata per applicare la funzionalità desiderata aggiungendo il valore definito dall'utente. Il metodo val() può essere applicato per allocare il valore del campo di testo di input visibile al campo di input nascosto Questo blog ha discusso la procedura per impostare il valore di un campo di input nascosto tramite JavaScript.