Création d'un formulaire adaptatif

**stfiston** · 07/05/2017, 19h55

Bonjour,
Je suis entrain de coder un formulaire pour mon association permettant de s'inscrire aux différentes courses organisées dans la région.
Je demande de choisir le nom, prénom, le nom de la course et la distance.
Je voudrai que les infos du <SELECT> distance s'adapte en fonction de la course choisie mais là ça dépasse mes compétences.
Je possède une base avec 3 tables:

Une table avec la liste des licencié du club:
id / nom / prenom / licence / email

Une table avec la liste des courses:
id / nom_course / distance1 / distance2 / distance3

Une d'inscription aux courses:
idi / id_nom / id_course / distance / date_ins

Pour la dernière table id_nom => id table licencié et id_course => id table courses.
je vais rechercher les infos nom prenom course du formulaire dans les différentes table.

Voici le code du formulaire:

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
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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"> <!-- encodage avec plus de charactere pour avoir correctement les accents -->
        <link href="styles.css" rel="stylesheet">
        <title>Vaudes Animation Courir (VAC), </title>
    </head>
    <body style="background: none;">
    <?php
/*connexion base */
        require('connect_db.php');
    ?>
        <div id="body1">
        <div style="background-color: #575757; border: solid 2px; border-color: #fc6000; width: 450px; padding-bottom: 20px; padding-left: 20px; padding-right: 20px; font-size: 18px; color: #E8E8E8;">
            <p style="color: #E8E8E8;">Remplissez tous les champs afin de vous inscrire à une course.<br>Pour info, les inscriptions aux courses se terminent 3 jours avant le début de celles-ci.<br>(Il est possible de s'inscrire le jour de la course auprès de l’organisateur)</p>
            <form method=POST  enctype="multipart/form-data" action="" onsubmit="return verifForm(this)">
 
                <!-- selecteur nom -->
                <select id="id_nom" name="id_nom" placeholder="" style="width: 450px; height: 40px;" onblur="verifIdnom(this)">
 
            <?php
                $req = $bdd->query('SELECT * FROM licencies ORDER BY nom') or die(print_r($bdd->errorInfo()));
            ?>
                    <Option value="Nom du coureur">Nom du coureur</Option>
            <?php
                while($row = $req->fetch()) 
                {
                ?>
                    <Option value="<?php echo $row['id'];?>"><?php echo $row['nom']; echo " "; echo $row['prenom'];?>
                    </Option>
                <?php
                }
                ?>
                </select>
                <br>
 
                <!-- selecteur course -->
                <select id="course" name="course" placeholder="*Nom de la course" style="width: 450px; height: 40px;" onblur="verifCourse(this)">
            <?php
                $req = $bdd->query('SELECT * FROM courses ORDER BY nom_course') or die(print_r($bdd->errorInfo()));
            ?>
                    <Option value="Nom de la course">Nom de la course</Option>
            <?php
                while($row = $req->fetch()) 
                {
                ?>
                    <Option value="<?php echo $row['id'];?>"><?php echo $row['nom_course'];?>
                    </Option>
                <?php
                }
            ?>        
                </select>
                <br>
                <!-- c'est ici que je voudrai faire soit une liste déroulante soit un choix multiple au plus simple -->
                <label for="distance"></label>
                <input id="distance" type="number" name="distance" placeholder="*Distance en km" style="width: 437px;" onblur="verifDistance(this)">
                <br>
                <input type="submit" value="VALIDER" style="width: 450px; font-weight: bold; background-color: #fc6000; height: 40px; color: #575757;">
                <br>
            </form>        
        </div>
        </div>
 
            <!-- vérification de remplissage du formulaire -->
        <script>
            function surligne(champ, erreur)
            {
                if(erreur)
                    champ.style.backgroundColor = "#fba";
                else
                    champ.style.backgroundColor = "";
            }
            function verifIdnom(champ)
            {
                if(champ.value == "Nom du coureur" )
                {
                    surligne(champ, true);
                    return false;
                }
                else
                {
                surligne(champ, false);
                return true;
                }
            }
              function verifCourse(champ)
            {
                if(champ.value == "Nom de la course")
                {
                    surligne(champ, true);
                    return false;
                }
                else
                {
                surligne(champ, false);
                return true;
                }
            }
            function verifDistance(champ)
            {
                if(champ.value.length < 1 )
                {
                    surligne(champ, true);
                    return false;
                }
                else
                {
                surligne(champ, false);
                return true;
                }
            }
            function verifForm(f)
            {
                var id_nomOk = verifIdnom(f.id_nom);
                var courseOk = verifCourse(f.course);
                var distanceOk = verifDistance(f.distance);
 
                if(id_nomOk && courseOk && distanceOk)
                    return true;
                else 
                {
                    alert("Veuillez remplir correctement tous les champs");
                    return false;
                }
            }
        </script>
 
        <?php     
            /*code envoie ds base table inscription_membre */
            $id_nom = $_POST['id_nom'];
            $course = $_POST['nom_course'];
            $distance = $_POST['distance'];
 
            $req = $bdd->prepare('INSERT INTO inscription_membre(id_nom, course, distance, date_ins) VALUES(:id_nom,  :course, :distance, NOW() )') or die(print_r($bdd->errorInfo()));
            $req->execute(array(
                'id_nom' => $id_nom,
                'course' => $course,
                'distance' => $distance,
                ));
 
            /*code envoie d'email */
            $reqmail = $bdd->query('SELECT * FROM licencies l RIGHT JOIN inscription_membre i ON (i.id_nom) = (l.id) ORDER BY idi DESC LIMIT 0, 1') or die(print_r($bdd->errorInfo()));
            while($row = $reqmail->fetch())
                {  
                $licence = $row['licence'];
                $email = $row['email'];
                $prenom = $row['prenom'];
                $nom = $row['nom'];
                }
 
            $message = "$prenom $nom, no de licence: $licence, s'inscrit à la course $course sur la distance de $distance km";
            $message2 = "$prenom $nom,\r\nVotre inscription à la course $course sur la distance de $distance km va être traitée.\r\nCordialement,\r\nLe VAC";
 
            $to = "Vac10260@gmail.com";
            $to2 = "$email";
            $objet = "Inscription à une course"; //Met l'objet que tu veux
            $objet2 = "Validation d'inscription";
 
            // En-têtes de l'e-mail
            $headers = "From: $email \r\n\r\n";
            $headers2 = "From: VAC \r\n\r\n";
 
            //Envoi de l'e-mail
            //mail($to, $objet, $message, $headers);
            mail($to2, $objet2, $message2, $headers2);
           ?>
 
    </body>
 
</html>

Voila j’espère que j'ai été clair.
Merci d'avance pour le coup de main.

**badaze** · 07/05/2017, 21h28

Tu devrais mettre une information au niveau de la course qui indique que la course est passée car tel que c'est fait tu proposeras toujours toutes les courses, même celles qui sont terminées.

Une bonne pratique consiste aussi à faire les contrôles côté php pour éviter qu'une personne mal intentionnée envoie n'importe quoi.

Pour le chargement de la select des distances tu peux (dois) utiliser ajax pour sélectionner les données distances de la course à partir de la valeur de la course. J'essaierai de poster un petit exemple.

**badaze** · 07/05/2017, 21h58

Voici un exemple.

Etat initial
Nom : 20170507_001.jpg
Affichages : 570
Taille : 11,0 Ko

Je sélectionne Rossi.
Nom : 20170507_002.jpg
Affichages : 568
Taille : 6,9 Ko

Ca me ramène ses dates.

Nom : 20170507_003.jpg
Affichages : 570
Taille : 6,8 Ko

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
 
<?php
 $pdo    = new PDO('mysql:host=127.0.0.1; dbname=tests','root','', array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION));
 
 $query  = "SELECT distinct nome FROM tab order by nome ";
 $sth    = $pdo->prepare($query);
 $sth->execute();  
 $result = $sth->fetchAll(); 
?>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script>
function changement(uneValeur) {
 // remise à "blanc" du second select
 document.getElementById('sel02').innerHTML = "";
 if (uneValeur=="0") {
  return;
 }
 
 $.ajax({
      url      : 'test9238b.php',
      type     : 'POST',
      data     : {'nom':uneValeur}, 
   success:function(data){
    document.getElementById('sel02').innerHTML = data;
      },
   error:function(message){
    uneLigne.style.backgroundColor = "red";
          alert( "Erreur: " + message.statusText );
      }
    });
}
</script>
</head>
<body>
Nom : 
<select id="sel01" onchange="changement(this.value);">
    <option value="0">Sélectionner une option</option><?php
 foreach($result as $subArray) {?>
 <option value="<?php print $subArray['nome']; ?>"><?php print $subArray['nome']; ?></option><?php
 }?>
</select>
<br/>
Date :
<select id="sel02">
</select>
</body>
</html>

test9238b.php

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
 
<?php
 // pour les besoins de l'exemple, je ne contrôle pas la donnée.
 $nom    = $_POST['nom'];
 $pdo    = new PDO('mysql:host=127.0.0.1; dbname=tests','root','', array(PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION));
 
 $query  = "SELECT data FROM tab where nome='$nom' order by data ";
 $sth    = $pdo->prepare($query);
 $sth->execute();  
 $result = $sth->fetchAll(); 
 // Données qui sont renvoyées
 foreach($result as $subArray) {?>
 <option value="<?php print $subArray['data']; ?>"><?php print $subArray['data']; ?></option><?php
 }?>

**stfiston** · 07/05/2017, 22h08

Envoyé par badaze

Tu devrais mettre une information au niveau de la course qui indique que la course est passée car tel que c'est fait tu proposeras toujours toutes les courses, même celles qui sont terminées.

Une bonne pratique consiste aussi à faire les contrôles côté php pour éviter qu'une personne mal intentionnée envoie n'importe quoi.

Pour le chargement de la select des distances tu peux (dois) utiliser ajax pour sélectionner les données distances de la course à partir de la valeur de la course. J'essaierai de poster un petit exemple.

Merci badaze je ne suis pas intéressé par le fait d'indiquer qu'une course est passée car se sont les mêmes tous les ans et il n'y en a qu'une 20ène. De plus ce n'est pas moi qui va profiter des résultats du formulaire et ces personnes ne sont pas à l'aise avec l'informatique et je ne voudrait pas ajouter de maintenance sur les bases.

Pour les contrôles php je suis conscient que mon code n'est pas protégé mais ce formulaire n'est accessible qu'aux licenciés et est protégé en accès par mot de passe, donc normalement il ne devrait pas y avoir de problème.

Pour Ajax j'ai trouvé 2-3 truc sur le net mais je ne connaît pas ce langage et j'y comprend rien comme j'ai dis ci dessus c'est au dessus de mes compétences, déjà que je suis assez légé sur le codage en général.