Realizzare tabella che aggiorna i prezzi in base alle quantità

[lorenzo84]

Buongiorno a tutti...

Mi aiutate a realizzare il meccanismo per far si che aggiorni il prezzo nel subtotale se si aggiorna la quantità e allo stesso tempo mi calcola l'iva in base al subtotale?
io sto provando con questo jquery:

<script type="text/javascript">
	$(document).ready(function()
	{
		$('#prodotticarrello tr').each(function() {
			var Id = $(this).find(".val").html();    
		});
	});
	</script>

ma non funziona.
Questa è la struttura della tabella:

<table class='bordo'  id='prodotticarrello' border='0'>
<tr>
<th style='width:450px'>Descrizione</th><th style='width:111px;border-left:1px solid #F0F0F0;border-right:1px solid #F0F0F0;'>Prezzo</th><th style='border-right:1px solid #F0F0F0;width:70px;text-align:center;'>Quantità</th><th style='border-right:1px solid #F0F0F0;width:120px;'>IVA</th><th style='width:80px;'>Subtotale</th><th style='border-left:1px solid #F0F0F0;'>&nbsp;</th></tr>

<tr><td >Prodotto 1</td><td class='val'>60.74</td><td><input size='1' name='qta' type='text' value='1'></td><td>13.36 € (22.00%)</td><td>60.24</td><td><a href='carrello.php?action=cancella&id=3'>rimuovi</a></td></tr>
<tr ><td>Prodotto 2</td><td class='val' >15.10</td><td><input size='1' type='text' name='qta' value='1'></td><td>3.32 € (22.00%)</td><td class='val'>15.10 €</td><td><a href='carrello.php?action=cancella&id=12'>rimuovi</a></td></tr>
<tr><td>Prodotto 3</td><td class='val'>125.63</td><td><input size='1' name='qta' type='text' value='1'></td><td>27.63 € (22.00%)</td><td class='val'>125.63 €</td><td><a href='carrello.php?action=cancella&id=12'>rimuovi</a></td></tr>
</table>

Non conosco molto jquery e ho qualche difficoltà.
Grazie mille a tutti quelli che mi aiuteranno

 

[criric]

CIao, in effetti è molto difficile che una sola riga di codice possa eseguire tutte le operazioni che vuoi far fare
potresti provare cosi

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var aliquota = 22;
        $(".qta").keyup(function(){
            var qta = $(this).val();
            if(qta > 0) {
                var prezzo = $(this).parent().prev().html();
                var iva = (prezzo * qta) * (aliquota / 100);
                var totale = parseFloat(prezzo * qta) + parseFloat(iva);
                $(this).parent().next().html(Math.round(iva * 100) / 100);
                $(this).parent().next().next().html(Math.round(totale * 100) / 100);                
            }
        });
    });
</script>
<table>
    <tr>
        <td>Prodotto 1</td>
        <td>60.25</td>
        <td><input type="text" size="2" class="qta" name="qta1" value="1"/></td>
        <td>13.26</td>
        <td>73.51</td> 	
    </tr>
</table>

 

[lorenzo84]

grazie mille per la risposta.

due domande:

name="qta1" lo genero con un contatore al momento che creo la tabella giusto?

ho modificato lo script per eliminare il conteggio dell'iva nel subtotale...

 

[lorenzo84]

Ho modificato il tutto per renderlo come lo volevo e sembra funzionare tutto...

Come faccio a fare il conteggio totale di tutta la colonna subtotale? senza iva?

 

[criric]

name="qta1" lo genero con un contatore al momento che creo la tabella giusto?

si, ma, è inutile al fine di questo script
Se non vuoi aggiungere l'iva basta evitare l'addizione

var totale = parseFloat(prezzo * qta) + parseFloat(iva);

cosi

var totale = parseFloat(prezzo * qta);

 

[lorenzo84]

Ecco si mi traeva in inganno il qta1... ma in effetti eliminando il numero funziona lo stesso.

E' difficile recuperare tutti i valori della colonna subtotale e fare la somma?

 

[lorenzo84]

funziona tutto. ho creato una funzione che mi da il totale attaverso il campo subtotale dichiarato come class="subtot". Sembra funziona ma non riesco a farlo aggiornare dopo che aumento la quantità. La funzione è:

function aggiornaprezzi() { 

		var somma=0;var totalesub=0;
	
		$(".subtot").each(function(){
			
			var recupero = $(this).text(); 
			var recuperoparse=parseFloat(recupero);
			totalesub += recuperoparse;
			$( "#totalecarrello" ).html(totalesub+" €");
		});

e questo è il codice della funzione che aggiorna la quantità:

var aliquota = 22;
        $(".qta").keyup(function(){
            var qta = $(this).val();
            if(qta > 0) {
                var prezzo = $(this).parent().prev().html();
                var iva = (prezzo * qta) * (aliquota / 100);
                var totale = parseFloat(prezzo * qta) ;
                $(this).parent().next().html(Math.round(iva * 100) / 100+" ("+aliquota+" %)");
                $(this).parent().next().next().html(Math.round(totale * 100) / 100+" €"); 
				//$(this).parent().next().html(iva);				
            }
			aggiornaprezzi();
        });

dove sbaglio?

 

[criric]

Metti questa riga fuori dal ciclo each

$( "#totalecarrello" ).html(totalesub+" €");

dovrebbe funzionare

 

[lorenzo84]

Ciao!!! grazie per le risposte:

ho modificato così:

$('#prodotticarrello tr ').each(function() {
			var recupero = $(this).find(".subtot").html();    
			var recuperoparse=parseFloat(recupero);
			totalesub += recuperoparse;
			//$( "#totalecarrello" ).html(totalesub+" €");
		 });
		 $( "#totalecarrello" ).html(totalesub+" €");
	
			
		};

ma nel campo totale viene scritto Nan €

 

[criric]

Quello di prima funzionava
te lo riposto completo

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var aliquota = 22;
        $(".qta").keyup(function() {
            var qta = $(this).val();
            if (qta > 0) {
                var prezzo = $(this).parent().prev().html();
                var iva = (prezzo * qta) * (aliquota / 100);
                var totale = parseFloat(prezzo * qta);
                $(this).parent().next().html(Math.round(iva * 100) / 100 + " (" + aliquota + " %)");
                $(this).parent().next().next().html(Math.round(totale * 100) / 100 + " &euro;");
            }
            aggiornaprezzi();
        });

    });
    function aggiornaprezzi() {
        var totalesub = 0;
        $(".subtot").each(function() {
            var recupero = $(this).text();
            var recuperoparse = parseFloat(recupero);
            totalesub += recuperoparse;
        });
        $("#totalecarrello").html(totalesub + " &euro;");
    }
</script>
<table>
    <tr>
        <td>Prodotto 1</td>
        <td>60.25</td>
        <td><input type="text" size="2" class="qta" name="qta1" value="1"/></td>
        <td>13.26 (22 %)</td>
        <td class="subtot">60.25 &euro;</td> 	
    </tr>
     <tr>
        <td>Prodotto 2</td>
        <td>64.05</td>
        <td><input type="text" size="2" class="qta" name="qta2" value="1"/></td>
        <td>14.09 (22 %)</td>
        <td class="subtot">64.05 &euro;</td> 	
    </tr>
</table>
<div>Totale : <span id="totalecarrello"> 124.3 &euro;</span></div>

 

[lorenzo84]

perfetto!!! come faccio però a limitare a due decimali dopo la virgola? non sempre appare ma a volte mi viene tipo: 5740.610000000001 €

e anche al campo iva ho provato ma viene arrotondato per eccesso e io invece voglio che se è : 56.6987 venga 56.69 e non 56.70. è possibile?

 

[criric]

questa istruzione ti arrotonda ai 2 decimali

Math.round(iva * 100) / 100

se non l'hai tolta dovrebbe funzionare
per arrotondare in difetto come vuoi tu devi usare floor() al posto di round() guarda qui
ma sicuro che si arrotonda in questo modo l'iva?
prova a fare una ricerca qui dicono il contrario

 

[lorenzo84]

rieccomi... ho scritto:

$("#totalecarrello").html(Math.round(totalesub) + " €");

ma sbaglia le somme... dove sbaglio?

 

[criric]

Tua

Math.round(totalesub)

Mia

Math.round(totalesub * 100) / 100

non noti nessuna differenza?

 

[lorenzo84]

hai ragione scusa. sono fuso.

Purtroppo mi sa che dovrò abbandonare l'idea del jquery per il carrello perchè non conoscendolo bene vado a tentativi e non mi piace. Ad esempio siccome nel mio carrello è possibile che ci siano prodotti con id uguali la cancellazione del singolo prodotto veniva effettuata tramite id del prodotto e quindi mi cancellava tutti i prodotti con quell'id. Allora mi sono inventato un sistema tramite un contatore per agire sull'id della sessione in modo da levare quello e basta e sembra funzionare ma non ne sono sicuro...

 

[criric]

Auguri, chiudo

 

[lorenzo84]

eccomi di nuovo!!! mi sono incaponito sul carrello gestito con jquery e sembra funzionare tutto al meglio.
Ora devo aggiornare il totale del carrello in base al metodo di spedizione e pagamento.

La selezione del metodo di pagamento e della spedizione avviene tramite radio button:

<tr><td><input type="radio" name="metodo_sped"></td><td>Corriere espresso</td><td>0.30€ (22%)</td><td>10.00 €</td></tr>
<tr><td><input type="radio" name="metodo_sped"></td><td>Spedizione 3-5 giorni</td><td>0.10€ (22%)</td><td>5.00 €</td></tr>

Una volta scelto la modalità e cliccato sul radio button interessato dovrei aggiornare il totale del carrello in questo td:

<span id='totalecarrelloconspedepag'> </span>

mii dai qualche dritta? vorrei provarci da me ma non capisco come recuperare il prezzo relativo al tr associato al radiobutton...