Stampare il totale costo in base alla quantità prodotto

[NLSweb]

ho includi il DIV contenutoCarrello nel FORM
ho devi ricopiarti i dati che ti servono da inviare..

io il pulsante SUBMIT invece che invocare direttamente l'invio dati definito nel ACTION FORM , gli farei eseguire una funzione per il controllo dei campi inserito e degli elementi nel carrello , quindi invierei solo le info che mi servono..

Avevo provato ad inserire nel modulo questa parte, ma la mail quando arriva stampa solo i 4 punti dei <li>

<div id="contenutoCarrello"></div>
<div id="carrello">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<p style="text-align: center;margin-top: 140px;"><button onclick="SVUOTA()" class="input">Vuota il Carrello</button></p>
</div>

Riguardo al pulsante invia, ho pensato anch'io di mettere un controllo del tipo: se il carrello è vuoto e si preme Invia, deve apparire un fumetto del tipo "Non puoi inviare l'ordine perché il carrello è vuoto"

Nel frattempo ho preparato il database, inserisce correttamente tutti i dati del form, ma non quelli del carrello

[NLSweb]

perchè tu hai definito nel FORM che i campi da inviare sono solo quelli dei dati del cliente

onsubmit="return (nomeCampoG() && cognomeCampoG() && viaCampoG() && nCampoG() && locCampoG() && proCampoG() && capCampoG() && telCampoG() && emailCampoG() && validatoreCampoG());"

...

considera che a te servono minimo ID del prodotto scelto e quantità , poi i resto lo puoi anche recuperare dal DB

Non ho capito, devo modificare l'onsubmit?

[NLSweb]

Avevo provato ad inserire nel modulo questa parte, ma la mail quando arriva stampa solo i 4 punti dei <li>

questa accadeva perchè (vedi sopra...)

quindi se includi i dati del carrello del FORM devi modificare quel codice che invia SOLO i dati cliente

Non ho capito, devo modificare l'onsubmit?

se incorpori il carrello nel FORM , SI .. devi modificare il codice che hai inserito nel onsubmit aggiungendo anche i dati del carrello che ti interessano

I richiami che ho nell'onsubmit servono per far uscire l'alert in rosso.

Il modulo dell'invio email contiene i campi $_POST da inviare, per il carrello non ho un campo del genere

[NLSweb]

se includi il carrello nel FORM devi dichiararli nel onsubmit perchè devono anch'essi essere obbligatori

altrimenti eseguiti tutti i controlli ed il submit con una funzione script , in tal caso non ti serve onsumbit ..
ma devi disabilitare l'azione automatica di invio e assegnare un onclick al pulsante che eseguirà la funzione di controllo

Forse è meglio la seconda, così non faccio modifiche al form. In questo modo mettiamo un onclick al pulsante invia che controlla se il carrello è pieno

[NLSweb]

sai come procedere ?

No, purtroppo. Nel frattempo sto cercando di far apparire una piccola immagine del libro prima della € (vedi +imgX+), ma non va, con ISBN ci ero riuscito

var elementi = "<div id='prodotto"+id+"' class='merce'><p class='nomeLibro'>"+nome+"<span class='isbn'>"+isbn+"</span><br><br>"+imgX+" <span class='moneyCarrello'>€ </span>...

 function AGGIUNGIalCARRELLO(id,nome,isbn,imgX,prezzo){
…

 function AGGIUNGI(id){
   var nome = $(".NOME"+id).val();
   var isbn = $(".ISBN"+id).val();
   var imgX = $(".IMG"+id).val();
   var prezzo = parseFloat($(".PREZZO"+id).val());  
   AGGIUNGIalCARRELLO(id,nome,isbn,imgX,prezzo);  

…

<button class="aggiungi" onclick="AGGIUNGI(8)">Aggiungi al carrello</button>
<div class="aggiunto">Aggiunto!</div>
<div class="prezzo"><strong>€ 21,30</strong> | pag. 192 | ISBN 978-88-89292-55-8</div></div>
<input style="display: none;" type="text" class="NOME8" value="Libro8 |">
<input style="display: none;" type="text" class="ISBN8" value="&nbsp;ISBN 978-88-89292-55-8">
<input id="imgcss" type="image" class="IMG8" src="immagini/libro8.jpg"  value="">
<input style="display: none;" type="text" class="PREZZO8" value="21.30">  

…

#imgcss {
	width: 40px;
	height: 55px;
	display: none;
}

[NLSweb]

Se vuoi far apparire un immagine devi scrivere il TAG IMG ...

var elementi = ".......<img src='"+imgX+"'/>......

per il form dai un occhiata a questo post

mostro come disabilitare il tasto submit e come creare un funzione di controllo personalizzata

Per l'immagine, var elementi = ".......<img src='"+imgX+"'>......, non funziona qualcosa, l'immagine non appare, ma mostra il quadratino che non trova l'immagine.

function AGGIUNGI(id){
   var nome = $(".NOME"+id).val();
   var isbn = $(".ISBN"+id).val();
   var imgX = $(".IMG"+id).val();
   var prezzo = parseFloat($(".PREZZO"+id).val());  
   AGGIUNGIalCARRELLO(id,nome,isbn,imgX,prezzo);  
...

Nella index ho questo

<img style="display: none; width: 40px; height: 55px; margin-top: -15px; vertical-align: -40%;" src="immagini/libro8.jpg" alt="libro8" title="Arn">

- Riguardo al form pensavo, siccome ha già anche i controlli php, non sarebbe meglio includerci anche il carrello? Che dici?

[NLSweb]

per l'immagine ci sono un po' di errori .............

il campo input che contiene l'indirizzo immagine NON è un TAG IMG quindi non devi mettere il SRC !!!
ma il valore deve contenere l'indirizzo !
... e perchè hai messo anche un ID al TAG INPUT ?

/* SBAGLIATO */
<input id="imgcss" type="image" class="IMG8" src="immagini/libro8.jpg"  value="">

/* CORRETTO */
<input type="image" class="IMG8" value="immagini/libro8.jpg">

nella lista dei prodotti perchè hai messo l'immagine con CSS ...

display: none;

per il form ti consiglio vivamente di usare uno script per il controllo !

Per l'immagine ho messo quello corretto, ma non trova il css

#imgcss {
	width: 40px; 
	height: 55px;
	display: none;
	margin-top: -15px; 
	vertical-align: -40%;
	border: 1px solid red; 
}

...

<input id="imgcss" type="image" class="IMG8" value="immagini/libro8.jpg">

…

 var imgX = $(".IMG"+id).val();

…

var elementi = ".......<img src='"+imgX+"'>......

[NLSweb]

scusa ma vedo andesso anche un errore sul type che non è image ! ma deve essere text !

poi il CSS ..

1) il campo input come l'hai impostato serve per passare l'argomento al carello per riproporre l'immagine
2) l'immagine a cui vuoi assegnare lo stile è quella nella lista degli elementi nel carrello quindi
quando definisci la variabile elementi , al TAG IMG dovrai assegnare la classe con lo stile che hai creato.

Qui non va ancora <img id=\"imgcss\" src='"+imgX+"'> eppoi appare l'input sotto l'immagine 7

[NLSweb]

l'input appare perchè non hai definito il css per nasconderlo...
il TAG input deve avere

style="display:none;"

mentre l'immagine che hai del prodotto (quella a fianco del nome) non avere questo stile altrimenti non si vede !

... invece per l'immagine nel carrello ... gli hai assegnato la classe "imgcss" che ha DIPSLAY NONE !!!!

Va meglio.

Ho notato casualmente una cosa: se metto nel carrello il libro 8 (che ha i decimali 30) e poi metto un altro con decimali 00 somma giusto. Se poi elimino il libro 8 (€ 21,30), nel Prezzo pieno totale appaiono i decimali 30

[NLSweb]

perchè nella funzione ELIMINA non viene ripristinato il punto per i decimali quindi quando legge il valore (da sotrarre al totale) legge solo l'intero e noni decimali.

inserisci anche qui le linee di codice per leggere il valore , convertirlo in striga , sostituire la virgola con il punto , riconvertire in valore numerico per eseguire la sottrazione (questo per le variabili valore , totaleacquisto)

Qui come al solito devo aver sbagliato qualcosa

 function ELIMINA(id){
   var valore = parseFloat($("#prodotto"+id+" .subTotaleX").val());
   
   var valore = valore.toString(); 
   valore = valore.replace(",", ".");
   valore = parseFloat(valore);
   var valore = valore.toFixed(2); 
   valore = valore.replace(".", ",");
   
   var quantita = parseFloat($("#prodotto"+id+" .quantity").val());
   $("#prodotto"+id).remove();
   var totalequantita = parseInt($("#areacalcolo .totquantita").val());
   var totaleacquisto = parseFloat($("#areacalcolo .totspesa").val());
   
   var totaleacquisto = totaleacquisto.toString(); 
   totaleacquisto = totaleacquisto.replace(",", ".");
   totaleacquisto = parseFloat(totaleacquisto);
   var totaleacquisto = totaleacquisto.toFixed(2); 
   totaleacquisto= totaleacquisto.replace(".", ",");
   
   totalequantita-=quantita;
   totaleacquisto-=valore;
   $("#areacalcolo .totquantita").val(totalequantita);
   $("#areacalcolo .totspesa").val(totaleacquisto);
   if(totalequantita==0){
    AZZERA();
   }else{
    $("#infoProdotto"+id+" .aggiunto").hide();
    $("#infoProdotto"+id+" .aggiungi").show();
    CARRELLO();
   }
  }

[NLSweb]

.... l'errore è che prima di riconvertire il valore in un testo con la virgola devi eseguire i calcoli !

quindi questi codici

  var valore = valore.toFixed(2); 
  valore = valore.replace(".", ",");

vanno dopo il calcolo

   totalequantita-=quantita;
   totaleacquisto-=valore;

stessa cosa x totaleacquisto

Non va ancora, forse è incompleta

function ELIMINA(id){
   var valore = parseFloat($("#prodotto"+id+" .subTotaleX").val());
   
   var valore = valore.toString(); 
   valore = valore.replace(",", ".");
   valore = parseFloat(valore);
   
   var quantita = parseFloat($("#prodotto"+id+" .quantity").val());
   $("#prodotto"+id).remove();
   var totalequantita = parseInt($("#areacalcolo .totquantita").val());
   var totaleacquisto = parseFloat($("#areacalcolo .totspesa").val());
   
   var totaleacquisto = totaleacquisto.toString(); 
   totaleacquisto = totaleacquisto.replace(",", ".");
   totaleacquisto = parseFloat(totaleacquisto);
   
   totalequantita-=quantita;
   totaleacquisto-=valore;
   
   
   var valore = valore.toFixed(2); 
   valore = valore.replace(".", ",");
   var totaleacquisto = totaleacquisto.toFixed(2); 
   totaleacquisto= totaleacquisto.replace(".", ",");
   
   $("#areacalcolo .totquantita").val(totalequantita);
   $("#areacalcolo .totspesa").val(totaleacquisto);
   if(totalequantita==0){
    AZZERA();
   }else{
    $("#infoProdotto"+id+" .aggiunto").hide();
    $("#infoProdotto"+id+" .aggiungi").show();
    CARRELLO();
   }
  }

[NLSweb]

non hai spostato per la variabile totaleacquisto ... come ti avevo indicato sopra..

questo codice

   var totaleacquisto = totaleacquisto.toFixed(2); 
   totaleacquisto= totaleacquisto.replace(".", ",");

va messo dopo il calcolo....

   totalequantita-=quantita;
   totaleacquisto-=valore;

Neanche così va

 function ELIMINA(id){
   var valore = parseFloat($("#prodotto"+id+" .subTotaleX").val());
   
   var valore = valore.toString(); 
   valore = valore.replace(",", ".");
   valore = parseFloat(valore);
   
   var quantita = parseFloat($("#prodotto"+id+" .quantity").val());
   $("#prodotto"+id).remove();
   var totalequantita = parseInt($("#areacalcolo .totquantita").val());
   var totaleacquisto = parseFloat($("#areacalcolo .totspesa").val());
   
   var totaleacquisto = totaleacquisto.toString(); 
   totaleacquisto = totaleacquisto.replace(",", ".");
   totaleacquisto = parseFloat(totaleacquisto);
   var totaleacquisto = totaleacquisto.toFixed(2); 
   totaleacquisto= totaleacquisto.replace(".", ",");
   
   totalequantita-=quantita;
   totaleacquisto-=valore;
   
    var totaleacquisto = totaleacquisto.toFixed(2); 
   totaleacquisto= totaleacquisto.replace(".", ",");
   
   var valore = valore.toFixed(2); 
   valore = valore.replace(".", ",");
   
   
   $("#areacalcolo .totquantita").val(totalequantita);
   $("#areacalcolo .totspesa").val(totaleacquisto);
   if(totalequantita==0){
    AZZERA();
   }else{
    $("#infoProdotto"+id+" .aggiunto").hide();
    $("#infoProdotto"+id+" .aggiungi").show();
    CARRELLO();
   }
  }

[NLSweb]

function ELIMINA(id){
   var quantita = parseInt($("#prodotto"+id+" .quantity").val());
   var valore = $("#prodotto"+id+" .subTotaleX").val();
   
   var valore = valore.toString(); 
   valore = valore.replace(",", ".");
   valore = parseFloat(valore);
   
   $("#prodotto"+id).remove();

   var totalequantita = parseInt($("#areacalcolo .totquantita").val());
   var totaleacquisto = $("#areacalcolo .totspesa").val();
   
   totaleacquisto = totaleacquisto.toString(); 
   totaleacquisto = totaleacquisto.replace(",", ".");
   totaleacquisto = parseFloat(totaleacquisto);

   totalequantita-=quantita;
   totaleacquisto-=valore;
   
   $("#areacalcolo .totquantita").val(totalequantita);
   $("#areacalcolo .totspesa").val(totaleacquisto);
   if(totalequantita==0){
    AZZERA();
   }else{
    $("#infoProdotto"+id+" .aggiunto").hide();
    $("#infoProdotto"+id+" .aggiungi").show();
    CARRELLO();
   }
  }

Ma tu sai tutto, quale angelo ti ha detto di assistermi?

Ora vedo se riesco a sistemare il submit del carrello (ci tento)

Perché devo disabilitare il submit? Il mio form ha già i controlli anche php, non è meglio collegare il carrello al submit?

[NLSweb]

hai due strade (come già detto in precedenza) ...

1) inserisci il carello nel tuo FORM , quindi usi i tuoi controlli PHP

2) disabilita la funzione predefinita del submit del tuo FORM e creai al suo posto una funzione personalizzata per il controllo

Mi avevi consigliato il secondo, perciò ho messo così

<button type="submit" class="aggiungi" name="inviaG" value="inviaG" onclick="controllo()" style="cursor:pointer;">Invia</button> 

e nel carrello questo

 $(document).ready(function(){
 $("#mioformG").submit(function( event ){
  event.preventDefault();
 });

Ora viene il bello: come ci collego questo?

<div class="ListaProdotti"> <!--Questo è il contenitore del carrello-->
<div id="contenutoCarrello"></div>
<div id="carrello"> <!--Questa è la parte sotto delle 4 voci: Totale prezzo pieno, ecc. -->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div> <!-- carrello-->
</div> <!-- ListaProdotti-->

[NLSweb]

Prima di tutto .. hai assegnato un ID al FORM con il nome "mioformG" ?

dopo tu avrai una funzione "controllo" , qui leggerai tutti i dati immessi (dal carello ai dati utente) e verificherari che sono completi
quindi devi decideri quali dati vuoi passare al form (tutti? solo id prodotto e quantità? ...)

Vero, l'id è mioG <form method="post" name="mioformG" id="mioG"...

La funzione controllo come la applico ai div? Poi ci posso mettere anche il controllo php (oltre a quello js) del tipo: "Il carrello è vuoto, non puoi fare l'ordine"

<div class="ListaProdotti"> <!--Questo è il contenitore del carrello-->
<div id="contenutoCarrello"></div>
<div id="carrello"> <!--Questa è la parte sotto delle 4 voci: Totale prezzo pieno, ecc. -->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div> <!-- carrello-->
</div> <!-- ListaProdotti-->