Sabato, 03 Novembre 2018 15:40

Esempio 03 - Interazione con form e innerHTML

Scritto da

Un esempio che fa interagire una funzione JavaScript con una form. Decisamente uno degli usi principali per cui è nato questo linguaggio.

Qui vediamo l'uso del DOM per reperire i valori della form o il potente getElementById e del innerHTML per scrivere tra tag HTML.

Lo script HTML è molto semplice, proprio per concentrarci sull'essenziale:

<!DOCTYPE html>
<html lang="it">
<head>
<title>Esempio</title>
<script src="/js/script.js"></script>
<meta charset="UTF-8">
</head>
<body>

<form name="formbottone">
<label for="nome">Nome:</label><br>
<input type="text" name="nome" id="nome">
<br>
<label for="cognome">Cognome:</label><br>
<input type="text" name="cognome" id="cognome"><br>
<label for="eta">Età:</label><br>
<input type="number" name="eta" id="eta"><br>
<br><br>
<input type="button" value="Cliccami" onclick="miaFunzione()">
</form>

<br><br>
<div id="messaggio"></div>

</body>
</html>

Vediamo una semplice form con due campi input di tipo testo ed uno numerico. Fondamentali per il nostro esercizio è l'inserimento degli id e dei name all'interno di ciascun input. E' buona pratica inserire sempre id e name. Mentre il name ci servirà molto più avanti quando studieremo il PHP e i linguaggi lato server, elemento fondamentale di interazione con JS sono id.

Per lanciare il nostro script JS abbiamo il bottone Cliccami che è corredato dall'evento onclick. L'idea è quella di fare un semplice controllo sull'età e mostrare una banale finestra con un messaggio col nome e cognome inseriti. Come prassi solita, il codice JS preferiamo suddividerlo dal codice html vero e proprio e relegarlo in separati file nelle cartelle dedicate, avendo cura di includerlo nell'header della pagina html. Vediamo il codice JS.

/* Esempio di funzione javascript */
function miaFunzione()
{
	var nomedaprelevare = document.formbottone.nome.value;
	var cognomedaprelevare = document.getElementById("cognome").value;
	
	alert("Benvenuto " + nomedaprelevare + " " + cognomedaprelevare);
	
	var etadaprelevare = document.getElementsByName("eta");
	valoreEta= parseInt(etadaprelevare[0].value);
	
	if (valoreEta >= 18)
		document.getElementById("messaggio").innerHTML = "Sei maggiorenne";
}

Come si vede, possiamo reperire il valore inserito in un campo o specificando tutto il percorso DOM, document, nome della form, nome del campo oppure andare direttamente a prelevare il valore del campo conoscendo il suo id. Questo secondo modo è decisamente più vantaggioso e richiede meno manutenzione nel momento in cui la struttura DOM dovesse cambiare. Il terzo metodo è quello di usare la funzione getElementbyName. Questa è un po' più articolata da usare perché parte da un presupposto semplice ma che dobbiamo tenere a mente: un valore del campo name può essere ripetuto molte volte all'interno della pagina ovvero ci potrebbero essere più campi eta, mentre l'id si può usare solo una unica volta per identificare un tag html. In questo caso l'esempio non lascia molti dubbi, anzi abbiamo semplificato usando lo stesso valore per gli attributi name ed id. Ecco però il motivo per cui il getelementbyid ritorna un valore secco mentre il getelementbyname ritorna un vettore di possibili valori a cui dobbiamo accedere con la relativa modalita [posizione].

L'ultima considerazione è come modifica un valore di un tag html esistente come il div o lo span che si apre e chiude con in mezzo un testo modificabile in corsa con la funzione innerHtml.

 

Letto 336 volte
Prof. Alfredo Centinaro

Docente di "Scienze e tecnologie informatiche", "Tecnologie e progettazione di sistemi informatici", "Sistemi e Reti" presso IIS Alessandrini-Marino (Teramo), consulente e sviluppatore web. Ha collaborato per anni come sviluppatore presso MHT (ora Engineering 365), assistente Sistemi ed elaborazione dell'informazione in UniTE Corso di laurea in Scienze del turismo culturale, tutor presso Telecom Italia Learning Services (L'Aquila)

Joomla SEF URLs by Artio