Form calcolo totale

**WebAngler84** · 16-03-2008, 18:50

Ciao a tutti... vi spiego subito il mio problema... Ho un form che calcola in tempo reale un totale dato da più campi, questo il codice:

codice:

<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%" ><tr><td height="100%" valign="top" align="center">

<script Language="JavaScript" Type="text/javascript"><!--

function calcolatotale() {
var a = document.forms[0].componenti.options[document.forms[0].componenti.selectedIndex].text;
var b = parseFloat(document.getElementById('quotacomplessiva').value);
var c = parseFloat(document.getElementById('quotaindividuale').value);
var d = parseFloat(document.getElementById('quotafacoltativa').value);
var e = a * c;
var f = a * d;
if (document.forms[0].Itm_8_00_4_sub_1.checked == false)
{
var g = (Math.round(b*100) + Math.round(e*100)) / 100;
document.forms[0].totale.value= parseFloat(g).toFixed(2).replace('.','.');
}
else {
var h = (Math.round(b*100) + Math.round(e*100) + Math.round(f*100)) / 100;
document.forms[0].totale.value= parseFloat(h).toFixed(2).replace('.','.');
}
}

//--></script>


<form action="file.php" method="post" onchange="calcolatotale(this);" onclick="calcolatotale(this);" language="JavaScript" enctype="multipart/form-data">
<table align="center" width="560" cellpadding="0" cellspacing="4" border="0" style="font:8pt Century; color:#000080; ">
</tr>
<TR><TD>Numero di Componenti:
<SELECT NAME="componenti" onchange="calcolatotale();">
<OPTION>1</OPTION>
<OPTION>2</OPTION>
<OPTION>3</OPTION>
<OPTION>4</OPTION>
<OPTION>5</OPTION>
<OPTION>6</OPTION>
<OPTION>7</OPTION>
<OPTION>8</OPTION>
<OPTION>9</OPTION>
<OPTION>10</OPTION>
</SELECT>
</TD></TR>
<tr>
   <td>
<label for="Itm_26"><hr align="center" size="1" noshade>
Quota complessiva €<input type="text" name="quotacomplessiva" readonly value="10.00" style="color:#000000; border:1px solid; background-color:#FFFFFF; width: 50; font-style:normal; font-variant:normal; font-weight:normal; font-size:8pt; font-family:Century; text-align:right" size="20">
</td>
</tr>
<tr>
 <td>Quota individuale per ogni componente €
<input type="text" name="quotaindividuale" readonly value="3.00" style="color:#000000; border:1px solid; background-color:#FFFFFF; width: 50; font-style:normal; font-variant:normal; font-weight:normal; font-size:8pt; font-family:Century; text-align:right" size="20">
</td>
</tr>
<tr>
 <td>Quota facoltativa per ogni componente €
<input type="text" name="quotafacoltativa" readonly value="5.00" style="color:#000000; border:1px solid; background-color:#FFFFFF; width: 50; font-style:normal; font-variant:normal; font-weight:normal; font-size:8pt; font-family:Century; text-align:right" size="20">
<label for="Itm_8_00_4_sub_1">
	<input type="radio" name="Itm_8_00_4" id="Itm_8_00_4_sub_1" value="Si" checked/>Si
</label>
<label for="Itm_8_00_4_sub_2">
	<input type="radio" name="Itm_8_00_4" id="Itm_8_00_4_sub_2" value="No" />No
</label>
   </td>
</tr>
<tr>
   <td>
<center>

TOTALE €<INPUT NAME="totale" TYPE=text value="18.00" readonly size="20" style="text-align: right; width: 100; ">
</center>
   </td>
</tr>
</table>
<center><input type="submit" value="  Invia  " style="font:8pt Century; color:#000000; background-color:#C0C0C0; border: 1px solid"></center>
</form>
</td></tr></table>
</table>

In pratica con IE funziona tutto correttamente, mentre con Firefo no... dove sbaglio?! Qualcuno mi può dare qualche dritta? Grazie..

**Xinod** · 16-03-2008, 19:02

Originariamente inviato da WebAngler84
var b = parseFloat(document.getElementById('quotacomplessi va').value);
var c = parseFloat(document.getElementById('quotaindividua le').value);
var d = parseFloat(document.getElementById('quotafacoltati va').value);

per questi campi hai specificato un name, non un id
e quindi non puoi fare riferimento ad essi via document.getElementById

IE (ed opera si adegua per imitarlo) e' l' unico browser che considera name e id alla stessa stregua, da qui quello che hai scritto puo' funzionare con IE ma non in browser aderenti agli standard

ciao

**WebAngler84** · 17-03-2008, 01:27

Ciao Xinod, grazie per la risposta veloce ed efficace!

Infatti mi è bastato inserire un id con lo stesso nome per i campi in questione e funziona tutto alla perfezione anche su firefox

Ora però avrei un altro quesito sempre riguardo alla stesso form, ma non so se questa è la sezione giusta per discuterne, nel caso quindi perdonatemi.. In pratica se inserisco il codice in una pagina di un portale php-nuke (esattamente nel modulo content attraverso FCKeditor), non funziona cioè il campo totale rimane invariato a qualsiasi variazione degl' altri e viene riportato a fondo pagina il seguente errore

codice:

'document.forms.0.componenti.options' è nullo o non è un oggetto

come mai? Premetto che ho fatto la stessa cosa con altri form che contengono altri controlli sui campi e tutto funziona bene, ma con questo no...

**Xinod** · 17-03-2008, 02:21

continua in questa discussione

messa cosi' la cosa diventa molto specifica,
posta quanto generato (solo ed esclusivamente xhtml) e vediamo se a livello di output c'e' qualcosa di sbagliato

**WebAngler84** · 17-03-2008, 16:05

Ok, allora questo è il codice generato da fckeditor:

codice:

 <table height="100%" cellspacing="0" cellpadding="0" width="100%" border="0">
    <tbody>
        <tr>
            <td valign="top" align="center" height="100%"><script Language="JavaScript" Type="text/javascript"><!--

function calcolatotale() {

var a = document.forms[0].componenti.options[document.forms[0].componenti.selectedIndex].text;
var b = parseFloat(document.getElementById('quotacomplessiva').value);
var c = parseFloat(document.getElementById('quotaindividuale').value);
var d = parseFloat(document.getElementById('quotafacoltativa').value);
var e = a * c;
var f = a * d;
if (document.forms[0].Itm_8_00_4_sub_1.checked == false)
{
var g = (Math.round(b*100) + Math.round(e*100)) / 100;
document.forms[0].totale.value= parseFloat(g).toFixed(2).replace('.','.');
}
else {
var h = (Math.round(b*100) + Math.round(e*100) + Math.round(f*100)) / 100;
document.forms[0].totale.value= parseFloat(h).toFixed(2).replace('.','.');
}
}


//--></script>
            <form language="JavaScript" action="file.php" method="post" enctype="multipart/form-data" onclick="calcolatotale(this);" onchange="calcolatotale(this);">
                <table style="FONT: 8pt Century; COLOR: #000080" cellspacing="4" cellpadding="0" width="560" align="center" border="0">
                    <tbody>
                        <tr>
                            <td>Numero di Componenti: <select id="componenti" onchange="calcolatotale();" name="componenti">
                            <option selected="selected">1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                            <option>6</option>
                            <option>7</option>
                            <option>8</option>
                            <option>9</option>
                            <option>10</option>
                            </select> </td>
                        </tr>
                        <tr>
                            <td><label for="Itm_26"><hr align="center" noshade="noshade" size="1" />
                            Quota complessiva &euro; <input id="quotacomplessiva" style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; FONT-WEIGHT: normal; FONT-SIZE: 8pt; BORDER-LEFT: 1px solid; WIDTH: 50px; COLOR: #000000; BORDER-BOTTOM: 1px solid; FONT-STYLE: normal; FONT-FAMILY: Century; BACKGROUND-COLOR: #ffffff; TEXT-ALIGN: right; FONT-VARIANT: normal" readonly="readonly" name="quotacomplessiva" value="10.00" type="text" /> </label></td>
                        </tr>
                        <tr>
                            <td>Quota individuale per ogni componente &euro; <input id="quotaindividuale" style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; FONT-WEIGHT: normal; FONT-SIZE: 8pt; BORDER-LEFT: 1px solid; WIDTH: 50px; COLOR: #000000; BORDER-BOTTOM: 1px solid; FONT-STYLE: normal; FONT-FAMILY: Century; BACKGROUND-COLOR: #ffffff; TEXT-ALIGN: right; FONT-VARIANT: normal" readonly="readonly" name="quotaindividuale" value="3.00" type="text" /> </td>
                        </tr>
                        <tr>
                            <td>Quota facoltativa per ogni componente &euro; <input id="quotafacoltativa" style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; FONT-WEIGHT: normal; FONT-SIZE: 8pt; BORDER-LEFT: 1px solid; WIDTH: 50px; COLOR: #000000; BORDER-BOTTOM: 1px solid; FONT-STYLE: normal; FONT-FAMILY: Century; BACKGROUND-COLOR: #ffffff; TEXT-ALIGN: right; FONT-VARIANT: normal" readonly="readonly" name="quotafacoltativa" value="5.00" type="text" /> <label for="Itm_8_00_4_sub_1"><input id="Itm_8_00_4_sub_1" type="radio" checked="checked" name="Itm_8_00_4" value="Si" />Si </label><label for="Itm_8_00_4_sub_2"><input id="Itm_8_00_4_sub_2" type="radio" name="Itm_8_00_4" value="No" />No </label></td>
                        </tr>
                        <tr>
                            <td><center>TOTALE &euro; <input id="totale" style="WIDTH: 100px; TEXT-ALIGN: right" readonly="readonly" name="totale" value="18.00" type="text" /> </center></td>
                        </tr>
                    </tbody>
                </table>
                <center><input style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; FONT: 8pt Century; BORDER-LEFT: 1px solid; COLOR: #000000; BORDER-BOTTOM: 1px solid; BACKGROUND-COLOR: #c0c0c0" type="submit" value="  Invia  " /></center>
            </form>
            </td>
        </tr>
    </tbody>
</table>

**Xinod** · 17-03-2008, 16:22

se copio e incollo quanto hai postato nel body di una pagina vuota mi sembra funzionare,
tu hai provato a fare lo stesso?
se e' cosi' il problema non e' imputabile a javascript

**Xinod** · 17-03-2008, 16:29

aspetta, questa roba non va nel tag <form>
onclick="calcolatotale(this);" onchange="calcolatotale(this);"

gli unici campi che richiamano calcolatotale sono la select (che ha gia' l' onchange corretto) e i radio, a cui puoi aggiungere onclick="calcolatotale();"

**Xinod** · 17-03-2008, 16:36

il problema potrebbe essere che nell' assemblare la pagina, php aggiunga prima di questo form altri form,
cosi' questo form non sarebbe piu' document.forms[0]

aggira completamente il problema

<select ... onchange="calcolatotale(this);">
<input type="radio" ... onchange="calcolatotale(this);" />

function calcolatotale(campo) {
var ilForm = campo.form
var a = ilForm.componenti.options[ilForm.componenti.selectedIndex].text;
var b = parseFloat(document.getElementById('quotacomplessi va').value);
var c = parseFloat(document.getElementById('quotaindividua le').value);
var d = parseFloat(document.getElementById('quotafacoltati va').value);
var e = a * c;
var f = a * d;
if (ilForm.Itm_8_00_4_sub_1.checked == false)
{
var g = (Math.round(b*100) + Math.round(e*100)) / 100;
ilForm.totale.value= parseFloat(g).toFixed(2).replace('.','.');
}
else {
var h = (Math.round(b*100) + Math.round(e*100) + Math.round(f*100)) / 100;
ilForm.totale.value= parseFloat(h).toFixed(2).replace('.','.');
}
}

ciao

**WebAngler84** · 17-03-2008, 17:41

Xinod sei davvero un grande!!!

E' proprio come dici tu, che nell' assemblare la pagina php aggiunge quasi sicuramente altri forms..

in ogni caso non avevo provato ad inserirlo nel body di una pagina vuota.. Ti ringrazio nuovamente per il supporto eccellente che mi hai fornito, davvero unico!Ciao

Discussione: Form calcolo totale

Strumenti discussione

Ricerca discussione

Visualizza

Form calcolo totale

Re: Form calcolo totale

Permessi di invio