Version imprimable
là vois-tu c'est la 1ère version.
j'ai prévu un certain nombre de lots d'évolution, chacun apportant de nouvelles possibilités.
la prise des select, checkbox, radio... est prévue pour la 4ème version.
avant j'ai prévu : gestion des exceptions, unicité du nommage (ligne, colonne), tri, navigation avec les flèches, masques de saisie, etc...
je suis membre d'un projet devloppement application web pour une grand société, sincèrement j'avoue que je ne sais plus quoi faire???
quelle solution prendre??
ton tableau est super, je peux saisir, je peux ajouter des lignes, mais est ce que je peux insérer des sélects, et si je veux ajouter un bouton de recherche pour faciliter la saisie. j'ai commencé avec le code de "emmanuel.remy" mais il me reste un détail, et votre code "bigboomshakala" mais il me reste un détail.....
:cry:
@emmanuel.remy
Le code sont très intéressant... (Vraiment, il n'y a aucun sarcasme. je connais pas la méthode clone.) mais comment allez-vous identifier les champs input avec cette facon de faire ?
Car là, d'une ligne à l'autre, on aura exactement le même name pour les champs.
Tu n'es pas obligé de procéder ainsi: tu peux par exemple utiliser AJAX pour effectuer une recherche d'articles sans recharger ta page, et /ou tu peux aussi disposer d'une "fenêtre interne" (type balise DIV initialement cachée , et qu'on montre dès que besoin) qui abrite la recherche, sans passer par une page sur le server dédiée à la cette tâche.Citation:
je fais un input et un bouton de recherche à coté qui me mène vers une page de recherche
Mais à mon avis, fais toi une maquette sans tenir trop compte de cela (cette cinématique est connue, donc sans surprise), tu modifieras ce point une fois la faisabilité globale de ta facture établie.
Ci-dessous l'exemple initial un rien modifié pour "maquetter" (c'est un bien grand mot dans ce cas, je n'ai pas mis de code concret, juste un balbutiement d'ergonomie ;) ) cela:
ERECode:
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
@FMaz: une simple navigation dans le DOM fait l'affaire. Basiquement si tu prends une ligne de la table tu récupères ensuite sans difficulté les INPUTS, les SELECT etc...
Mais si le développeur ne peut se passer de document.getElementById ;) on peut tout aussi générer des id dont le libellé pré-établi se calera sur un item donné (article001 et quantite001, article002 et quantite002, ...)
ERE
@ emmanuel.remy
et les names des inputs, ils sont tous pareil, comment faire pour injecter ligne par ligne dans ma table lors de l'enregistrement???
et comment accéder à l'input se trouvant dans la 3ème ligne de la 2ème colonne?? pour mettre une information X??
Le pus simple c'est de te constituer une structure javascript (tableau ou autre) que tu enverras au final vers ton server pour enregistrementCitation:
et les names des inputs, ils sont tous pareil, comment faire pour injecter ligne par ligne dans ma table lors de l'enregistrement???
Par le DOM. Je vais essayer de te faire une démo rapide.Citation:
et comment accéder à l'input se trouvant dans la 3ème ligne de la 2ème colonne?? pour mettre une information X??
ERE
dans ce cas vous allez vraiment me soulager, j'attends votre démo impatiemment:D
Re-Salut,
Attention, ne pas oublier que les codes fournis sont avant tout des démos et de bonnes pistes pour concevoir son appli ! 8-)
Donc ce que j'ai modifié: les produits dans les lignes de sont des zones de texte qui verront s'afficher le code article, la description, ... Sur clic du bouton (...) on obtient la zone de recherche (non fonctionnelle, à implémenter) et si tu choisis un article dans la liste et que tu valides, alors l'article est envoyé à sa place dans la ligne de facture. J'ai tout commenté, détaillé les étapes, et tu peux t'en inspirer pour la suite.
Bon après-midi,Code:
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
ERE
quand je clique sur un bouton "enregistrer" j'ai l'habitude de travailler avec $_POST[nomdeinput] en utilisant une boucle for et je parcours tout mon tableau............
MAIS dans ce cas de tableau cloné avec des oeuds (node), comment faire??
Pourquoi mettre 12 points de suspension dans le message ?Citation:
Envoyé par BYALI
Si tu te penches un peu sur le code et que tu appliques tes connaissances de PHP, tu trouves très rapidement qu'il suffit de compléter légèrement le code précédent pour te satisfaire.et ttt.php:Code:
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<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <script type="text/javascript"> var trEdit; function ajouterLigneFacture() { var tr = document.getElementById("generique").cloneNode(true); tr.removeAttribute("id"); tr.style.display=""; document.getElementById("lignesFacture").tBodies[0].appendChild(tr); } function supprLigne(tr) { document.getElementById("lignesFacture").deleteRow(tr.rowIndex); } function validRecherche() { //alert('Validation de la recherche: injection du produit sélectionné, ...'); //la liste de recherche des articles var sel = document.getElementById("articleSelectionne"); //l'opton sélectionnée var opt = sel.options[sel.selectedIndex]; //l'article (code, libellé, au choix) à afficher var article = opt.value + " - " + opt.text; //la liste des inputs pour la ligne en cours d'édition var inputs = trEdit.getElementsByTagName("input"); //on considère qu'on a uniquement des boites de type text //sinon faire un boucle pour cibler l'input concerné //on affiche dans la première zone de saisie inputs[0].value = article; //plus de sélection en cours trEdit = null; //on cache la recherche document.getElementById("recherche").style.display="none"; } function dispRecherche(tr) { document.getElementById("recherche").style.display="block"; //on enregistre la ligne en cours d'édition trEdit = tr; } </script> </head> <body> <form action ="ttt.php" method="post"> <div id="entete"> Nom: <input type="text" name="nom" /> Adresse: <input type="text" name="adresse" /> </div> <table border="1" id="lignesFacture"> <tr> <th>produit</th> <th>quantite</th> <th>montant HT</th> <th>Suppr.</th> </tr> <tr id="generique" style="display:none"> <td> <input type="text" name="article[]"/><button type="button" onclick="dispRecherche(this.parentNode);">...</button></td> <td><input type="text" name="quantite[]"/></td> <td><input type="text" name="montant[]"/> €</td> <td><button type="button" onclick="supprLigne(this.parentNode.parentNode)">Suppr</button></td> </tr> </table> <button type="button" onclick="ajouterLigneFacture();">Ajouter ligne</button> <input type="submit" value="Envoyer" /> </form> <div id="recherche" style="background-color:yellow;display:none;z-order:1000"> <table> <tr><td>Recherche d'un produit</td></tr> <tr><td><input type="text" /> (filtre de recherche)</td></tr> <tr><td><select id="articleSelectionne"> <option value="ART-001">Tennis</option> <option value="ART-002">Kopa</option> <option value="ART-003">Ballon</option> <option value="ART-004">Canne à pêche</option> <option value="ART-005">Baton de randonnée</option> <option value="ART-006">Tente igloo</option> <option value="ART-007">chronometre</option> <option value="ART-008">Lunettes de glacier</option> </select></td></tr> <tr><td><button type="button" onclick="validRecherche();">Valider</button></td></tr> </table> </div> </body> </html>
Code:
2
3
4
5
6
7<html> <body> <pre> <?php var_dump($_POST); ?> </pre> <body> </html>
ERE
waw c bon maintenant j'ai compris, j'avoue qu'à l'aide de ce forum , on ne peut dire qu'on est seul, sincèrement je vous remercie de cette présence incroyable.
en tout cas ça répond à mon interrogation, je vais essayer mon source complet, avec insertion dans la table. et je vous confirme, j'aurais besoin du cas où dans mon tableau il y a des selects, comment juste récupérer la donnée comme l'instruction suivante:
Citation:
var inputs = trEdit.getElementsByTagName("input");
//on considère qu'on a uniquement des boites de type text
//sinon faire un boucle pour cibler l'input concerné
Si tu as des select sur une ligne:Citation:
Envoyé par BYALI
C'est exactement la même démarche et tu peux mixer les 2.Code:var selects = trEdit.getElementsByTagName("select");
ERE
emmanuel.remy a dit
sincèrement vous avez raison. je vous tire chapeau de votre patience. je vous tiens au courant de mon évolution.Citation:
Quand une tête pense seule, elle devient folle.
je vous donne mon histoire brièvement pour avoir une idée:
" je suis spécialiste delphi, j'ai réalisé des applications multiples de gestion: gestion commercial, production, prévisions, tableaux de bord, gestion identification par code barre.......etc
l'année passé j'ai fait formation en PHP MYSQL pour faire un petit site web dynamique avec commandes en lignes quelque chose de simple.
Mais cette année, on a effectué une convention avec un client pour une application client-server (delphi sql server) j'étais prête.....et voila qu'il demandent du coup de changer et de faire application web car ils ont plusieurs sites distants.
donc sincèrement le démarrage était difficile et voila que je trouve ceux qui me font un coup de pouce.:ccool:
vous êtes super:lol:
Très heureux d'avoir pu contribuer à donner un coup de main.
:lahola:
Bon courage pour la suite.
ERE
Je parle du cas standard: où le formulaire est soumis en POST, et que celui-ci n'a pas de pré-traitement avant le submit.Citation:
Envoyé par emmanuel.remy
Si tout les input ont le même name, il va se passer quoi sur le script qui reçois les données POST ?
Evidemment dans ce cas... ;)Citation:
Envoyé par FMaz
Mais l'idée initiale était de constituer une structure javascript (tableau ou autre) envoyée vers le server pour enregistrement.
Tu pourras noter que ce n'est pas l'idée finale qui a été retenue et que des noms ont été donnés au champs du formulaire, comme tu le laissais entendre, pour effectuer un post "traditionnel".
ERE
Mais je crois que la solution idéale serait effectivement basé sur ta méthode, avec une modification des attributs name= sur les éléments nouvellement créés.
Il serait peut-être même possible d'automatiser celà pour créer un système plus versatile.
C'est à dire de cloner une ligne générique avec des input du genre:
Puis après avoir cloné cette ligne, changer la valeur de l'attribut name avec un remplacement du contenu de la chaine de caractère. (Remplacer %id par la valeur désignant le numéro de ligne)Code:
2
Bien sûr. Tout est envisageable, et comme toujours ce n'est qu'une question de temps et d'implication... ;)Citation:
Il serait peut-être même possible d'automatiser celà pour créer un système plus versatile
ERE