Envoi d’un mail a partir de php/Vuejs

**sisi001** · 19/03/2021, 08h39

Bonjour à tous, j’essaye d’envoyer toutes les informations d’un form via un mail. Le problème étant que je dois réalisé un calcul (qui lui est fonctionnel et fait en Vue) et que j’ai donc dus rajouter des :value qui je pense posent problème pour récupérer les informations car les infos n’étant pas prises en compte dans ce calcul passent totalement correctement, tandis que celles utilisée ne veulent pas passer et prennent cette forme : Nbre de feuilles par page: [object Object] . Hors si je veux retirer le :value, le calcul ne peut donc plus fonctionner. Auriez vous une solution à proposer ?

Voici quelques screen pour mieux montrer la situation:

Voici un des select en question posant problème:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
            <div class="form-group">
                <div>
                    <label>Combien de feuilles par page:</label><br>
                    <select v-model="order.selectedPagesForm" name="sheet" @keydown="testconsole">
                        <option disabled value="">Choisissez un nombre de feuilles par page</option>
                        <option v-for="sheet in feuilles" :value="sheet">{{sheet.nom}}</option>
                    </select>
                </div>
            </div>

Le tableau correspondant au select:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
        feuilles: [
            {id: 0, type: '1 feuille', nom: "1 feuille par page"},
            {id: 1, type: '2 feuilles', nom: "2 feuilles par page l'une en dessous de l'autre"},
            {id: 2, type: '2 feuilles', nom: "2 feuilles par page l'un à côté de l'autre"},
            {id: 3, type: '4 feuilles', nom: "4 feuilles par page vertical"},
            {id: 4, type: '4 feuilles', nom: "4 feuilles par page horizontale"},
        ],

Le code php pour l'envoi du mail:

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<?php
 
$entete  = 'MIME-Version: 1.0' . "\r\n";
$entete .= 'Content-type: text/html; charset=utf-8' . "\r\n";
$entete .= 'From: ' . $_POST['email'] . "\r\n";
 
 
 
$mailContent =
    '<h2 style="text-align: center">Résumé de la commande</h2>'.
    '<p style="text-align: center"> Prenom: '.$_POST[ 'firstname'].'<br>'.
    'Nom: '.$_POST['name'].'<br>'.
    'Email: '.$_POST['email'].'<br>'.
    'Magasin: '.$_POST['storeName'].'<br>'.
    'Nom de l\'entreprise: '.$_POST['companyName'].'<br>'.
    'Num de téléphonne: '.$_POST['telephonNumber'].'<br>'.
    'Numéro de TVA: '.$_POST['VAT'].'<br>'.
    'Adresse: '.$_POST['street'].' '.$_POST['town'].' '.$_POST['postalCode'].'<br>'.
    'Nombre de pages: '.$_POST['pageNumber'].'<br>'.
    'Nombre d\'exemplaires: '.$_POST['copyNumber'].'<br>'.
 
 
    'Nbre de feuilles par page: '.$_POST['sheet.toString'].'<br>'.
 
 
    'Type d\'impression: '.$_POST['typeImpress'].'<br>'.
    'Type d\'impression: '.$_POST['typeImpressSmall'].'<br>'.
    'Type de papier: '.$_POST['tp'].'<br>'.
    'Recto/verso: '.$_POST['rv'].'<br>'.
    'Reliure: '.$_POST['reliure'].'<br>'.
    'Plastification: '.$_POST['plastification'].'<br>'.
    'Couverture: '.$_POST['cover'].'<br>'.
    '</p>';
 
$retour = mail('ADRESSMAIL', 'Demande d\'impression', $mailContent, $entete);
 
 
if ($retour){
    echo 'Votre message a bien été envoyé.';
}
?>

L'erreur affichée dans le mail:
Nom : Capture d’écran 2021-03-18 à 16.28.43.png
Affichages : 125
Taille : 19,3 Ko

Je vous remercie d'avance pour votre aide !

**gwyohm** · 20/03/2021, 10h52

salut,
ton souci, c'est que tu mets un objet en valeur de tes options.
c'est pas un problème pour vue mais dans le html généré, cette valeur dit devenir "object".
le plus simple, c'est soit de gérer un ID que tu connais côté serveur, soir de donner en valeur une serialisation JSON que tu deserialises sur le serveur :

option 1: tu ajoutes un ID que tu connais côté serveur dans ta déclaration de feuilles

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<option v-for="sheet in feuilles" :value="sheet.ID">{{sheet.nom}}</option>

option 2 tu serais là feuille pour obtenir un JSON que tu pourras parser côté serveur

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<option v-for="sheet in feuilles" :value="JSON.stringify(sheet)">{{sheet.nom}}</option>

**sisi001** · 20/03/2021, 15h03

Je vous remercie pour votre réponse, je vais tester ces deux solutions ce soir et voir ce que ça donne. Bonne journée à vous !

**sisi001** · 22/03/2021, 10h18

J'ai réussi a récupérer le nom correctement grâce à votre méthode, mais malheureusement cela ne fonctionne pas pour toutes mes données. Je m'explique: ici ça fonctionne pour les sheet car celles-ci ne font que divisé le prix général, par exemple divisé par 2 ou 4. Hors mes autres données sont utilisée pour calculer le prix a base de notre choix, et lorsque je veux faire de même pour celles-ci cela ne fonctionne pas. Je vais vous mettre le code d'une de ces données pour mieux vous l'expliquer.

Voici ce que j'ai dans mon $mailcontent:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
    'Type d\'impression: ' . $_POST['largeType'] . '<br>' .
    'Type d\'impression: ' . $_POST['smallType'] . '<br>' .

et voici à quoi ceci est lié:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
           <div class="form-group">
                <div>
                    <h3>Type d'impression</h3>
                    <div>
                        <label>Grand format:</label>
                        <select v-model="order.checked" name="typeImpress">
                            <option disabled value="">Choix de grands formats</option>
                            <option v-for="largeType in largeImpressionType" :value="largeType">
                                {{largeType.nom}} ({{largeType.prix.toFixed(2)}})&euro;
                            </option>
                        </select>
 
                    </div>
                    <div>
                        <label>Petit format:</label>
                        <select v-model="order.checked" name="typeImpressSmall">
                            <option disabled value="">Choix de petits formats</option>
                            <option v-for="smallType in smallImpressionType" :value="smallType">
                                {{smallType.nom}} ({{smallType.prix.toFixed(3)}})&euro;
                            </option>
                        </select>
                    </div>
                </div>
            </div>

et enfin mes tableau qui utilisent ces données:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
        smallImpressionType: [
            {id: 0, type: "", nom: "Noir et Blanc A4 par nos soins", prix: 0.045},
            {id: 1, type: "", nom: "Noir et Blanc A3 par nos soins", prix: 0.09},
            {id: 2, type: "", nom: "Noir et Blanc Impression internet", prix: 0.04},
            {id: 3, type: "", nom: "Couleur A4", prix: 0.25},
            {id: 4, type: "", nom: "Couleur A3", prix: 0.50},
        ],
 
        largeImpressionType: [
            {id: 0, type: "", nom: "Non Graphique 80gr A2", prix: 2.00},
            {id: 1, type: "", nom: "Graphique 120gr A2", prix: 6.00},
            {id: 2, type: "", nom: "Graphique 260gr A2", prix: 12.00},
            {id: 3, type: "", nom: "Non Graphique 80gr A1", prix: 3.00},
            {id: 4, type: "", nom: "Graphique 120gr A1", prix: 10.00},
            {id: 5, type: "", nom: "Graphique 260gr A1", prix: 20.00},
            {id: 6, type: "", nom: "Non Graphique 80gr A0", prix: 4.00},
            {id: 7, type: "", nom: "Graphique 120gr A0", prix: 15.00},
            {id: 8, type: "", nom: "Graphique 260gr A0", prix: 30.00},
        ],

Pour ces données-ci, j'arrive en faite à obtenir un retour avec le nom(en mettant dans mon :value un .nom) mais alors mon calcul ne se réalise plus. Et si je met un id dans mon :value, j'obtient alors juste l'id à la place du nom. Et lorsque j'essaye avec le stringify, je récupère toutes les données mais mon calcul ne veut de nouveau plus se faire.

Voici également la ligne du calcul ou j'utilise un de mes select(ici this.order.checked.prix):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

globalPrice += (Number(this.order.checked.prix * this.order.pagesNumber) * this.order.numberEx);

Je vous remercie d'avance !

**mathieu** · 22/03/2021, 10h27

est ce que c'est le code php qui génère ce code vuejs ?

**sisi001** · 22/03/2021, 10h31

Le php ne sert qu'à envoyer de mail, le reste étant fait en html, css et Vue

**mathieu** · 22/03/2021, 10h46

ce qui se fait habituellement quand il y a des échanges de données entre le serveur et la navigateur, c'est que les données sont stockées à part côté serveur et le formulaire est généré comme cela par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<?php
 
$feuille_PHP = [
    [
        "id" => 1,
        "type" => "2 feuilles",
        "nom" => "2 feuilles par page l'une en dessous de l'autre",
    ],
    [
        "id" => 2,
        "type" => "2 feuilles",
        "nom" => "2 feuilles par page l'un à côté de l'autre",
    ],
    
    
];
 
 
?>
 
<script>
let feuilles = <?php echo json_encode($feuille_PHP);?>
 
console.log(feuilles);
console.log(feuilles[1]["nom"]);
 
</script>

ensuite le formulaire envoie l'identifiant de l'élément et le script en PHP calcule le prix.

le problème si le prix est envoyé par le formulaire est que l'utilisateur peut modifier le prix envoyé au script PHP et donc vous aurez des données incohérentes.

Envoi d’un mail a partir de php/Vuejs

VueJS

Vue hybride

Discussions similaires

Partager

Partager