Calcolare totale tra 2 variabili in un form

**cavicchiandrea** · 26-02-2008, 01:19

Questo fa quanto richiesto:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Pagina senza titolo</title> 
<script language="JavaScript" type="text/javascript"> 
function Calcolatotale(Biglietti,Prezzo){
if(Biglietti !=0){
var Totale = Biglietti * Prezzo
document.getElementById("totale").value = parseFloat(Totale).toFixed(2).replace('.',',')
document.getElementById("TestoTotale").innerHTML=parseFloat(Totale).toFixed(2).replace('.',',')
/*Commento Se non si vuole sostituire il punto con la virgola togliere il .replace('.',',')
Se non si vuole fissare 2 decimali togliere .toFixed(2)*/
}else{
document.getElementById("totale").value = 0
document.getElementById("TestoTotale").innerHTML = 0
}}
</script>   
</head>
<body>
<form action="" method="post">
<table width="200" cellspacing="1" cellpadding="1">
  <tr>
    <td width="93">Prezzo</td>
    <td width="98" id="Prezzo"><? echo "$array[prezzo]";?></td>
  </tr>
  <tr>
    <td>Biglietti</td>
    <td><select name="biglietti" id="biglietti" onchange="Calcolatotale(this.options[this.selectedIndex].value,<? echo "$array[prezzo]";?>)">
      <option value="0">Seleziona</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
        </select></td>
  </tr>
  <tr>
    <td height="23">Totale
      <input type="hidden" name="totale" id="totale" /></td>
    <td id="TestoTotale"></td>
  </tr>
</table>

</form>
</body>
</html>

Ho preferito usare il DOM

**imoby** · 26-02-2008, 21:01

Originariamente inviato da cavicchiandrea
Ho preferito usare il DOM

Ciao, grazie per il modulo ma purtroppo non sono riuscito a farlo funzionare un granchè bene...

Mi pare di aver capito che comunque la stringa per i decimali risieda in ".toFixed(2).replace('.',',')"
ma probabilmente mi sbaglio...

Dov'è che dovrei aggiungerla nel mio codice?

<SCRIPT language="JavaScript">

function calcolatotale() {

var a = document.forms[0].numero.options[document.forms[0].numero.selectedIndex].text.;
var b = document.forms[0].costo.value.;
var c = a * b;

document.forms[0].IMPORTO.value=c;

}

function cancella() {

document.forms[0].IMPORTO.value=0;
document.forms[0].numero.selectedIndex=0;

}

</SCRIPT>

**cavicchiandrea** · 26-02-2008, 21:12

:master:
document.forms[0].IMPORTO.value= parseFloat(c).toFixed(2).replace('.',',')

**imoby** · 27-02-2008, 13:58

Originariamente inviato da cavicchiandrea
:master:
document.forms[0].IMPORTO.value= parseFloat(c).toFixed(2).replace('.',',')

<SCRIPT language="JavaScript">

function calcolatotale() {

var a = document.forms[0].numero.options[document.forms[0].numero.selectedIndex].text;
var b = document.forms[0].costo.value;
var c = a * b;

document.forms[0].IMPORTO.value=c;

}

function cancella() {

document.forms[0].IMPORTO.value= parseFloat(c).toFixed(2).replace('.',',');
document.forms[0].numero.selectedIndex=0;

}

</SCRIPT>
<form action="process.php" method="post" name="form1" id="form1">
<table border="1" cellpadding="1" cellspacing="0" bordercolor="#CCCCCC">
<tr>
<td nowrap="nowrap"><table height="7" border="1" align="center" cellpadding="5" cellspacing="1" bgcolor="#ccccff">
<tbody>
<tr>
<td width="150" height="20"><font color="#000080" size="1" face="Verdana" class="titoli">Tour</font></td>
<td width="150" height="20"><font color="#000080" size="1" face="Verdana" class="titoli">Quantity</font></td>
<td width="170" height="20"><font color="#000080" size="1" face="Verdana" class="titoli">Prezzo Euro</font></td>
<td width="170" height="20"><font color="#000080" size="1" face="Verdana" class="titoli">Total Price</font></td>
</tr>
<tr>
<td width="150" height="4" bgcolor="#e0e0e0"><font color="#000080" size="1" face="Verdana" class="offerta">Pisa & Lucca Tour</font></td>
<td width="150" height="4" bgcolor="#e0e0e0"> <select name="numero" onchange="calcolatotale();">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select> </td>
<td width="170" height="4" bgcolor="#e0e0e0"><font color="#000080" size="1" face="Verdana">
<input name="costo" type=text value="75" readonly />
<span class="titoli">€</span></font></td>
<td width="170" height="4" bgcolor="#e0e0e0"><font color="#000080"><font face="Verdana"><font size="1"></font></font></font><font color="#000080" size="1" face="Verdana">
<input name="IMPORTO" type=text value="75,00" readonly id="IMPORTO" />
<span class="titoli"> €</span></font></td>
</tr>
</tbody>
</table> </td>
</tr>
<tr>
<td nowrap="nowrap"></td>
</tr>
</table>
</form>

Ho sostituito la stringa con la tua, ma continua a darmi come totale un numero intero, privo dei due decimali.

Se invece come costo del biglietto invece di 75 gli dò ad esempio 75,00 mi dà come risultato "NaN"...

Dove sbaglio!?

**marckhh** · 27-02-2008, 14:04

Imoby sai come ho risolto il problema?

Prima di tutto impostando il campo prezzo in database come decimal. Poi quando effettuo il controllo sui dati passati dal form, uso il seguente codice:

$prezzo = str_replace(",", ".",$_POST["prezzo"]);

In questo modo anche se un utente inserisce la virgola viene trasformato in punto.

Se poi applichi il primo script javascritp, quello che ho postato io, vedrai che il totale ti vienve fuori col punto, tenendo tutti i decimali dopo la virgola.

**imoby** · 27-02-2008, 15:40

Originariamente inviato da cavicchiandrea
:master:
document.forms[0].IMPORTO.value= parseFloat(c).toFixed(2).replace('.',',')

Chiedo scusa per la confusione creata, era giustissima questa stringa, avevo sbagliato io nel copiarla nella riga di codice sbagliata!

Se può interessare ancora a qualcuno, ecco ora come appare il mio javascript, che dà come risultato della moltiplicazione tra il prezzo e la quantità di ordini, un numero seguito da due decimali:

<SCRIPT language="JavaScript">

function calcolatotale() {

var a = document.forms[0].numero.options[document.forms[0].numero.selectedIndex].text;
var b = document.forms[0].costo.value;
var c = a * b;

document.forms[0].IMPORTO.value= parseFloat(c).toFixed(2).replace('.',',');

}

function cancella() {

document.forms[0].IMPORTO.value=0;
document.forms[0].numero.selectedIndex=0;

}

</SCRIPT>

Vi ringrazio ancora tantissimo per l'aiuto che mi avete dato, alla prossima ragazzi!!!

**eccoinsorgo** · 18-09-2011, 12:33

Originariamente inviato da imoby
Chiedo scusa per la confusione creata, era giustissima questa stringa, avevo sbagliato io nel copiarla nella riga di codice sbagliata!

Se può interessare ancora a qualcuno, ecco ora come appare il mio javascript, che dà come risultato della moltiplicazione tra il prezzo e la quantità di ordini, un numero seguito da due decimali:

<SCRIPT language="JavaScript">

function calcolatotale() {

var a = document.forms[0].numero.options[document.forms[0].numero.selectedIndex].text;
var b = document.forms[0].costo.value;
var c = a * b;

document.forms[0].IMPORTO.value= parseFloat(c).toFixed(2).replace('.',',');

}

function cancella() {

document.forms[0].IMPORTO.value=0;
document.forms[0].numero.selectedIndex=0;

}

</SCRIPT>

Vi ringrazio ancora tantissimo per l'aiuto che mi avete dato, alla prossima ragazzi!!!

Grazie per questo script, era proprio ciò che cercavo, solo che vorrei ancora chiedere qualcosina.....
vorrei farlo funzionare più volte in una pagina, inserendo il form in più righe di una tabella, solo che la funzione viene eseguita correttamente solo in uno dei form inseriti, negli altri form delle altre righe la moltiplicazione non viene eseguita.
E' possibile fare ciòe chiedo (sempre sperando di essermi fatto capire)?
Dov'è che sbaglio?
Mi aiutate?

Grazie

**eccoinsorgo** · 18-09-2011, 12:51

Originariamente inviato da marckhh
Imoby sai come ho risolto il problema?

Prima di tutto impostando il campo prezzo in database come decimal. Poi quando effettuo il controllo sui dati passati dal form, uso il seguente codice:

$prezzo = str_replace(",", ".",$_POST["prezzo"]);

In questo modo anche se un utente inserisce la virgola viene trasformato in punto.

Se poi applichi il primo script javascritp, quello che ho postato io, vedrai che il totale ti vienve fuori col punto, tenendo tutti i decimali dopo la virgola.

Grazie per questo script, era proprio ciò che cercavo, solo che vorrei ancora chiedere qualcosina.....
vorrei farlo funzionare più volte in una pagina, inserendo il form in più righe di una tabella, solo che la funzione viene eseguita correttamente solo in uno dei form inseriti, negli altri form delle altre righe la moltiplicazione non viene eseguita.
E' possibile fare ciòe chiedo (sempre sperando di essermi fatto capire)?
Dov'è che sbaglio?
Mi aiutate?
Grazie

**lucavizzi** · 18-09-2011, 18:50

Originariamente inviato da marckhh
Allora,
ho provato lo script ed è tutto piuttosto chiaro, almeno nel funzionamento. Correi però alcune delucidazioni. Qual'è il significato dello zero in questa funzione?

var a = document.forms[0].numero.options[document.forms[0].numero.selectedIndex].text;

Intendo lo zero tra parentesi quadre. Poi suppongo che il selected index sia rivolto al campo select del form giusto?

altra cosa, sarebbe possibile, nel totale, invece che creare un pulsante che lo calcola, fare in modo che esca automaticamente senza essere costretti a clikkare su un bottone?

Grazie mille

Lo zero sta a indicare il primo form del documento.
in pratica se tu assegni ad una variabile document.forms:
var a=document.forms;
la variabile "a" conterrà un array con tutti i form del documento, quindi:
a[0] conterrà il primo form (dall'alto verso il basso)
a[1] il secondo, e così via.
var a = document.forms[0] è una forma contratta per indicare il primo form.

Riguardo il selected index, la tua supposizione è giusta.
La riga di codice indicata:
document.forms[0].numero.options[document.forms[0].numero.selectedIndex].text;
ti restituisce il "testo" all'interno del tag option della select "numero" del primo form.

sarebbe forse più corretto scrivere la select in questa maniera:
<option value="1">1</option>
<option value="2">2</option>
invece di
<option>1</option>
<option>2</option>
In primo luogo perchè, se invii il form ad una pagina, ad esempio php, il valore della select "numero" sarà sempre nullo, indipendentemente dal numero selezionato, perchè per le option non è indicato nessun value.
in secondo luogo perchè è anche più semplice ricavare il valore selezionato:
document.forms[0].numero.options[document.forms[0].numero.selectedIndex].text;
diventerebbe
document.forms[0].numero.value;

Hope it helps

**cavicchiandrea** · 18-09-2011, 19:09

Originariamente inviato da lucavizzi
... in secondo luogo perchè è anche più semplice ricavare il valore selezionato:
document.forms[0].numero.options[document.forms[0].numero.selectedIndex].text;
diventerebbe
document.forms[0].numero.value;
....

Questo non è esatto, la sintassi corretta compatibile con tutti i browser è questa:
document.forms[0].numero.options[document.forms[0].numero.selectedIndex] a prescindere che sia .value o .text le forme contratte come questa document.forms[0].numero.value; non garantiscono la piena compatibilità con tutti i browser.

Discussione: Calcolare totale tra 2 variabili in un form

Strumenti discussione

Ricerca discussione

Visualizza

Permessi di invio