Categorie
Javascript Programmazione

{JS} DOM API: manipolazione dei form delle pagine web

Cos’è un form?

In una pagina o applicativo web l’utente ha due possibilità di interagire con essa:

  • mediante azioni/eventi sugli elementi della pagina stessa
  • mediante l’immissione di dati in campi di input

Un form è un componente di una pagina Web che tramite elementi speciali detti controlli consente all’utente di inserire dati.
 I controlli sono l’insieme degli elementi che consentono l’immissione di dati cose caselle di testo, checkbox, radio button, pulsanti e simili ed in generale campi di input.
I dati inseriti possono essere inviati al server, per la loro elaborazione o memorizzazione, o elaborati direttamente sul client (tramite JavaScript).

document.forms

Durante la generazione del DOM viene popolato un array contenente l’elenco degli oggetti che rappresentano i form presenti nella pagina. Questo array è accessibile tramite la proprietà forms dell’oggetto document.

var allFormsPage = document.forms;

Trattandosi di un array possiamo utilizzare proprietà e metodi riservati a questo tipo di dato:

document.forms.lenght;
//numero di forms presenti sulla pagina
document.forms[0];
//selezione del primo form presente nell'array/pagina

Sono aggiunte ulteriori proprietà per la gestione dei form che analizzaremo più avanti:

.forms
.forms.lenght
.forms mostra array di tutti forms presenti sulla pagina; forms.lenght mosta il numero degli elementi forms presenti.
.forms.id
.forms.name
.id e .name recupera rapidamente gli elementi form con id e name specificati.
.value
recupera il valore del campo input
.optionsmostra array di tutte le opzioni disponibili in selezioni multiple
.selected.selected verifica che un opzione sia selezionata
.selectedIndeximposta valore preselezionato per campi menu-a-discesa es .selectedIndex = 2
.checkedimposta valore preselezionato per i campi radio-button es .checked = true;

Navigare tra i forms

L’approccio più corretto è quello di assegnare al form un identificatore tramite l’attributo id oppure un nome tramite l’attributo name in modo da poterlo richiamare facilmente

<form id="primoForm">
...</form>
<form name="secondoForm">
...</form>
//pseudo-codice document.forms.id
document.forms.primoForm;
//oppure
//pseudo-codice document.forms.name
document.forms.secondoForm;

Come per gli altri elementi del DOM possiamo accedere rapidamente ad un elemento tramite .id;
Allo stesso modo assegnado l’attributo name al form aggiungiamo di fatto una proprietà all’array forms con lo stesso nome del valore.

Accedere ai controlli

Come per il macro-tag <form> è opportuno indicare un attributo id e/o name anche per i campo di input vale lo stesso.
Questi attributi ci sono estremamente utili qualora necessitassimo di inviare i valori dei campi input in elaborazione/memorizzazione sul server.
Sfrutteremo questi tag, come accadeva per i forms totali di un pagina, per navigare i controlli che compongono un form:

<form name="primoForm">
<label>Nome: </label>   
<input type="text" name="txtNome"/>
<label>Cognome: </label>
<input type="text" name="txtCognome"/>
</form>
var mioForm = document.forms.primoForm;
var campoNome = mioForm.textNome;
var campoCognome = mioForm.textCognome;
//oppure 
var campoNome = document.forms.primoForm.textNome;
...

Accedere ai valori

Tutti i campi di input devono e possono avere determinati attributi:

  • type: indica il tipo di campo di input che si vuole aggiugere di default se omesso è un campo di testo (es. text, radio , checkbox ecc.)
  • name: fornisce un identificativo al campo
  • placeholder:  segnaposto che consente di riempire lo spazio destinato ad un contenuto non ancora definito (opzionale)
  • value: è l’attributo che conterrà il valore immesso e può contenere un valore iniziale (solitamente lasciato vuoto)

Ci concentreremo sull’attributo “value” che identifica il valore che sarà immesso dall’utente e che ci consentire di recuperare tale dato attraverso la proprietà .value

document.forms.primoforms.txtNome.value;
document.forms.primoforms.txtCognome.value;

Dei casi un pò particolari sono rappresentati da quei campi input che presentano più opzioni di selezione consentendo selezioni singole e selezioni multiple.

Più opzioni con selezione singola

Menu a discesca
<form name="secondoForm">
<p>Seleziona il tuo colore preferito tra quelli disponbili:</p>
<select name="colorePreferito">
	<option value="Rosso">Rosso</option>
	<option value="Giallo">Giallo</option>
	<option value="Verde">Verde</option>
	<option value="Blue">Blue</option>
</select>
<p id="messaggio">In attesa della selezione..</p>
</form>

<script>
document.forms.secondoForm.colorePreferito.oninput=function(){
var notifica = document.getElementById('messaggio');
notifica.innerHTML=`Hai selezionato il colore: ${document.forms.secondoForm.colorePreferito.value}`;
}
</script>

In questo caso è necessario valorizzare, obbligatoriamente, tutti gli attributi value dei campi opzione affinchè sia possibile recuperare il relativo valore selezionato.

document.forms.secondoForm.colorePreferito.value;

Seleziona il tuo colore preferito tra quelli disponbili:

In attesa della selezione..

Note: In questo esempio al fine di rendere dinamico il messaggio di selezione-effettuata è stato utilizzato l'evento "input" evento riservato ai campi-di-input.
.selectedIndex

La proprietà “.selectedIndex” consente di impostare un opzione preselezionata

document.forms.secondoForm.colorePreferito.selectedIndex = 1;
//Giallo preselezionato
Radio buttons

Gli elementi radio button consentono si la selezione di un unico valore ma sono suddivisi in più elementi di input; questi però sono associati dallo stesso attributo “name”; anche in questo caso per accedere al valore selezionata è necessario valorizzare il valore dell’attributo “value”.

<form name="terzoForm">
<p>Seleziona il tuo sesso:</p>
<label><input type="radio" name="sesso" value="Uomo">Uomo</label>
<label><input type="radio" name="sesso" value="Donna">Donna</label>
</form>
.checked

La proprietà “.checked” ci consente di impostare un input come valore predefinito.

var radioForm = document.forms.terzoForm;
radioForm.sesso[0].checked = true;

Seleziona il tuo sesso:

Più opzioni con selezione multipla

Per attivare una selezione multipla è necessario includere l’attributo multiple=”multiple” al tag <select>.

<form name="quartoForm">
<p>Seleziona le province di tuo interesse</p>
<select name="selezionaProvincie" multiple="multiple">
	<option value="RM">Roma</option>
	<option value="NA">Napoli</option>
	<option value="TO">Torino</option>
	<option value="MI">Milano</option>
</select>
<p id="notificaProvincie">In attesa delle selezioni..</p>
</form>

Seleziona le province di tuo interesse

In attesa delle selezioni..

.options & .selected

Per comportamento predefinito la proprietà "value" restituisce sempre e solo il primo valore selezionato.

Per ovviare a questo e per ottenere l'elenco delle opzioni selezionate dall'utente ci vengono in soccorso ulteriori proprietà degli elementi form:

  • .options: mostra tutti i tag <option> presenti nel tag <select> con multi selezione
  • .selected: che verifica che le varie opzioni siano selezionate

Per sfruttarle al fine di memorizzare le selezioni effettuate dell'utente dovremo effettuare un ciclo che inserisce i valori selezionati all'interno di un array.

document.forms.quartoForm.oninput=function(){
var notificaProvincie = document.getElementById('notificaProvincie');

var opzioni = document.forms.quartoForm.selezionaProvincie.options;
var opzioniSelezionate = [];
for (i = 0; i<opzioni.length; i++) {
	if (opzioni[i].selected){
 opzioniSelezionate.push(opzioni [i].value);
}


notificaProvincie.innerHTML=`L'utente ha selezionato ${opzioniSelezionate.join()}`;
}
}

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *