Sommare valori da più Selezioni in un Form

**AnnaWeb** · 05-08-2012, 16:28

Ciao a tutti, ho questo codice di un form da cui è possibile selezionare dei prodotti da un menu a tendina e avere la somma in base alla quantità scelta.

Ma funziona solo per un menu!!! Se cambio menu, il precedente calcolo viene sovrascritto!
Dove sbaglio!??! GRAZIE!!!! ANNAWEB

Questo è il piccolo esempio:

<!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>

<script language=Javascript>
function calcola(mod,qt) {
var m = parseFloat(mod.options[mod.selectedIndex].value.split("|")[1])
var q = parseInt(qt.options[qt.selectedIndex].value)
var valuta = "€ ";
var operazione = (m*q);
var zeri = ",00";
var somma = valuta+operazione+zeri;
document.getElementById('prezzo').innerHTML=somma;
document.getElementById('price').value=operazione;
}
</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<form>

Pasta
<select name="tipo" id="tipo" onChange="if(this.options.selectedIndex!=0 && document.getElementById('quantita').options.select edIndex!=0){calcola(this, document.getElementById('quantita'))}">
<option value="seleziona">Scegli il tipo</option>
<option value="Spaghetti|1.2">Spaghetti (€1,20/Kg)</option>
<option value="Linguine|1.3">Linguine (€1,30/Kg)</option>
<option value="Riso|1.6">Riso (€1,60/Kg)</option> </select>

<select name="quantita" id="quantita" onChange="if(this.options.selectedIndex!=0 && document.getElementById('tipo').options.selectedIn dex!=0 ){calcola(document.getElementById('tipo'), this)}else{alert('seleziona una quantita')}">
<option value="seleziona">Quantità</option>
<option value="1">1 Kg</option>
<option value="2">2 Kg</option>
<option value="3">3 Kg</option>
<option value="4">4 Kg</option>
<option value="5">5 Kg</option>
</select>

Aqua
<select name="tipo2" id="tipo2" onChange="if(this.options.selectedIndex!=0 && document.getElementById('quantita').options.select edIndex!=0){calcola(this, document.getElementById('quantita'))}">
<option value="seleziona">Scegli il tipo</option>
<option value="Lete (€ 1,20/L)|1.2">Lete (€ 1,20/L)</option>
<option value="Ferrarelle (€ 1,30/L)|1.3">Ferrarelle (€ 1,30/L) </option>
<option value="Uliveto (€1,60/L)|1.6">Uliveto (€ 1,60/L)</option> </select>

</label>
<label>
<select name="quantita" id="quantita" onChange="if(this.options.selectedIndex!=0 && document.getElementById('tipo2').options.selectedI ndex!=0 ){calcola(document.getElementById('tipo2'), this)}else{alert('seleziona una quantita')}">
<option value="seleziona">Quantità</option>
<option value="1">1 L</option>
<option value="2">2 L</option>
<option value="3">3 L</option>
<option value="4">4 L</option>
<option value="5">5 L</option>
</select>
<input type="hidden" name="Totale spesa" id="price">
</label>

<div align="left" id="prezzo">€ 0,00</div>
</form>
</body>
</html>

**mrk1989** · 05-08-2012, 17:39

<!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>

<script language=Javascript>
var operazione=0;
function calcola(mod,qt) {
var m = parseFloat(mod.options[mod.selectedIndex].value.split("|")[1])
var q = parseInt(qt.options[qt.selectedIndex].value)
var valuta = "€ ";
operazione += (m*q);
var zeri = ",00";

var somma = valuta+operazione+zeri;
document.getElementById('prezzo').innerHTML=somma;
document.getElementById('price').value=operazione;
}
</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<form>

Pasta
<select name="tipo" id="tipo" onChange="if(this.options.selectedIndex!=0 && document.getElementById('quantita').options.select edIndex!=0){calcola(this, document.getElementById('quantita'))}">
<option value="seleziona">Scegli il tipo</option>
<option value="Spaghetti|1.2">Spaghetti (€1,20/Kg)</option>
<option value="Linguine|1.3">Linguine (€1,30/Kg)</option>
<option value="Riso|1.6">Riso (€1,60/Kg)</option> </select>

<select name="quantita" id="quantita" onChange="if(this.options.selectedIndex!=0 && document.getElementById('tipo').options.selectedIn dex!=0 ){calcola(document.getElementById('tipo'), this)}else{alert('seleziona una quantita')}">
<option value="seleziona">Quantità</option>
<option value="1">1 Kg</option>
<option value="2">2 Kg</option>
<option value="3">3 Kg</option>
<option value="4">4 Kg</option>
<option value="5">5 Kg</option>
</select>

Aqua
<select name="tipo2" id="tipo2" onChange="if(this.options.selectedIndex!=0 && document.getElementById('quantita').options.select edIndex!=0){calcola(this, document.getElementById('quantita'))}">
<option value="seleziona">Scegli il tipo</option>
<option value="Lete (€ 1,20/L)|1.2">Lete (€ 1,20/L)</option>
<option value="Ferrarelle (€ 1,30/L)|1.3">Ferrarelle (€ 1,30/L) </option>
<option value="Uliveto (€1,60/L)|1.6">Uliveto (€ 1,60/L)</option> </select>

</label>
<label>
<select name="quantita" id="quantita" onChange="if(this.options.selectedIndex!=0 && document.getElementById('tipo2').options.selectedI ndex!=0 ){calcola(document.getElementById('tipo2'), this)}else{alert('seleziona una quantita')}">
<option value="seleziona">Quantità</option>
<option value="1">1 L</option>
<option value="2">2 L</option>
<option value="3">3 L</option>
<option value="4">4 L</option>
<option value="5">5 L</option>
</select>
<input type="hidden" name="Totale spesa" id="price">
</label>

<div align="left" id="prezzo">€ 0,00</div>
</form>
</body>
</html>

**cavicchiandrea** · 05-08-2012, 18:30

Questa soluzione del + e della variabile fuori funzione l'avevo provata anch'io ma l'ho abbandonata perché incrementa a prescindere anche se cali/modifichi le quantità/prodotti, l'alternativa trovata e questa

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>

<script language=Javascript>

function calcola() {
var prodotto1 = document.getElementById('tipo')
var tipo1 = parseFloat(prodotto1.options[prodotto1.selectedIndex].value.split("|")[1])
var qt1 = document.getElementById('quantita')
var somma1 = (parseInt(qt1.options[qt1.selectedIndex].value) * tipo1)
var prodotto2 = document.getElementById('tipo1')
var tipo2 = prodotto2.options.selectedIndex!=0 ? parseFloat(prodotto2.options[prodotto2.selectedIndex].value.split("|")[1]) : 0
var qt2 = document.getElementById('quantita1')
var somma2 = qt2.options.selectedIndex!=0 ? (parseInt(qt2.options[qt2.selectedIndex].value) * tipo2) : (0 * tipo2)
var valuta = "€ ";

document.getElementById('prezzo').innerHTML = valuta+(somma2 + somma1).toFixed(2);
document.getElementById('price').value = (somma2 + somma1);
}
</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<form>

Pasta
<select name="tipo" id="tipo" onChange="if(this.options.selectedIndex!=0 && document.getElementById('quantita').options.selectedIndex!=0){calcola()}">
<option value="seleziona">Scegli il tipo</option>
<option value="Spaghetti|1.2">Spaghetti (€1,20/Kg)</option>
<option value="Linguine|1.3">Linguine (€1,30/Kg)</option>
<option value="Riso|1.6">Riso (€1,60/Kg)</option> </select>

<select name="quantita" id="quantita" onChange="if(this.options.selectedIndex!=0 && document.getElementById('tipo').options.selectedIndex!=0 ){calcola()}else{alert('seleziona una quantita')}">
<option value="seleziona">Quantità</option>
<option value="1">1 Kg</option>
<option value="2">2 Kg</option>
<option value="3">3 Kg</option>
<option value="4">4 Kg</option>
<option value="5">5 Kg</option>
</select>





Aqua
<select name="tipo2" id="tipo1" onChange="if(this.options.selectedIndex!=0 && document.getElementById('quantita1').options.selectedIndex!=0){calcola()}">
<option value="seleziona">Scegli il tipo</option>
<option value="Lete (€ 1,20/L)|1.2">Lete (€ 1,20/L)</option>
<option value="Ferrarelle (€ 1,30/L)|1.3">Ferrarelle (€ 1,30/L) </option>
<option value="Uliveto (€1,60/L)|1.6">Uliveto (€ 1,60/L)</option> </select>




</label>
<label>
<select name="quantita" id="quantita1" onChange="if(this.options.selectedIndex!=0 && document.getElementById('tipo1').options.selectedIndex!=0 ){calcola()}else{alert('seleziona una quantita')}">
<option value="seleziona">Quantità</option>
<option value="1">1 L</option>
<option value="2">2 L</option>
<option value="3">3 L</option>
<option value="4">4 L</option>
<option value="5">5 L</option>
</select>
<input type="hidden" name="Totale spesa" id="price">
</label>



<div align="left" id="prezzo">€ 0</div>
</form>
</body>
</html>

**mrk1989** · 05-08-2012, 19:26

Vabbè vediamo il parere del prioprietario del post.
Comunque aveva chiesto solo una cosa...XD
Comunque ti stimo....

**AnnaWeb** · 06-08-2012, 01:21

Ragazzi, è straordinario vedere quanta competenza c'è fra gli utenti di questo forum!
Vi ringrazio davvero tanto dei suggerimenti proposti. Ho scelto il codice di Andrea perché è perfettamente funzionante. E mi sono resa conto di quanto ero lontana dalla soluzione, ovvero non avrei mai pensato di arrivare a scrivere il codice proposto da Andrea!

Ora mi incuriosiscono altre due cose:

1) se volessi mettere anche un campo che si aggiorni con il subtotale di ogni prodotto?

2) come faccio, una volta compilati tutti i campi, a fare in modo che all'atto
dell'invio del modulo, tutte le informazioni vengano passate ad una textarea che le
contenga per riepilogarle tutte, separate da una virgola?

La mia è un'idea, ma c'è ancora tanta difficoltà a trasformarla in codice.

Davvero ancora grazie. Anna

**mrk1989** · 06-08-2012, 01:48

Ora mi incuriosiscono altre due cose:

1) se volessi mettere anche un campo che si aggiorni con il subtotale di ogni prodotto?
Aggiungi un textarea con <textarea name="Totale spesa" id="prezzo"></textarea> e alla fine del script metti
prezzo=prezzo + price;

2) come faccio, una volta compilati tutti i campi, a fare in modo che all'atto
dell'invio del modulo, tutte le informazioni vengano passate ad una textarea che le
contenga per riepilogarle tutte, separate da una virgola?javascript:void(0);
Mmm. Il textarea ha id="boh" per esempio e form id="myform".
boh=document.myForm.1campo+','+document.myForm.2ca mpo+','+document.myForm.3campo+','+document.myForm .ncampo

Non ho fatto il codice visto l'ora....

**br1** · 06-08-2012, 17:08

Originariamente inviato da AnnaWeb
Ragazzi, è straordinario vedere quanta competenza c'è fra gli utenti di questo forum!
Vi ringrazio davvero tanto dei suggerimenti proposti. Ho scelto il codice di Andrea perché è perfettamente funzionante. E mi sono resa conto di quanto ero lontana dalla soluzione, ovvero non avrei mai pensato di arrivare a scrivere il codice proposto da Andrea!

Ora mi incuriosiscono altre due cose:

1) se volessi mettere anche un campo che si aggiorni con il subtotale di ogni prodotto?

2) come faccio, una volta compilati tutti i campi, a fare in modo che all'atto
dell'invio del modulo, tutte le informazioni vengano passate ad una textarea che le
contenga per riepilogarle tutte, separate da una virgola?

La mia è un'idea, ma c'è ancora tanta difficoltà a trasformarla in codice.

Davvero ancora grazie. Anna

Mi accorgo ora ( a seguito del tuo PM ) che hai aperto due discussioni sullo stesso argomento... anche se impostate diversamente le hai ricondotte allo stesso problema.

Non farlo piu', eccezionalmente chiudo l'altra per rispetto agli intervenuti dato che questa ha avuto seguito

ps: "HELP" nei titoli delle discussioni non e' benaccetto, essendo assolutamente ridondante: il 99% delle discussioni qui sono aperte per chiedere aiuto

**AnnaWeb** · 06-08-2012, 18:09

@Br1 - Chiedo scusa per l'uso inappropriato del forum. Ringrazio delle segnalazioni.

@Mrk1989 - Grazie! Appena posso metto mano al codice seguendo i tuoi suggerimenti. Ti faccio sapere.

**AnnaWeb** · 07-08-2012, 21:40

Ciao Andrea, scusami, volevo dirti che ho provato il tuo codice che fa la somma dei due valori selezionati dai select, però stranamente ho notato che se comincio a selezionare a partire dal secondo select, nel campo del totale esce scritto NaN. Se invece seleziono prima dal primo select e poi dal secondo, il problema non si pone. Come mai?

Grazie. Anna

**cavicchiandrea** · 07-08-2012, 21:55

Cambia questo blocco

codice:

var prodotto1 = document.getElementById('tipo')
var tipo1 = parseFloat(prodotto1.options[prodotto1.selectedIndex].value.split("|")[1])
var qt1 = document.getElementById('quantita')
var somma1 = (parseInt(qt1.options[qt1.selectedIndex].value) * tipo1)
var prodotto2 = document.getElementById('tipo1')
var tipo2 = prodotto2.options.selectedIndex!=0 ? parseFloat(prodotto2.options[prodotto2.selectedIndex].value.split("|")[1]) : 0
var qt2 = document.getElementById('quantita1')
var somma2 = qt2.options.selectedIndex!=0 ? (parseInt(qt2.options[qt2.selectedIndex].value) * tipo2) : (0 * tipo2)

con questo

codice:

var prodotto1 = document.getElementById('tipo')
var tipo1 = prodotto1.options.selectedIndex!=0 ? parseFloat(prodotto1.options[prodotto1.selectedIndex].value.split("|")[1]) : 0
var qt1 = document.getElementById('quantita')
var somma1 = qt1.options.selectedIndex!=0 ? (parseInt(qt1.options[qt1.selectedIndex].value) * tipo1) : (0 * tipo1)
var prodotto2 = document.getElementById('tipo1')
var tipo2 = prodotto2.options.selectedIndex!=0 ? parseFloat(prodotto2.options[prodotto2.selectedIndex].value.split("|")[1]) : 0
var qt2 = document.getElementById('quantita1')
var somma2 = qt2.options.selectedIndex!=0 ? (parseInt(qt2.options[qt2.selectedIndex].value) * tipo2) : (0 * tipo2)

Discussione: Sommare valori da più Selezioni in un Form

Strumenti discussione

Ricerca discussione

Visualizza

Help! Javascript - Sommare valori da più Selezioni in un Form

Tiè pija.....

Permessi di invio