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 !