Corsi on-line

Contare gli elementi di un form con JavaScript

Nel semplice esempio presentato in questo articolo mostreremo come sia possibile affidare a poche righe di JavaScript il conteggio degli elementi presenti all’interno di un form HTML per l’invio dei dati da una pagina Web; nello specifico creeremo un modulo composto da 9 elementi compreso il pulsante per l’invio dei parametri inseriti all’interno dei capi di input.javascriptIl nostro form sarà composto da 4 campi di testo, una textarea, una checkbox e due radiobutton, più il già citato pulsante per il submit; per comodità del lettore presenteremo un modulo contenente dei campi già compilati tramite alcuni valori valori di default. Ecco il codice completo della pagina compreso lo script JavaScript per il conteggio:

<!DOCTYPE html>
<html>
<body>

<form id="dati_anagrafici" action="nome_file.php">
Nome: <input type="text" name="nome" value="Homer"><br />
Cognome: <input type="text" name="cognome" value="Simpson"><br />
Sesso:   <input type="radio" name="genere" value="maschio"> M
<input type="radio" name="genere" value="femmina"> F<br />
Indirizzo: <input type="text" name="indirizzo" value="742 Evergreen Terrace"><br />
Città: <input type="text" name="cta" value="Springfield"><br />
Messaggio: <textarea name="msg">Blah! Blah! Blah!</textarea><br />
<input type="checkbox" name="privacy" value="y"/> Acconsento al trattamento dei dati <br />
<input type="submit" value="Invia">
</form>

<p>Clicca per contare gli elementi del form:</p>

<button onclick="elmCount()">Conta</button>

<p id="conteggio"></p>

<script>
function elmCount() {
var cnt = document.getElementById("dati_anagrafici").length;
document.getElementById("conteggio").innerHTML = cnt;
}
</script>

</body>
</html>

Il conteggio avviene attraverso la creazione di una piccola funzione definita dall’utente, chiamata elmCount():

function elmCount() {
var cnt = document.getElementById("dati_anagrafici").length;
document.getElementById("conteggio").innerHTML = cnt;
}

Essa svolge sostanzialmente due compiti: conteggiare il numero degli elementi del form tramite la proprietà length il cui risultato viene passato come valore ad una variabile denominata cnt, e passare quest’ultima alla proprietà innerHTML per la visualizzazione dell’output all’interno del paragrafo associato all’identificatore “conteggio“, utilizzato come argomento dal metodo getElementById().

Si ricordi di assegnare un nome al form, nel nostro caso “dati_anagrafici”, questo perché tale dato deve essere impiegato come argomento del metodo getElementById() al momento della valorizzazione della variabile.

Come sarà possibile osservare effettuando delle semplici prove, il conteggio avverrà indipendentemente dal fatto che i campi siano stati compilati o meno dall’utilizzatore, di conseguenza non sarà necessario renderli obbligatori ai fini del conteggio.

Post correlati
I più letti del mese
Tematiche