Recuperare il valore di campo di testo con Javascript

Loading

In questo breve articolo andremo a vedere come mediante l’utilizzo di javascript è possibile recuperare il valore inserito in un campo di testo.

Noi utilzzeremo l’attributo name del tag forrm e del tag input, non è l’unico modo di farlo ma probabilmente è il più intuitivo.

La prima cosa da fare è inserire un form all’interno della pagina HTML:

<form name="myForm">
      <label>Campo input</label> 
      <input name="myField" type="text"> 
      <input type="button" value="Controlla" onclick="controlla()">
</form>


Mediante gli attributi name di abbiamo assegnato rispettivamente nome myForm al form e nome myField al campo di testo.
Questi saranno necessario per costruire il percorso necessario ad accedere al valrore da recuperare.
Inoltre abbiamo inserito un bottone che quando cliccato lancia l’esecuzione della funzione controlla()
Ora quindi dobbiamo definire la funzione controlla() tramite javascript.
Ci posizioniamo all’interno del tag head e aggiungiamo un tag script e al suo interno:

function controlla(){
	var myFieldVal = document.myForm.myField.value;
	alert("Il valore inserto nel campo è: "+myFieldVal);
}

Il cuore della funzione è la linea 2:

..
	var myFieldVal = document.myForm.myField.value;
	..
..

In pratica questa linea definisce una variabile myFieldVal e gli assegna come valore quello che si ottiene seguendo il “percorso”:

document (pagina) -> myForm (nome assegnato al form) -> myField (nome assegnato al campo di testo)
e selezionando il valore aggiungendo la voce value.

Ovviamente ogni percorso deve essere unico, quindi non possiamo assegnare lo stesso nome a due form o a due elementi contenuti nello stesso form, ne deve essere ambiguo, cioè non possiamo assegnare lo stesso nome ad un form o a un elemento.

Vai alla demo