IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Récupération données menu déroulant JavaScript dans requête MySql


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Homme Profil pro
    Technicien réseaux et télécoms
    Inscrit en
    Juillet 2011
    Messages
    21
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Technicien réseaux et télécoms

    Informations forums :
    Inscription : Juillet 2011
    Messages : 21
    Par défaut Récupération données menu déroulant JavaScript dans requête MySql
    Bonjour à toutes et tous !

    Tout d'abord je vous présente mes excuses pour vous demander de l'aide. En effet, je plante comme un gros débutant sur 2 problèmes qui, une fois réglés me permettront de travailler sur d'autres sujets dont j'ai plus la maitrise. Et je n'ai vraiment pas le temps d'étudier le JS de fond en comble pour améliorer mon code.

    Je construis moi même mon site pour un projet professionnel. Ce qui implique de connaitre pas mal de codes et de s'investir dans pleins de domaines.. ! (html, php, mysql, traitement d'image, hébergement, domaine, module de paiement, déclaration marque, test pré commercialisation etc etc...). Je tiens à tout maîtriser pour 36 raisons et ne pas succomber à une formule "toute faite" payante sur le net pour un site marchand. s'agissant d'un test sur un marché qui n'existe pas, je veux prendre part à l'ensemble du process de création et de mise en place du projet.

    Bon après vous avoir raconté ma life super intéressante, voici le nœud du problème :

    Sur mon projet de site j'ai une page contact.

    Elle intègre un formulaire, des champs textes, des checkbox, un menu déroulant qui dispose d'un comportement JS qui m'affiche dans la cellule d'à côté le montant correspondant au choix sélectionné.
    2 problèmes :
    - trouver un code qui lance 3 comportements sur le bouton "commande" :
    --- l'exécution de la requête MySql <INSERT> des données du formulaire,
    --- l'envoi d'un mail avec les données du formulaire
    --- une fenêtre d'alerte pour confirmation de l'envoi.
    (mais celà fera l'objet d'un post à part entière).

    Et dans l'objet du présent post : "Récupération données menu déroulant JavaScript dans requête MySql " j'en suis là.. car une fois l'INSERT des données dans PHPMyAdmin, je pourrai m'occuper du bouton "commande" et de ses fonctions.

    DONC ci- après mon code et mes attentes :


    La partie PHP avec la requête SQL pour vous faire connaitre les noms des variables :
    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
    <?php
    // Connexion à MySQL
    $connection=mysqli_connect("localhost", "dede", "1234", "test");
     
    if (!$connection){ // Contrôler la connexion
        $MessageConnection = die ("connection impossible");
    }
    else {
    if( isset($_POST['Bouton'])){ // Autre contrôle pour vérifier si la variable $_POST['Bouton'] est bien définie
     if( isset($nom) || isset($prenom) || isset($email) || isset($commentaire) || isset($quantite) || isset($classique) || isset($original) || isset($CGV) || isset($prix) || isset($date) );
     
     
       $nom=$_POST['nom'];
       $prenom=$_POST['prenom'];
       $email=$_POST['email'] ;
       $commentaire=$_POST['commentaire'];
       $quantite=$_POST['quantite'];
       $classique=$_POST['classique'];	
       $original=$_POST['original'];
       $CGV=$_POST['CGV'];
       $prix=$_POST['prix'];
       $date=$_POST['date'];
     
     
       // Requête d'insertion
      $Ajouterclt="INSERT INTO client 
      (nom, prenom, email, commentaire, quantite, classique, original, CGV, prix, date) 
      VALUES 
      ('$nom', '$prenom', '$email', '$commentaire', '$quantite', '$classique', '$original', '$CGV', '$prix',  CURDATE())";
     
       // Exécution de la reqête
       mysqli_query($connection, $Ajouterclt) or die('Erreur SQL !'.$Ajouterclt.'<br>'.mysqli_error($connection));
     
     
     
     
    }
    }
    ?>


    Puis le code HTML qui intègre mon formulaire et le menu déroulant avec le petit code JS qui pose problème:

    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
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    <legend><b>Projet</b></legend>
    <fieldset>
    <form name="form1" method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?>">
     
     
      <input type="text" name="nom" id="nom" value="Nom" onFocus="if (this.value=='Nom') {this.value=''}" onBlur="if(this.value==''){this.value='Nom';}" required pattern="^[A-Za-z '-]+$">
      <input type="text" name="prenom" id="prenom" value="Prenom" onFocus="if (this.value=='Prenom') {this.value=''}" onBlur="if(this.value==''){this.value='Prenom';}" required pattern="^[A-Za-z '-]+$">
      <br>
      <p>
        <input type="text" name="email" id="email" value="Email" onFocus="if (this.value=='Email') {this.value=''}" onBlur="if(this.value==''){this.value='Email';}" required pattern="^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$">
     
        <br>
      <p>
        <label for="commentaire">Commentaire </label>
        <input type="textarea"    id="commentaire" name="commentaire" value="Commentaire" class="limiter" onFocus="if (this.value=='Commentaire') {this.value=''}" onBlur="if(this.value==''){this.value='Commentaire';}"  >
        <input type="text" id="controle_decompte" name="controle_decompte" value="">
        <script language="Javascript" type="text/javascript"> LimiterTextArea('commentaire', 255, 'controle_decompte');</script> 
        <br>
      <p>
     
     
    // Menu déroulant : J'ai besoin de 2 Variables par lignes : le prix et la quantité.
    // Le prix est dans "value" mais j'ai rien pour la quantité "1 jeu", "2  jeux"...
     
     
     
        <label for="quantite">Quantité</label>
        <select name="quantite" onchange="cal10 (this);">
    <option value="0"></option>
    <option value="5">1 jeu </option>
    <option value="8">2 jeux </option>
    <option value="10">3 jeux </option>
    <option value="12">4 jeux </option>
    </select>
    Total :<span id="prix"></span><p></p>
     
     
    //Le script pompé sur le web et adapté pour le comportement qui affiche le prix en fonction du choix de la quantité
     
    <script>
    function cal10(obj) {
    var valeur = obj.options[obj.selectedIndex].value;
    document.getElementById("prix").innerHTML = valeur;
    }
    </script>
     
    //Reste des champs du formulaire...
     
        <input type="checkbox" id="CGV" name="CGV" value="o" required>
        <label for="CGV"><a href="../CGV.html" target="_new">Conditions Générales de vente</a></label>
      <p>
      <table>
        <caption>
        Quel modèle choisissez vous ?
        Classique ou Original ? Ou les 2 ?
        </caption>
        <tr>
          <th> <img src="../images/exemple2.png" width="192" height="122" alt=""/></th>
          <th> <img src="../images/exemple2.png" width="192" height="122" alt=""/></th>
        </tr>
     
          <td align="center">Classique </td>
          <td align="center">Original</td>
        <tr>
          <td align="center"><input type="hidden" name="classique" value="0" /><input type="checkbox"  name="classique" value="1" /></td>
          <td align="center"><input type="hidden" name="original" value="0" /><input type="checkbox"  name="original" value="1" /></td>
        </tr>
      </table>
      <input type="hidden" name="date" value="">
     
     
    // Le bouton qui lance la requête SQL
      <input type="submit" name="Bouton" value="commande">
    </form>
    </fieldset>

    Alors voilà la problématique :

    Quand l'utilisateur fait le choix pour la quantité, le prix s'affiche.
    Lors de la validation du "Bouton" commande, le prix doit être une variable récupérée et la quantité aussi... Mais je suis tellement nul en programmation, que tout ce que vous voyez c'est du piochage/adaptage (lol) de code trouvé sur le net.. .je sais j'ai honte

    Comment faire pour que, suite au choix de la quantité, le prix s'affichant, les valeurs "prix" et "quantite" soient récupérées par l'exécution de la requête SQL grâce au JS.....

    Je sais que je mélange tout, mais il s'agit bien d'un comportement JS à améliorer, pas de SQL ou PHP qui fonctionnent...

    Encore une fois désolé pour le niveau de débutant mais ça m'aiderait bien de progresser là dessus, j'ai tellement d'autres choses à faire pour ce projet pro... merci d'avance pour vos suggestions... !

    @ Peluche !

  2. #2
    Membre Expert Avatar de darkstar123456
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mars 2008
    Messages
    1 895
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mars 2008
    Messages : 1 895
    Par défaut
    Bonjour,

    Je vous déconseille de vous fier à ce que vous recevez en javascript pour ce qui concerne les valeurs étant donné que les valeurs peuvent être modifiées vie l'inspecteur web avant la soumission du formulaire
    Dès lors, il est très facile d'écrire : prix = 20€ / quantité = 10 / total = 1€

    Il vaut mieux transmettre les ID de produits (si plusieurs produits) ainsi que la quantité respective et (re)calculer les totaux côté serveur avant l'insert en base de données

  3. #3
    Membre averti
    Homme Profil pro
    Technicien réseaux et télécoms
    Inscrit en
    Juillet 2011
    Messages
    21
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Technicien réseaux et télécoms

    Informations forums :
    Inscription : Juillet 2011
    Messages : 21
    Par défaut
    Bonjour et merci pour votre réponse... !

    Effectivement vous avez raison, cette démarche n'est pas sans risques !... mais comme je souhaite faire un test commercial, si d'aventure mon affaire marchait, je solliciterai un pro pour la refonte du site et ainsi prioriser la sécurité.
    Car votre conseil me renvoi à : "merd', je sais encore moins faire..." l

    Maintenant je suis ouvert aux propositions (tant qu'elles ne sont pas indécentes !).

    L'essentiel c'est que l'utilisateur puisse voir qu'en choisissant la quantité, le prix change.
    Ensuite ces 2 infos doivent être POST en tant que $prix et $quantite
    au même titre que les autres variables qui ne sont traitées que par php... mais là j'ai aucun problème.

    Voilaaa et merci encore pour votre contribution !

  4. #4
    Membre Expert Avatar de darkstar123456
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mars 2008
    Messages
    1 895
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mars 2008
    Messages : 1 895
    Par défaut
    J'ai jeté un oeil à votre code... il est loin de ce qu'on appelle "propre"
    De plus, votre manque de connaissance vous forcer à réinventer la roue. Notamment pour le fait d'écrire "Commentaire" dans le champ des commentaires alors qu'un simple attribut placeholder="Commentaire" permet d'arriver au même résultat sans ce compliquer avec plein de code (pareil pour tous les autres champs en fait )

    C'est la même chose qui se traduit dans votre réponse qui rejette totalement mon commentaire alors que ça rend les choses beaucoup plus simple.
    En effet, si on ne doit pas tenir compte de la valeur d'un prix retourné par le formulaire, ça veut dire qu'on ne doit pas faire choses compliquées pour enregistrer la valeur calculée dans un input.

    A la base j'avais pondu tout un texte expliquant pas mal de chose mais en lisant le code je tombe sur des "trucs" par hasard
    et donc, votre code n'est pas loin d'être "correct" (par rapport à ce que vous voulez faire) bien que la façon de faire soit très mauvaise.

    Bref, dans la fonction call10(), sur laquelle je suis tombée par hasard en écrivant ma réponse, vous avez écrit document.getElementById("prix").innerHTML = valeur; alors que c'est document.getElementById("prix").textContent = valeur; qu'il faut utiliser.
    Par contre, la méthode pour arriver à vos fins est assez mauvaise et transporte un hacking possible des données.
    Il devient donc possible de passer commande en choisissant son prix (et en plus, vous ne connaîtrez pas la quantité)


    EDIT : En pas moins de 40min, j'ai fait du nettoyage dans le code et c'était quelque chose !

    J'ai :
    • corrigé l'HTML afin de supprimer la réinvention de l'attribut placeholder
    • viré le <input type="textarea" qui n'existe pas par <textarea; et ça tombe bien, ce dernier possède un attribut maxlength pour limiter le nombre de caractères !
    • fait pas mal de correction dans les balises pcq y'en avait des ouvertes jamais fermées, ainsi que des <br /> mixés avec des <p>
    • réorganisé les champs de façon plus logique => modèles > quantités > CGV et pas CGV > quantités > modèles
    • sorti tout ce qui était javascript de l'HTML (autant des inputs que les <script></script> qui se trouvaient au milieu de tout)
    • fait une mini gestion des erreurs en PHP (il ne faut surtout pas se fier à la valider HTML/Javascript qui peuvent toutes les 2 être bypassées)
    • fait en sorte de n'exécuter la requête que s'il n'y a pas d'erreur (je valide que les champs ne soient pas vides et que l'adresse email soit du bon format. par exemple : mail@domain est valide en HTML5 (pour une raison que j'ignore) mais du coup, on le refuse en PHP)
    • HYPER MEGA IMPORTANT : protéger les valeurs envoyées par le formulaire avant de les mettre dans la requête !!! sinon on peut écrire des injections et avoir accès à toute la base de données !!!



    J'ai sûrement oublié des trucs mais c'est déjà pas mal

    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
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    <?php
     
    function post_value($index, $default = '') {
        $ret = $default;
        if (isset($_POST[$index])) {
            if (is_string($_POST[$index])) {
                $ret = trim($_POST[$index]);
            } else if (is_array($_POST[$index])) {
                array_map('trim', $_POST[$index]);
            }
        }
        return $ret;
    }
     
    $game_price = 35.5;
     
    if (!empty($_POST['action']) && $_POST['action'] === 'submit') {
        $errors = [];
     
        // Validation des champs obligatoires
        $required_fields = ['nom', 'prenom', 'email', 'commentaire', 'quantite', 'modeles', 'CGV', 'date', 'quantite'];
        foreach ($required_fields AS $v) {
            if (empty($v)) {
                $errors[$v] = "empty";
            }
        }
     
        // Validation de l'adresse email
        if (!filter_var(post_value('email'), FILTER_VALIDATE_EMAIL)) {
            $errors['email'] = "invalid";
        }
     
        // Seulement s'il n'y a pas d'erreur, je vais insérer mes données
        if (empty($errors)) {
     
            // ON PROTEGE LES CHAMPS CONTRE LES INJECTIONS
            // C'EST LA BASE ET TRES TRES IMPORTANT
            $nom = mysqli_real_escape_string($connection, post_value('nom'));
            $prenom = mysqli_real_escape_string($connection, post_value('prenom'));
            $email = mysqli_real_escape_string($connection, post_value('email'));
            $commentaire = mysqli_real_escape_string($connection, post_value('commentaire'));
            $quantite = mysqli_real_escape_string($connection, post_value('quantite'));
            $classique = (in_array('classique', post_value('modeles')));
            $original = (in_array('original', post_value('modeles')));
            $CGV = mysqli_real_escape_string($connection, post_value('CGV'));
            $prix = (int) post_value('quantite') * $game_price;
            $date = mysqli_real_escape_string($connection, post_value('date'));
     
            $Ajouterclt = "INSERT INTO client  (nom, prenom, email, commentaire, quantite, classique, original, CGV, prix, date) 
                                VALUES ('$nom', '$prenom', '$email', '$commentaire', '$quantite', '$classique', '$original', '$CGV', '$prix',  NOW())";
     
            echo '<div style="background: green; color: white; padding: 15px;">';
            echo PHP_EOL . '<pre>Pas d\'erreurs dans le formulaire, ici je peux exécuter ma requête : ' . print_r($Ajouterclt, true) . '</pre>' . PHP_EOL;
            echo PHP_EOL . '<pre>Prix calculé depuis PHP : ' . print_r($prix, true) . '</pre>' . PHP_EOL;
            echo '</div>';
        } else {
            echo PHP_EOL . '<pre style="background: red; color: white; padding: 15px;">Il existe des erreurs dans le formulaire : ' . print_r($errors, true) . '</pre>' . PHP_EOL;
        }
    }
    ?><legend><b>Projet</b></legend>
    <fieldset>
        <form name="form1" method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?>">
     
     
            <p>
                <input type="text" name="nom" id="nom" placeholder="Nom" value="<?= post_value('nom'); ?>" required pattern="^[A-Za-z '-]+$" />
                <input type="text" name="prenom" id="prenom" placeholder="Prenom" value="<?= post_value('prenom'); ?>" required pattern="^[A-Za-z '-]+$" />
            </p>
            <p>
                <input type="email" name="email" id="email" placeholder="Email" value="<?= post_value('email'); ?>" required />
            </p>
            <p>
                <label for="commentaire">Commentaire </label>
                <br />
                <textarea id="commentaire" name="commentaire" placeholder="Commentaire" class="limiter" maxlength="255" rows="3"><?= post_value('commentaire'); ?></textarea>
                <br />
                <span id="controle_decompte"></span>
            </p>
     
            <table>
                <caption>
                    Quel modèle choisissez vous ?
                    Classique ou Original ? Ou les 2 ?
                </caption>
                <tr>
                    <th> 
                        <label for="modele_1">
                            <img src="../images/exemple2.png" width="192" height="122" alt=""/>
                        </label>
                    </th>
                    <th>
                        <label for="modele_2">
                            <img src="../images/exemple2.png" width="192" height="122" alt=""/>
                        </label>
                    </th>
                </tr>
     
                <td align="center">Classique </td>
                <td align="center">Original</td>
                <tr>
                    <td align="center"><input type="checkbox" id="modele_1"  name="modeles[]" value="classique" <?php if (in_array('classique', post_value('modeles', []))) echo ' checked="checked"'; ?> /></td>
                    <td align="center"><input type="checkbox" id="modele_2"  name="modeles[]" value="original" <?php if (in_array('original', post_value('modeles', []))) echo ' checked="checked"'; ?> /></td>
                </tr>
            </table>
     
            <p>
                <label for="quantite">Quantité</label>
                <select name="quantite" required>
                    <option value="0"></option>
                    <option value="1"<?php if (post_value('quantite') == 1) echo ' selected="selected"'; ?>>1 jeu </option>
                    <option value="2"<?php if (post_value('quantite') == 2) echo ' selected="selected"'; ?>>2 jeux </option>
                    <option value="3"<?php if (post_value('quantite') == 3) echo ' selected="selected"'; ?>>3 jeux </option>
                    <option value="4"<?php if (post_value('quantite') == 4) echo ' selected="selected"'; ?>>4 jeux </option>
                </select>
                - Total : <span id="prix">0</span>€
            </p>
     
            <p>
                <input type="checkbox" id="CGV" name="CGV" value="o" required>
                <label for="CGV">J'accepete les <a href="../CGV.html" target="_blank">Conditions Générales de vente</a></label>
            </p>
     
            <p>
                <input type="hidden" name="date" value="">
                <input type="hidden" name="action" value="submit" />
                <input type="submit" name="Bouton" value="commande">
            </p>
        </form>
    </fieldset>
     
    <script>
        /**
         * Calcule le montant total par rapport au prix général du produit et à la quantité sélectionnée
         */
        var price = <?= $game_price; ?>;
        function calculateTotal() {
            var total = 0;
            var qty = document.querySelector('[name="quantite"]').value;
            if (qty > 0) {
                total = parseInt(qty) * price;
            }
            document.querySelector('#prix').textContent = total;
        }
     
        /**
         * Affiche le nombre de caractères restants, basés sur l'attribut maxlength du textarea
         */
        function calculateCharactersLeft() {
            var $el = document.querySelector('.limiter');
            var maxlength = $el.getAttribute('maxlength');
            var length_left = maxlength - $el.value.length;
            document.querySelector('#controle_decompte').textContent = length_left + " caractère(s) restant(s)";
        }
     
        window.onload = function () {
     
            document.querySelector('.limiter').addEventListener('keyup', calculateCharactersLeft); // Pour exécuter la fonction à chaque "keyup"
            calculateCharactersLeft(); // Pour exécuter la fonction dès le chargement de la page
     
            document.querySelector('[name="quantite"]').addEventListener('change', calculateTotal); // Pour exécuter la fonction à chaque changement de sélection
            calculateTotal(); // Pour exécuter la fonction dès le chargement de la page
        }
    </script>

  5. #5
    Membre averti
    Homme Profil pro
    Technicien réseaux et télécoms
    Inscrit en
    Juillet 2011
    Messages
    21
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Technicien réseaux et télécoms

    Informations forums :
    Inscription : Juillet 2011
    Messages : 21
    Par défaut
    Hé Bien darkstar, j'avoue que tu me clous sur place.. quel travail !!! (copié collé vite fait sur une page dans le navigateur.. woa)
    Il faut que je re bosse sur ma base car aujourd'hui j'ai fait des modifs en tentant de solutionner mes problèmes. Mais face à la montagne que tu as abattu.. ! je suis admiratif !

    A 1ere vue pour le prix c'est pas ça mais c'est normal tu savais pas. Je propose la réservation de 4 jeux :
    5€ "1 lot de 2" ou
    8€ "2 lots de 2" ou
    10€ "3 lots de 2" ou
    12€ "4 lots de 2"


    Oui je suis mauvais pour le codage. J'ai étudié le html php mysql y a 20 ans. Et aucune pratique depuis. Donc je nage .. lol
    J'ai beaucoup de retard culturel dans ce domaine.

    Merci énormément pour cette page de code que je m'empresserai de consulter demain.

    Au cas où je reviens me plaindre.. ! hihi

  6. #6
    Membre Expert Avatar de darkstar123456
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mars 2008
    Messages
    1 895
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Mars 2008
    Messages : 1 895
    Par défaut
    Hello,

    Avec ces informations supplémentaires, voici une update de mon code.

    Mais avant, les explications quant aux changements !

    1. J'ai changé la définition de $game_price (qui s'appelle maintenant $prices) en un tableau comprenant les différents prix et leur label qu'on va utiliser pour construire automatiquement le select.
    De cette façon, on garde de la cohérence partout sur la page
    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
    <?php
    $prices = [
        1 => [
            "label" => "1 lot de 2 jeux",
            "price" => 5,
        ],
        2 => [
            "label" => "2 lots de 2 jeux",
            "price" => 8,
        ],
        3 => [
            "label" => "3 lots de 2 jeux",
            "price" => 10,
        ],
        4 => [
            "label" => "4 lots de 2 jeux",
            "price" => 12,
        ],
    ];

    2. On construit maintenant le select de façon automatique, basé sur le tableau plutôt que de toute faire à la main :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    <select name="quantite" required>
        <option value="0"></option>
        <?php foreach ($prices AS $k => $v) : ?>
            <option value="<?= $k; ?>"<?php if (post_value('quantite') == $k) echo ' selected="selected"'; ?>><?= $v['label']; ?></option>
        <?php endforeach; ?>
    </select>
    3. On a changé le format de nos prix, il faut donc le mettre à jour également dans la partie JavaScript :
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    var prices = <?= json_encode($prices); ?>;

    4. Vu que le format a changé, le calcul du total change lui aussi : au lieu d'utiliser la valeur price directement, on doit la "trouver" via l'index du tableau des prix. En effet, notre select affiche l'index de chaque ligne qu'on va récupérer ici
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    function calculateTotal() {
        var total = 0;
        var qty = document.querySelector('[name="quantite"]').value;
        if (qty > 0 && prices[document.querySelector('[name="quantite"]').value]) {
            var price = prices[document.querySelector('[name="quantite"]').value].price;
            total = parseInt(qty) * parseFloat(price);
        }
        document.querySelector('#prix').textContent = total;
    }

    5. Enfin, pour le calcul côté PHP on doit également changer la méthode comme en JS pour trouver le prix par rapport à l'index du tableau des prix sélectionné
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <?php
    $game_price = $prices[post_value('quantite')]['price'];
    $prix = (int) post_value('quantite') * $game_price;

    Le code complet :

    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
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    <?php
     
    function post_value($index, $default = '') {
        $ret = $default;
        if (isset($_POST[$index])) {
            if (is_string($_POST[$index])) {
                $ret = trim($_POST[$index]);
            } else if (is_array($_POST[$index])) {
                array_map('trim', $_POST[$index]);
            }
        }
        return $ret;
    }
     
    $prices = [
        1 => [
            "label" => "1 lot de 2 jeux",
            "price" => 5,
        ],
        2 => [
            "label" => "2 lots de 2 jeux",
            "price" => 8,
        ],
        3 => [
            "label" => "3 lots de 2 jeux",
            "price" => 10,
        ],
        4 => [
            "label" => "4 lots de 2 jeux",
            "price" => 12,
        ],
    ];
     
    if (!empty($_POST['action']) && $_POST['action'] === 'submit') {
        $errors = [];
     
        // Validation des champs obligatoires
        $required_fields = ['nom', 'prenom', 'email', 'commentaire', 'quantite', 'modeles', 'CGV', 'date', 'quantite'];
        foreach ($required_fields AS $v) {
            if (empty($v)) {
                $errors[$v] = "empty";
            }
        }
     
        // Validation de l'adresse email
        if (!filter_var(post_value('email'), FILTER_VALIDATE_EMAIL)) {
            $errors['email'] = "invalid";
        }
     
        // Seulement s'il n'y a pas d'erreur, je vais insérer mes données
        if (empty($errors)) {
     
            // ON PROTEGE LES CHAMPS CONTRE LES INJECTIONS
            // C'EST LA BASE ET TRES TRES IMPORTANT
            $nom = mysqli_real_escape_string($connection, post_value('nom'));
            $prenom = mysqli_real_escape_string($connection, post_value('prenom'));
            $email = mysqli_real_escape_string($connection, post_value('email'));
            $commentaire = mysqli_real_escape_string($connection, post_value('commentaire'));
            $quantite = mysqli_real_escape_string($connection, post_value('quantite'));
            $classique = (in_array('classique', post_value('modeles')));
            $original = (in_array('original', post_value('modeles')));
            $CGV = mysqli_real_escape_string($connection, post_value('CGV'));
            $game_price = $prices[post_value('quantite')]['price'];
            $prix = (int) post_value('quantite') * $game_price;
            $date = mysqli_real_escape_string($connection, post_value('date'));
     
            $Ajouterclt = "INSERT INTO client  (nom, prenom, email, commentaire, quantite, classique, original, CGV, prix, date) 
                                VALUES ('$nom', '$prenom', '$email', '$commentaire', '$quantite', '$classique', '$original', '$CGV', '$prix',  NOW())";
     
            echo '<div style="background: green; color: white; padding: 15px;">';
            echo PHP_EOL . '<pre>Pas d\'erreurs dans le formulaire, ici je peux exécuter ma requête : ' . print_r($Ajouterclt, true) . '</pre>' . PHP_EOL;
            echo PHP_EOL . '<pre>Prix calculé depuis PHP : ' . print_r($prix, true) . '</pre>' . PHP_EOL;
            echo '</div>';
        } else {
            echo PHP_EOL . '<pre style="background: red; color: white; padding: 15px;">Il existe des erreurs dans le formulaire : ' . print_r($errors, true) . '</pre>' . PHP_EOL;
        }
    }
    ?><legend><b>Projet</b></legend>
    <fieldset>
        <form name="form1" method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?>">
     
     
            <p>
                <input type="text" name="nom" id="nom" placeholder="Nom" value="<?= post_value('nom'); ?>" required pattern="^[A-Za-z '-]+$" />
                <input type="text" name="prenom" id="prenom" placeholder="Prenom" value="<?= post_value('prenom'); ?>" required pattern="^[A-Za-z '-]+$" />
            </p>
            <p>
                <input type="email" name="email" id="email" placeholder="Email" value="<?= post_value('email'); ?>" required />
            </p>
            <p>
                <label for="commentaire">Commentaire </label>
                <br />
                <textarea id="commentaire" name="commentaire" placeholder="Commentaire" class="limiter" maxlength="255" rows="3"><?= post_value('commentaire'); ?></textarea>
                <br />
                <span id="controle_decompte"></span>
            </p>
     
            <table>
                <caption>
                    Quel modèle choisissez vous ?
                    Classique ou Original ? Ou les 2 ?
                </caption>
                <tr>
                    <th> 
                        <label for="modele_1">
                            <img src="../images/exemple2.png" width="192" height="122" alt=""/>
                        </label>
                    </th>
                    <th>
                        <label for="modele_2">
                            <img src="../images/exemple2.png" width="192" height="122" alt=""/>
                        </label>
                    </th>
                </tr>
     
                <td align="center">Classique </td>
                <td align="center">Original</td>
                <tr>
                    <td align="center"><input type="checkbox" id="modele_1"  name="modeles[]" value="classique" <?php if (in_array('classique', post_value('modeles', []))) echo ' checked="checked"'; ?> /></td>
                    <td align="center"><input type="checkbox" id="modele_2"  name="modeles[]" value="original" <?php if (in_array('original', post_value('modeles', []))) echo ' checked="checked"'; ?> /></td>
                </tr>
            </table>
     
            <p>
                <label for="quantite">Quantité</label>
                <select name="quantite" required>
                    <option value="0"></option>
                    <?php foreach ($prices AS $k => $v) : ?>
                        <option value="<?= $k; ?>"<?php if (post_value('quantite') == $k) echo ' selected="selected"'; ?>><?= $v['label']; ?></option>
                    <?php endforeach; ?>
                </select>
                - Total : <span id="prix">0</span>€
            </p>
     
            <p>
                <input type="checkbox" id="CGV" name="CGV" value="o" required>
                <label for="CGV">J'accepete les <a href="../CGV.html" target="_blank">Conditions Générales de vente</a></label>
            </p>
     
            <p>
                <input type="hidden" name="date" value="">
                <input type="hidden" name="action" value="submit" />
                <input type="submit" name="Bouton" value="commande">
            </p>
        </form>
    </fieldset>
     
    <script>
        /**
         * Calcule le montant total par rapport au prix général du produit et à la quantité sélectionnée
         */
        var prices = <?= json_encode($prices); ?>;
        function calculateTotal() {
            var total = 0;
            var qty = document.querySelector('[name="quantite"]').value;
            if (qty > 0 && prices[document.querySelector('[name="quantite"]').value]) {
                var price = prices[document.querySelector('[name="quantite"]').value].price;
                total = parseInt(qty) * parseFloat(price);
            }
            document.querySelector('#prix').textContent = total;
        }
     
        /**
         * Affiche le nombre de caractères restants, basés sur l'attribut maxlength du textarea
         */
        function calculateCharactersLeft() {
            var $el = document.querySelector('.limiter');
            var maxlength = $el.getAttribute('maxlength');
            var length_left = maxlength - $el.value.length;
            document.querySelector('#controle_decompte').textContent = length_left + " caractère(s) restant(s)";
        }
     
        window.onload = function () {
     
            document.querySelector('.limiter').addEventListener('keyup', calculateCharactersLeft); // Pour exécuter la fonction à chaque "keyup"
            calculateCharactersLeft(); // Pour exécuter la fonction dès le chargement de la page
     
            document.querySelector('[name="quantite"]').addEventListener('change', calculateTotal); // Pour exécuter la fonction à chaque changement de sélection
            calculateTotal(); // Pour exécuter la fonction dès le chargement de la page
        }
    </script>

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Requête : données menu déroulant
    Par CaPiT dans le forum Requêtes et SQL.
    Réponses: 0
    Dernier message: 07/01/2008, 11h59
  2. [Access] Requête : données menu déroulant
    Par mulanzia2003 dans le forum Requêtes et SQL.
    Réponses: 17
    Dernier message: 02/08/2007, 13h29
  3. Réponses: 1
    Dernier message: 07/08/2006, 10h22
  4. [PHP-JS] Liste déroulante + Javascript + Php et Mysql : Besoin d'aide
    Par vampyrx dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 19/03/2006, 01h40
  5. date dans requête mysql
    Par camflex dans le forum Langage SQL
    Réponses: 1
    Dernier message: 16/11/2005, 12h29

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo