Come ottenere il valore del campo di input di testo usando JavaScript?

JavaScript può interagire con diverse pagine Web per fornire servizi di server e lato client. Lo scopo di JavaScript è fornire elementi interattivi sulle pagine Web per coinvolgere gli utenti. Questi elementi interattivi includono lo stile dinamico, l'inserimento del valore, la ricezione di valore dai moduli, ecc.

In questo post, viene eseguita un'implementazione pratica di come ottenere il valore del testo dai campi di input utilizzando JavaScript.

Esistono diversi modi per acquisire il valore dal campo di input utilizzando JavaScript. Tenendo in vista quelli, i risultati del post sono:

• • Usando il getElementById in JavaScript
  • Utilizzo di getElementsByClassName in JavaScript

Metodo 1: usando GetElementById in JavaScript

In JavaScript, il getelementbyid Il metodo viene utilizzato per ottenere il valore della casella di testo di input con un attributo ID. Questo metodo viene impiegato per restituire un output con un valore specificato. Restituisce il valore null se l'elemento non è presente qui. La maggior parte degli utenti lo utilizza per leggere e modificare gli elementi HTML. La sintassi di GetElementByID è la seguente:

Sintassi

documento.getElementById ("inputId").valore;

In questa sintassi, il getelementbyid Il metodo estrae il valore passando lo stesso attributo ID "inputID".

Codice

Un esempio di ottenere il valore del campo di testo input.

premi il bottone

Nel codice sopra:

• • Innanzitutto, il campo di input viene utilizzato per prendere l'input dall'utente.
  • Dopodiché, il getInputValue () La funzione viene utilizzata per acquisire la proprietà del valore utilizzando getelementbyid.valore.
  • Viene creato un nuovo pulsante che ha la funzione getInputValue () sul suo evento OnClick.

Produzione

Dopo aver eseguito il codice, verranno visualizzate una casella di testo e un pulsante. Quando scrivi una parola nella casella di testo e viene premuto il pulsante, verrà visualizzata una casella di avviso che contiene la parola/testo scritto nella casella di testo in precedenza. Il pop-up di allerta sarebbe come mostrato di seguito:

Metodo 2: Utilizzo di getElementsByClassName in JavaScript

In JavaScript, un altro metodo noto come getElementsByClassName viene utilizzato per ottenere il valore del campo di input di testo. Restituisce l'insieme di elementi specificati dal nome della classe. IL getElementsByClassName () Il metodo si chiama usando l'elemento del documento. Cerca l'intero documento e fornisce l'output di tutti gli elementi figlio presenti nel documento. La sintassi per utilizzare questo metodo è fornita di seguito:

documento.getElementsByClassName ("InputClass") [0].valore;

La sintassi è descritta come:

• • Inputclass: rappresenta il nome della classe.
  • [0]: Rappresenta che se non è presente alcun elemento corrispondente qui, quindi restituisce indefinito.

Codice

Utilizzando il metodo getElementsByClassName e visualizzarlo.

Ottieni valore

Il codice sopra lo rappresenta Inputclass è specificato come nome di classe del campo di testo. Dopodiché, il getInputValue () la funzione viene utilizzata, in cui getElementsByClassName () è chiamato usando il documento elemento specificando il nome della classe "Inputclass".

Produzione

Nel display sopra, il valore "Minhal"È posizionato all'interno del testo archiviato.

Dopo aver premuto il Ottieni valore pulsante, il valore viene memorizzato e visualizzato come messaggio di avviso nella finestra pop-up. In questo modo, il getElementsByClassName () Il metodo può essere utilizzato per ottenere il valore del campo di input di testo usando JavaScript.

Conclusione

In JavaScript, il getElementById () E getElementsByClassName () I metodi vengono utilizzati per ottenere il valore del campo di input di testo. Nel getElementById () Metodo, il valore della casella di testo di input viene estratto con un attributo ID. Mentre il getElementsByClassName () Il metodo restituisce l'insieme di elementi specificati dal nome della classe. Entrambi questi metodi sono supportati da browser avanzati, tra cui Chrome, Opera, Safari, ecc. Hai imparato a estrarre il valore del campo di input di testo con JavaScript.