Merci pour le code.
Voir discussion Ajouter des champs dynamiquement.
Je suis débutant en javascript, comment avoir une mise en page horizontale : champ1 - champ 2 - champ 3 - champ 4 - ajout - suppression J'espère ne pas abuser. Merci
Merci pour le code.
Voir discussion Ajouter des champs dynamiquement.
Je suis débutant en javascript, comment avoir une mise en page horizontale : champ1 - champ 2 - champ 3 - champ 4 - ajout - suppression J'espère ne pas abuser. Merci
Bonjour,
Je ne suis pas certain d'avoir bien compris la question posée. Que pensez-vous du code ci-dessous?
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 <!DOCTYPE html> <html> <head> <style> .flex { display: flex; } .flex > div { padding: 1em; flex: 1 1 auto; width: 25%; transition: width 0.7s; } .flex > div:nth-child(1) { background: #a3a; } .flex > div:nth-child(2) { background: #3a3; } .flex > div:nth-child(3) { background: #aa3; } .flex > div:nth-child(4) { background: #33a; } .flex > div:hover { width: 70%; } </style> </head> <body> <div class="flex"><div>Un</div><div>Deux</div><div>Trois</div><div>Quatre</div> </div> </body> </html>
Bonjour, je dois être plus précis : j'ai besoin que l'internaute puisse saisir un planning de rendez-vous.
Ex :
DATE DUREE POINTAGE REMARQUE
01/01/2018 1h Oui Ras Insérer Suppression
01/02/2018 1h30 Oui Ras Insérer Suppression
01/04/2018 1h Insérer Suppression
01/05/2018 2h Ajout Suppression
SOUMETTRE (pour enregistrer le planning de rendez-vous dans une base mysql)
Insérer : permet d'insérer une ligne de rendez-vous à la ligne en-dessous
Ajout : permet d'ajouter une ligne de rendez-vous à la dernière ligne
Suppression : permet de supprimer une ligne de rendez-vous à condition que le rendez-vous n'est pas eu lieu (pointage != oui)
Le planning de rendez-vous démarre à 0 ligne, l'internaute ajoute, inséré et supprime des lignes de rendez-vous
Bonsoir,
Il vous faut apprendre à manipuler le DOM. Exemple de code :
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 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> function suppr(ligne_a_sup) { ligne_a_sup.parentNode.removeChild(ligne_a_sup); } function ajout(ligne_a_ins) { balise=document.createElement("TR"); balise.innerHTML='<td>Autre ligne</td><td onclick="suppr(this.parentNode);">Sup</td><td onclick="ajout(this.parentNode);">Ins</td>'; ligne_a_ins.parentNode.insertBefore(balise,ligne_a_ins); } </script> </head> <body> <table border="1"> <tr><td>Ligne 1</td><td onclick="suppr(this.parentNode);">Sup</td><td onclick="ajout(this.parentNode);">Ins</td></tr> <tr><td>Ligne 2</td><td onclick="suppr(this.parentNode);">Sup</td><td onclick="ajout(this.parentNode);">Ins</td></tr> <tr><td>Ligne 3</td><td onclick="suppr(this.parentNode);">Sup</td><td onclick="ajout(this.parentNode);">Ins</td></tr> <tr><td>Ligne 4</td><td onclick="suppr(this.parentNode);">Sup</td><td onclick="ajout(this.parentNode);">Ins</td></tr> <tr><td>Ligne 5</td><td onclick="suppr(this.parentNode);">Sup</td><td onclick="ajout(this.parentNode);">Ins</td></tr> </table> </body> </html>
Bonsoir,
Effectivement, j'ai beaucoup de mal avec le DOM.
J'ai avancé à partir de ton code en ajoutant la récupération des données saisies dans des tableaux, j'ai mis le code en pièce jointe : je ne trouve pas comment le mettre dans une fenêtre comme toi.
Il me reste un problème : dans un planning, il y aura des nouvelles lignes de rendez-vous et des anciennes lignes du planning déjà sauvées dans la table mysql, donc possédant un Id. Lorsque l'internaute supprime une nouvelle ligne qu'il vient de créer, c'est bon. Lorsque l'internaute supprime une ligne déjà existante dans la table, je dois après validation du formulaire supprimer la ligne de rendez-vous dans la table des rendez-vous à partir de son Id. L'idée est d'ajouter un input caché par ligne avec son Id s'il existe, et de le récupérer lors de la suppression de la ligne pour traitement ultérieur. Mais je cale
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 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> function suppr(ligne_a_sup) { ligne_a_sup.parentNode.removeChild(ligne_a_sup); } function ajout(ligne_a_ins) { balise=document.createElement("TR"); balise.innerHTML='<td><input type="text" name="date[]" /></td>'; balise.innerHTML+='<td><input type="text" name="heure[]" /></td>'; balise.innerHTML+='<td><input type="text" name="duree[]" /></td>'; balise.innerHTML+='<td style="text-align: center;"><select name="pointage_stg[]" ><option value="oui">Oui</option><option value="non">Non</option></select></td>'; balise.innerHTML+='<td><input type="text" name="remarque_stg[]" /></td>'; balise.innerHTML+='<td style="text-align: center;"><select name="pointage_formateur[]" ><option value="oui">Oui</option><option value="non">Non</option></select></td>'; balise.innerHTML+='<td><input type="text" name="remarque_formateur[]" /></td>'; balise.innerHTML+='<td onclick="suppr(this.parentNode);">Supprimer</td>'; balise.innerHTML+='<td onclick="ajout(this.parentNode);">Insérer</td>'; ligne_a_ins.parentNode.insertBefore(balise,ligne_a_ins); } </script> </head> <?php if (isset($_POST["valide"])) { var_dump($_POST); } else { echo ' <body> <form method="post" action="formulaire_dynamique_forum.php" name="formulaire"> <table border="1"> <tr><td>DATE</td><td>HEURE</td><td>DURÉE</td><td>POINTAGE STAGIAIRE</td><td>REMARQUE STAGIAIRE</td><td>POINTAGE FORMATEUR</td><td>REMARQUE FORMATEUR</td></td> <tr><td> <input type="text" name="date[]"/></td><td><input type="text" name="heure[]" /></td><td><input type="text" name="duree[]" /></td> <td style="text-align: center;"><select name="pointage_stg[]" > <option value="oui">Oui</option> <option value="non">Non</option></select></td><td><input type="text" name="remarque_stg[]" /></td> <td style="text-align: center;"><select name="pointage_formateur[]" ><option value="non">Non</option><option value="oui">Oui</option></select></td><td><input type="text" name="remarque_formateur[]" /></td> <td onclick="suppr(this.parentNode);">Supprimer</td><td onclick="ajout(this.parentNode);">Insérer</td></tr> <tr><td> <input type="text" name="date[]" /></td><td><input type="text" name="heure[]" /></td><td><input type="text" name="duree[]" /></td> <td style="text-align: center;"><select name="pointage_stg[]" > <option value="oui">Oui</option> <option value="non">Non</option></select></td></td><td><input type="text" name="remarque_stg[]" /></td> <td style="text-align: center;"><select name="pointage_formateur[]" ><option value="oui">Oui</option><option value="non">Non</option></select></td><td><input type="text" name="remarque_formateur[]" /></td> <td onclick="suppr(this.parentNode);">Supprimer</td><td onclick="ajout(this.parentNode);">Insérer</td></tr> <tr><td> <input type="text" name="date[]" /></td><td><input type="text" name="heure[]" /></td><td><input type="text" name="duree[]" /></td> <td style="text-align: center;"><select name="pointage_stg[]" > <option value="oui">Oui</option> <option value="non">Non</option></select></td><td><input type="text" name="remarque_stg[]" /></td> <td style="text-align: center;"><select name="pointage_formateur[]" ><option value="oui">Oui</option><option value="non">Non</option></select></td><td><input type="text" name="remarque_formateur[]" /></td> <td onclick="suppr(this.parentNode");">Supprimer</td><td onclick="ajout(this.parentNode);">Insérer</td></tr> <tr><td> <input type="text" name="date[]" /></td><td><input type="text" name="heure[]" /></td><td><input type="text" name="duree[]" /></td> <td style="text-align: center;"><select name="pointage_stg[]" > <option value="oui">Oui</option> <option value="non">Non</option></select></td><td><input type="text" name="remarque_stg[]" /></td> <td style="text-align: center;"><select name="pointage_formateur[]" ><option value="oui">Oui</option><option value="non">Non</option></select></td><td><input type="text" name="remarque_formateur[]" /></td> <td onclick="suppr(this.parentNode);">Supprimer</td><td onclick="ajout(this.parentNode);">Insérer</td></tr> <tr><td> <input type="text" name="date[]" /></td><td><input type="text" name="heure[]" /></td><td><input type="text" name="duree[]" /></td> <td style="text-align: center;"><select name="pointage_stg[]" > <option value="non">Non</option> <option value="oui">Oui</option></select></td><td><input type="text" name="remarque_stg[]" /></td> <td style="text-align: center;"><select name="pointage_formateur[]" ><option value="oui">Oui</option><option value="non">Non</option></select><td><input type="text" name="remarque_formateur[]" /></td> <td onclick="suppr(this.parentNode);">Supprimer</td><td onclick="ajout(this.parentNode);">Insérer</td></tr> </table> <button type="submit" value="envoyer" name="valide"><img src="img9.png" alt="valider" height="25" width="25" /></button> </form>'; } ?> </body> </html>
Bonsoir,
Le projet suivant semble ressembler à ce que tu programmes :
http://cherbe.free.fr/cyber_agenda.html
C'est un projet très ancien, il faudra adapter et rafraîchir le code. Il présente l'avantage d'être assez simple à comprendre.
Bonjour,
J'ai trouvé une solution facile,
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
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 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> function suppr(ligne_a_sup) { ligne_a_sup.parentNode.removeChild(ligne_a_sup); } function ajout(ligne_a_ins) { balise=document.createElement("TR"); balise.innerHTML='<td><input type="text" name="date[]" /></td>'; balise.innerHTML+='<td><input type="text" name="heure[]" /></td>'; balise.innerHTML+='<td><input type="text" name="duree[]" /></td>'; balise.innerHTML+='<td style="text-align: center;"><select name="pointage_stg[]" ><option value="oui">Oui</option><option value="non">Non</option></select></td>'; balise.innerHTML+='<td><input type="text" name="remarque_stg[]" /></td>'; balise.innerHTML+='<td style="text-align: center;"><select name="pointage_formateur[]" ><option value="oui">Oui</option><option value="non">Non</option></select></td>'; balise.innerHTML+='<td><input type="text" name="remarque_formateur[]" /></td>'; balise.innerHTML+='<td><input type="hidden" name="id_table[]" value=0 /></td>'; balise.innerHTML+='<td onclick="suppr(this.parentNode);">Supprimer</td>'; balise.innerHTML+='<td onclick="ajout(this.parentNode);">Insérer</td>'; ligne_a_ins.parentNode.insertBefore(balise,ligne_a_ins); } </script> </head> <?php if (isset($_POST["valide"])) { // traitement du formulaire saisi var_dump($_POST); $list_id_initiaux = explode("-", $_POST["id_table_des_rendez_vous"]); // mise en tableau de la chaîne de caractères comportant les id de la table des rendez-vous echo 'tableau des id initiaux'; var_dump($list_id_initiaux); /* - les lignes de rendez-vous avec un id = 0 dans id_table[] sont des nouveaux rendez-vous à créer dans la table des rendez-vous - les lignes de rendez-vous avec un id > 0 dans id_table[] sont des rendez-vous qui existaient déjà dans la table des rendez-vous, et sont donc à mettre à jour dans cette table. - les id existant dans $list_id_initiaux et n'existant plus dans id_table[], ont été supprimés du planning, et sont donc à supprimer de la table des rendez-vous */ } else { // création de la liste des id correspondant à chaque ligne de rendez-vous déjà existante dans la table des rendez-vous, suite à l'exécution de la requête de chargement des lignes de rendez-vous déjà existantes // ici établissement d'une liste manuelle pour l'exemple: elle est transmise dans le $_POST en la mettant sous forme cachée dans le formulaire $list_id_table = "125-745-2658-100-5000"; echo ' <body> <form method="post" action="formulaire_dynamique_forum.php" name="formulaire"> <table border="1"> <tr> <td>DATE</td><td>HEURE</td><td>DURÉE</td><td>POINTAGE STAGIAIRE</td><td>REMARQUE STAGIAIRE</td><td>POINTAGE FORMATEUR</td><td>REMARQUE FORMATEUR</td><td></td><td>supp</td><td>ins</td> </tr> <tr> <td> <input type="text" name="date[]"/></td><td><input type="text" name="heure[]" /></td><td><input type="text" name="duree[]" /></td> <td style="text-align: center;"><select name="pointage_stg[]" > <option value="oui">Oui</option> <option value="non">Non</option></select></td><td><input type="text" name="remarque_stg[]" /></td> <td style="text-align: center;"><select name="pointage_formateur[]" ><option value="non">Non</option><option value="oui">Oui</option></select></td><td><input type="text" name="remarque_formateur[]" /></td> <td><input type="hidden" name="id_table[]" value=125 /></td> <td onclick="suppr(this.parentNode);">Supprimer</td><td onclick="ajout(this.parentNode);">Insérer</td> </tr> <tr> <td><input type="text" name="date[]" /></td><td><input type="text" name="heure[]" /></td><td><input type="text" name="duree[]" /></td> <td style="text-align: center;"><select name="pointage_stg[]" > <option value="oui">Oui</option> <option value="non">Non</option></select></td></td><td><input type="text" name="remarque_stg[]" /></td> <td style="text-align: center;"><select name="pointage_formateur[]" ><option value="oui">Oui</option><option value="non">Non</option></select></td><td><input type="text" name="remarque_formateur[]" /></td> <td><input type="hidden" name="id_table[]" value=745 /></td> <td onclick="suppr(this.parentNode);">Supprimer</td><td onclick="ajout(this.parentNode);">Insérer</td> </tr> <tr> <td> <input type="text" name="date[]" /></td><td><input type="text" name="heure[]" /></td><td><input type="text" name="duree[]" /></td> <td style="text-align: center;"><select name="pointage_stg[]" > <option value="oui">Oui</option> <option value="non">Non</option></select></td></td><td><input type="text" name="remarque_stg[]" /></td> <td style="text-align: center;"><select name="pointage_formateur[]" ><option value="oui">Oui</option><option value="non">Non</option></select></td><td><input type="text" name="remarque_formateur[]" /></td> <td><input type="hidden" name="id_table[]" value=2658 /></td> <td onclick="suppr(this.parentNode);">Supprimer</td><td onclick="ajout(this.parentNode);">Insérer</td> </tr> <tr><td> <input type="text" name="date[]" /></td><td><input type="text" name="heure[]" /></td><td><input type="text" name="duree[]" /></td> <td style="text-align: center;"><select name="pointage_stg[]" > <option value="oui">Oui</option> <option value="non">Non</option></select></td><td><input type="text" name="remarque_stg[]" /></td> <td style="text-align: center;"><select name="pointage_formateur[]" ><option value="oui">Oui</option><option value="non">Non</option></select></td><td><input type="text" name="remarque_formateur[]" /></td> <td><input type="hidden" name="id_table[]" value=100 /></td> <td onclick="suppr(this.parentNode);">Supprimer</td><td onclick="ajout(this.parentNode);">Insérer</td></tr> <tr><td> <input type="text" name="date[]" /></td><td><input type="text" name="heure[]" /></td><td><input type="text" name="duree[]" /></td> <td style="text-align: center;"><select name="pointage_stg[]" > <option value="non">Non</option> <option value="oui">Oui</option></select></td><td><input type="text" name="remarque_stg[]" /></td> <td style="text-align: center;"><select name="pointage_formateur[]" ><option value="oui">Oui</option><option value="non">Non</option></select><td><input type="text" name="remarque_formateur[]" /></td> <td><input type="hidden" name="id_table[]" value=5000 /></td> <td onclick="suppr(this.parentNode);">Supprimer</td><td onclick="ajout(this.parentNode);">Insérer</td></tr> </table> <button type="submit" value="envoyer" name="valide"><img src="img9.png" alt="valider" height="25" width="25" /></button> <input type="hidden" name="id_table_des_rendez_vous" value="' . $list_id_table . '" /> </form>'; } ?> </body> </html>
Il y aurait encore une amélioration à apporter : dans cette exemple, même les lignes du planning déjà existantes dans la table des rendez-vous, et non vraiment modifiées dans le formulaire, seront mises à jour dans la table des rendez-vous par une requête. Ce qui charge le serveur inutilement.
Grand Merci Eleydet pour ton apport déterminant
Bonjour,
J'ai encore un pb avec le DOM que je peine vraiment à comprendre :
- je voudrais empêcher la suppression d'une ligne qui est pointée (= rendez-vous déjà réalisé) par le stagiare ou le formateur. Donc lors de l'appui sur un bouton "supprimer", comment lire le contenu de pointage stagiaire ou pointage formateur de la même ligne.
- je voudrais empêcher la modification d'une date d'une ligne déjà pointée : donc à partir du champ date en cours de modif., aller lire les 2 champs de pointage de la même ligne.
J'espère ne pas abuser
Bonjour,
dans ce cas ne mets pas de <button> !je voudrais empêcher la suppression d'une ligne qui est pointée (= rendez-vous déjà réalisé)
Effectivement, ça semble jouable :
- facile et efficace
- transposable pour les dates : s'il existe un pointage dans la même ligne, pas de input de la date mais seulement un affichage de la date
- si l'utilisateur veut vraiment supprimer une ligne pointée, alors il dépointe, sauve dans la table, recharge le planning, et supprime la ligne. Idem pour une modification de date : fonctionnellement, cela se plaide auprès du client
Une petite dernière : comment éviter que l'utilisateur saisisse 2 dates de rendez-vous identiques sur 2 lignes différentes ?
Une piste : j'ai regardé comment passer le tableau php date[] dans la fonction javascript verif_date() à partir de
pour vérifier si this.value existe déjà dans date[], mais sans parvenir à transposer date[] en javascript
Code html : Sélectionner tout - Visualiser dans une fenêtre à part <input type="text" name="date[]" onchange="verif_date(this.value)" />
Vous avez un bloqueur de publicités installé.
Le Club Developpez.com n'affiche que des publicités IT, discrètes et non intrusives.
Afin que nous puissions continuer à vous fournir gratuitement du contenu de qualité, merci de nous soutenir en désactivant votre bloqueur de publicités sur Developpez.com.
Partager