Printable View
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>
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"Codice:<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>
Nel frattempo ho preparato il database, inserisce correttamente tutti i dati del form, ma non quelli del carrello
perchè tu hai definito nel FORM che i campi da inviare sono solo quelli dei dati del cliente
Codice: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?
questa accadeva perchè (vedi sopra...)Citazione:
Avevo provato ad inserire nel modulo questa parte, ma la mail quando arriva stampa solo i 4 punti dei <li>
quindi se includi i dati del carrello del FORM devi modificare quel codice che invia SOLO i dati cliente
se incorpori il carrello nel FORM , SI .. devi modificare il codice che hai inserito nel onsubmit aggiungendo anche i dati del carrello che ti interessanoCitazione:
Non ho capito, devo modificare l'onsubmit?
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
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
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
Codice:var elementi = "<div id='prodotto"+id+"' class='merce'><p class='nomeLibro'>"+nome+"<span class='isbn'>"+isbn+"</span><br><br>"+imgX+" <span class='moneyCarrello'>€ </span>...
Codice: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=" 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;
}
Se vuoi far apparire un immagine devi scrivere il TAG IMG ...
per il form dai un occhiata a questo postCodice:var elementi = ".......<img src='"+imgX+"'/>......
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.
Nella index ho questoCodice: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);
...
- Riguardo al form pensavo, siccome ha già anche i controlli php, non sarebbe meglio includerci anche il carrello? Che dici?Codice:<img style="display: none; width: 40px; height: 55px; margin-top: -15px; vertical-align: -40%;" src="immagini/libro8.jpg" alt="libro8" title="Arn">
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 ?
nella lista dei prodotti perchè hai messo l'immagine con CSS ...Codice:/* SBAGLIATO */
<input id="imgcss" type="image" class="IMG8" src="immagini/libro8.jpg" value="">
/* CORRETTO */
<input type="image" class="IMG8" value="immagini/libro8.jpg">
per il form ti consiglio vivamente di usare uno script per il controllo !Codice:display: none;
Per l'immagine ho messo quello corretto, ma non trova il css
Codice:#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+"'>......
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
l'input appare perchè non hai definito il css per nasconderlo...
il TAG input deve avere
mentre l'immagine che hai del prodotto (quella a fianco del nome) non avere questo stile altrimenti non si vede !Codice:style="display:none;"
... 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
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
Codice: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();
}
}
.... l'errore è che prima di riconvertire il valore in un testo con la virgola devi eseguire i calcoli !
quindi questi codici
vanno dopo il calcoloCodice:var valore = valore.toFixed(2);
valore = valore.replace(".", ",");
stessa cosa x totaleacquistoCodice:totalequantita-=quantita;
totaleacquisto-=valore;
Non va ancora, forse è incompleta
Codice: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();
}
}
non hai spostato per la variabile totaleacquisto ... come ti avevo indicato sopra..
questo codice
va messo dopo il calcolo....Codice:var totaleacquisto = totaleacquisto.toFixed(2);
totaleacquisto= totaleacquisto.replace(".", ",");
Codice:totalequantita-=quantita;
totaleacquisto-=valore;
Neanche così va :shock:
Codice: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();
}
}
Codice HTML: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?
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ì
Codice PHP:<button type="submit" class="aggiungi" name="inviaG" value="inviaG" onclick="controllo()" style="cursor:pointer;">Invia</button>
e nel carrello questo
Ora viene il bello: come ci collego questo?Codice:$(document).ready(function(){
$("#mioformG").submit(function( event ){
event.preventDefault();
});
Codice:<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-->
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"
Codice:<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-->