copia e incolla il seguente esempio
codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style type="text/css">
#trad label { display : block; }
</style>
<script type="text/javascript">
// <![CDATA[
function gestioneOrdine() {
var $id = function(id) {
return (document.getElementById)? document.getElementById(id) : document.all[id];
};
var _tr = $id('traduzioni'); // campo numero traduzioni
var _cu = $id('prezzounitario'); // campo costo unitario
var _ca = $id('canone'); // campo canone
var _pt = $id('prezzototale'); // campo prezzo totale
/* funzione di get/set sul campo */
var _setValue = function(c, v, f) { c.value = v.toFixed(f); }
var _getValue = function(c) { return (parseFloat(c.value) || 0); }
var _incValue = function(c) { c.value = _getValue(c) + 1; }
/* aggiornamento del prezzo */
var aggiornaPrezzo = function() {
var tr = _getValue(_tr);
var cu = _getValue(_cu);
var ca = _getValue(_ca);
_setValue(_pt, ((tr * cu) + ca), 2);
};
/* aggiornamento del numero delle traduzioni */
var aggiornaTraduzioni = function() {
_setValue(_tr, 0, 0);
var len = _lt.length;
while (len--) { if (!!_lt[len].checked) _incValue(_tr); };
aggiornaPrezzo();
};
/* setta l'evento onchange sulle checkbox */
var _lt = null;
(function() {
_lt = $id('trad').getElementsByTagName('input');
var len = _lt.length;
while (len--) { _lt[len].onchange = _lt[len].onclick = function(l) {
return function() { aggiornaTraduzioni(); }
}(len); }
})();
};
window.onload = gestioneOrdine; /* chiamata alla funzione */
// ]]>
</script>
</head>
<body>
<form method="post" action="">
<fieldset id="trad">
<label>Italiano <input type="checkbox" name="lingua['italiano']" /></label>
<label>Spagnolo <input type="checkbox" name="lingua['spagnolo']" /></label>
<label>Olandese <input type="checkbox" name="lingua['olandese']" /></label>
<label>Francese <input type="checkbox" name="lingua['francese']" /></label>
</fieldset>
<fieldset id="subtotale">
<label for="">Traduzioni</label>
<input name="traduzioni" id="traduzioni" type="text" readonly="readonly" />
<label for="prezzounitario">Costo Singola Traduzione</label>
<input name="prezzounitario" id="prezzounitario" type="text" value="50.00" readonly="readonly" />
<label for="canone">Canone</label>
<input name="canone" id="canone" type="text" value="34.00" readonly="readonly" />
</fieldset>
<fieldset id="totale">
<label for="">Totale</label>
<input name="prezzototale" id="prezzototale" type="text" readonly="readonly" />
</fieldset>
</form>
</body>
</html>
alcune note:
1) ho tolto id, name e value non necessari dalle checkbox (l'incremento/decremento è sempre pari ad uno), così il codice è più semplice
2) L'evento sulle checkbox va impostato dinamicamente e non inline. Il codice html è così più pulito e manutenibile
3) le checkbox vanno gestite anche sull'evento onchange (onclick è troppo orientato ad un singolo device [mouse]) in modo da funzionare usando anche la sola tastiera o altro dispositivo
4) Io ho associato la funzione di gestione dell'ordine all'evento window.onload. Se scatta troppo tardi (es. hai immagini o script troppo pesanti) cerca di usare un evento DOMLoad o simile (cerca nel forum)
5) ho messo i vari subtotali in readonly in modo che l'utente non possa modificarli, ripristinali a piacere
Ciao
Permessi di invio
Rispondi quotando