JavaScript è un linguaggio di scripting lato client che consente di reagire in tempo reale all'input dell'utente. Ad esempio, è possibile creare un modulo HTML che si aggiorna automaticamente un campo totale quando un utente modifica le singole voci del form. Per effettuare questa operazione, è necessario assegnare un nome a ogni elemento del form, scrivere una funzione che aggiorna il totale e chiamare la funzione ogni volta che uno degli elementi cambia.

Istruzioni

1

Creare un nuovo documento HTML utilizzando blocco note o un editor HTML. Inserire le intestazioni HTML nel documento:

<! DOCTYPE HTML >

< html lang = "it" >

< head >

< meta charset = "utf-8" >

< title > modulo d'ordine < / title >

2

Creare uno stile per il modulo di input che verrà creato:

< style >

.orderForm {width: 250px; display: block;}

.Item {width: 100px; float: left; margin-left: 10px; text-align: destra}

.input {width: 50px; margin-left: 10px; text-align: sinistra}

totale {Larghezza: 20px; margin-left: 10px; font-weight: bold;}

< / stile >

3

Creare una funzione JavaScript per accedere a ogni elemento del form di input e calcolare e visualizzare un totale:

< script >

Function total() () {

var total = (parseInt(document.order.apples.value) || 0)*1.05 + (parseInt(document.order.oranges.value) || 0)*1.10 + (parseInt(document.order.pears.value) || 0)*0.88;

document.getElementById("total").innerHTML = total;

}

< / script >

< / head >

4

Creare il form di input HTML. Assegnare il nome utilizzato nella funzione JavaScript per ogni singolo elemento. Impostare l'evento "onchange" per ogni elemento di input calcolare e visualizzare il totale quando viene modificato un elemento:

< corpo >

< div class = "modulo d'ordine" >

< nome modulo = "ordine" di action="process.php" metodo = "post" >

< span class = "item" > mele: 1,05 < / span >< tipo input = "testo" class = "input" nome = "mele" onchange="total()" >

< span class = "item" > arance: 1.10 < / span >< tipo input = "testo" class = "input" nome = "oranges" onchange="total()" >

< span class = "item" > Pere: 0.88 < / span >< tipo input = "testo" class = "input" nome = "Pere" onchange="total()" >

< span class = "item" > totale: < / span >< span class = "totale" id = "totale" >< / span >

< / form >

< / div >

< / body >

< / html >

5

Salvare il file HTML e aprirlo in un browser. Verificare che il calcolo funzioni correttamente.