travailler dans un tableau brouillon

Version imprimable

22/05/2009, 13h09
BYALI

travailler dans un tableau brouillon

Bonjour,
j'ai une application web et je voudrais créer une facture qui a deux tables:
table facture_entete
table facture_lignes

à la création, je voudrais mettre un formulaire dans un tableau dans lequel je donne la main à l'internaute de saisir ligne par ligne de façon brouillon, et lors du clic d'un bouton "enregistrer" je fais une requete insert dans la table "facture_lignes".

mon souci c'est comment je peut effectuer ceci?? je suis débutante dév web, et j'avoue que je suis habituée à delphi et le dbgrid et le cachupdate de ttable me règle tous mes problèmes.....
là je plante et je beug au démarrage.

y a t il un moyen pour m'orienter pour débuter???

et pour les articles je voudrais un moyen d'afficher la liste à chaque saisie pour faciliter la recherche???

sincèrement je suis perdue :cry:
22/05/2009, 18h41
FMaz

Je comprend pas ce que tu essaie de faire, mais:

à la création de quoi ?, je voudrais mettre un formulaire dans un tableau normalement c'est l'inverse... <form><table> dans lequel je donne la main style="cursor:pointer;" ? à l'internaute de saisir ligne par ligne ligne par ligne... c'est l'utilisateur qui décide normalement. Tu veux le forcer à remplir impérativement ligne par ligne, en ordre ? de façon brouillon c'est quoi cette "facon brouillon" ?, et lors du clic d'un bouton "enregistrer" je fais une requete insert dans la table "facture_lignes".
22/05/2009, 19h05
BYALI

imaginez que je crée une nouvelle facture pour un client X, dont la date=date système, N° auto.......etc pour ça pas de pb.

mais la facture contient de 1 à n lignes?? que je ne sais pas c l'utilisateur qui saisit.
je veux lui offrir un tableau qu'il puisse saisir ce qu'il veut, pour chaque article(c une ligne nouvelle) qui contient la qte, le prix........

tout ça il le saisit dans un (soit disantà brouillon)

et lors du clic sur un bouton "enregistrer" c la où j'effectue une requête qui me prend tout ce qu'il y a dans ce "tableau" et j'insert dans la table "facture_ligne"

je ne sais pas si je me fais comprendre?????
je sais que c pas évident ce que je dis, mais je pense qu'au moins un développeur a fait ça ??? on ne peut pas insérer directement dans la base, on passe par une saisie intermédiaire...........qu'on peut à tout moment annuler tout vous voyez ce que je veux dire???
22/05/2009, 19h29
emmanuel.remy

Salut,

L'idée pourrait être la suivante: tu crées ton entête de facture tout ce qu'il y a de plus normal, en utilisant les champs input HTML.
Ensuite tu crées une table dont chaque ligne sera une ligne de facture.
Tu crées une ligne générique avec les champs HTML nécessaires à la saisie (dont la liste de tes produits) .
Tu ajoutes un bouton "ajouter ligne"dont l'objectif est d'ajouter une ligne à ta table HTML en dupliquant la ligne générique.
Enfin tu inscris un bouton "envoyer" qui recupère l'entete, passe en revue chaque ligne de la facture et génère une structure que tu envoies au server pour traitement et insertion en base.

ERE
22/05/2009, 19h35
Bovino

J'ajoute à la réponse d'emmanuel.remy que tu pourras trouver de nombreuses ressources pour t'aiguiller sur la manière d'appliquer ses conseils dans la FAQ, les Sources et les Cours ;)

Donc, en clair, tu aimerais faire un tableau pour lequel il est possible d'ajouter dynamiquement des lignes ?

Il existe des facon de faire avec des createNode et appendChild, mais le plus simple pour toi serait peut-être d'emboiter des DIV, ce qui donnera l'illusion de lignes.

Premièrement, créer un tableau qui représente une ligne. Donc il faut faire une fonction qui retourne une nouvelle ligne.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 function tableauHTML(id) { var ret = ""; ret += "<table class=\"ligne\">"; ret += "<tr>"; ret += "<td class=\"col1\"><input type=\"text\" name=\"noProduit_" + id "\" value=\"\" /></td>"; ret += "<td class=\"col2\"><input type=\"text\" name=\"prix_" + id "\" value=\"\" /></td>"; // ......... mettre autant de colones que nécéssaire ret += "</tr>"; ret += "</table>"; return ret; }
Bon, mais la, si on a une fonction qui retourne un tableau représentant une ligne, encore faut-il avoir un endroit prévu ou on va l'insérer:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <form method="post" action="save.php"> <input type="hidden" id="totalLigne" name="totalLigne" value="0" /> <table class="ligne"> <tr> <th class="col1">Numéro produit</th> <th class="col2">Prix</th> </tr> </table> <br /><div id="ligne_1"></div> </form>
... Donc en fait, nous allons placer le tableau représentant une ligne dans le div#ligne_1, puis, comme nous pensons peut-être insérer une ligne #2, créer un div#ligne_2 vide, prêt à recevoir la future ligne.

Oh ! Et il ne faut pas oublier de mettre à jour input#totalLigne , car coté PHP, on saura de 1 à quoi boucler pour récupérer le total des lignes.

Donc on a besoin d'une fonction pour ajouter une nouvelle ligne:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 function addLigne() { //Récupérer et incrémenter le compte des lignes var ligne = document.getElementById("totalLigne").value; ligne++; //Préparer le contenu à ajouter var divHTML = "<br>"; divHTML += tableauHTML(ligne); divHTML += "<div id=\"ligne_" + (ligne+1) + "\"></div>"; //Mettre à jour les contenus document.getElementById("ligne_" + ligne).innerHMTL = divHTML; document.getElementById("totalLigne").value = ligne; }
Cette méthode à un petit inconvénient: Tu ne peux pas supprimer de ligne.
Ceci dit, elle est beaucoup plus simple que de faire des boucles pour ajouter des objets un par un au bon endroit.

Ah oui, j'imagine qu'il serait pratique d'insérer une première ligne, et de placer un bouton...

Alors voici un récapitulatif:
Code:

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 <script type="text/javascript"> // </script> <form method="post" action="save.php"> <input type="hidden" id="totalLigne" name="totalLigne" value="0" /> <table class="ligne"> <tr> <th class="col1">Numéro produit</th> <th class="col2">Prix</th> </tr> </table> <br /><div id="ligne_1"></div> <br /> <br /> <input type="button" name="useless" value="Ajouter une ligne" onclick="addLigne();" /> </form> <script type="text/javascript"> // </script>
Ps.: C'est non-testé, mais j'ai déjà utilisé cette façon de faire. Donc le concept est bon, mais peut-etre pas la syntaxe.

22/05/2009, 19h40
BYALI

j'ai déja essayé ça le pb, c'est pour faciliter la saisie de l'article, j'ai ajouter un bouton de recherche qui me mène vers une page de recherche facile de l'article et au retour elle me remplit l'input de l'article sans avoir à le saisir, mais le pb est le suivant:
au retour de la page de facture , toute les lignes que j'ai ajoutée, comme si de rien n'était, la page s'est réinitialisée..........:cry:
22/05/2009, 19h45
FMaz

Bah ouais, forcément: tu as quitté la page sans sauvegarder ! :calim2:

Fait une recherche qui ouvre un popup ou en ajax.

Sinon, tu pourrais faire en sorte qu'il soit possible de sauvegarder le brouillon: en ajax pour un résultats transparent. Pour éviter d'inonder ta table de brouillons d'entrés inutiles, tu stock un timestamps du moment de l'enregistrement, et au moment d'enregistrer les résultats, tu effectue aussi une requête de suppression des entrés expirées.
22/05/2009, 19h47
Bovino

Cela semblerait dire qu'il y a un début de code ! Ce serait bien de le voir.
Néanmoins, ce que tu décris est assez typique d'un lien dont le comportement par défaut n'est pas inhibé et qui recharge la page... du style :

Code:

<a href="#" onclick="ta_fonction()">

au lieu de :

Code:

<a href="#" onclick="ta_fonction(); return false">

la page liste_dynam.php

Code:

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
 
<script language="JavaScript" src="fonctions.js"></script>
 
 
<?php //<!--><!-->
echo '<table align="center" border="0" width="942" bgcolor="#38603b"><tr><td><center><font face="verdana" size=2 color="white"><b>Nouvelle demande de dotation'.$mat.'</b></font>';
echo'</center></td></tr></table><br>';
?>	
<input name="ch" value="1" type="radio" checked >Par Tenue<br>
		<input name="ch" value="0" type="radio" >Par Habillement<br>
 
<?php
include('maquette/connexion.php');
$g=$_GET['rech'];
echo '<table  id="tablea" border="1" width="100%" cellspacing="0" class="Style1">';
echo '<tr><td>N°</td><td>Agent</td><td width=5%>Saison</td>
<td>Article</td><td width=5% >Taille</td><td width=5%>Qte</td></tr>';
 
$nb=1;
 
	echo'<tr> <td >'.$nb.'</td>	<td id="aa"><input name="ag'.$nb.'" value="'.$g.'"><a href="recherche.php?code='.$nb.' & action=agent" ><IMG SRC="images/rech.bmp" alt="" title="Rechercher" border=0 ></a> </td>';
 
 
	echo' <td width=5%><input type="texte" name="saison'.$nb.'" id="saison'.$nb.'" size=10 value="ete"></td> 
 
 
	<td id="a1"><select name="hab'.$nb.'>';
	///  récup habillement
	$r1='select code,design from habillement order by design ';
	$r=mssql_query($r1);
	$sel='';
	//if  ((empty($_POST['str'])==true )||($_POST['str']=='Tous')) 	{$sel='selected';} 
	echo '<option selected>-</option>';
	while ($t=mssql_fetch_row($r))
	{
	list($code,$des)=$t;
	$sel='';
	echo '<option value="'.$code.'">'.$des.'</option>';
	}
	echo '</select> </td>
 
	<td width=5%><input type="texte" name="taille'.$nb.'" size=5 ></td> 
	<td width=5%><input type="texte" name="qte'.$nb.'" size=5 value="1"></td> 
	</tr> '; 
$nb=$nb+1;
 echo '</table>';
 
?>
		<input type="button" value="Ajouter une ligne" onclick="AddRow(<? echo $nb;?>)" id="bt" >

le code javascript

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
function AddRow(nb){
    var newRow = document.getElementById('tablea').insertRow(-1);
    var newCell = newRow.insertCell(0);
    newCell.innerHTML = nb;
    newCell = newRow.insertCell(1);
    newCell.innerHTML = '<input name="ag'+nb+'" value=""><a href="recherche.php?code='+nb+' & action=agent" ><IMG SRC="images/rech.bmp" alt="" title="Rechercher" border=0 ></a> ';
	newCell = newRow.insertCell(2);
    newCell.innerHTML = '<input type="texte" name="sais'+nb+'">';
	newCell = newRow.insertCell(3);
    newCell.innerHTML = '<input type="texte" name="hab'+nb+'" size=20 >';
	newCell = newRow.insertCell(4);
    newCell.innerHTML = '<input type="texte" name="taille'+nb+'" size=5 >';
	newCell = newRow.insertCell(5);
   newCell.innerHTML = '<input type="texte" name="qte'+nb+'" size=5 value="1">';
 
	}

la page recherche.php

Code:

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
 
<?
include('maquette/connexion.php');
 
$w='';
if ($_POST['mat']!='') $w= 'mat like"'.$_POST['mat'].'%"';
if ($_POST['str']!='') if ($w!='') {$w= $w.' and str like"'.$_POST['str'].'%"';} else {$w= ' str like"'.$_POST['str'].'%"';}
if ($_POST['nom']!='') if ($w!='') {$w= $w.' and nom like"'.$_POST['nom'].'%"';} else {$w= ' nom like"'.$_POST['nom'].'%"';}
 
if ($w!='') {$w= ' where '. $w;}
 
 
 
if ($_GET['action']=='agent')
{
$req='select mat,nom,prenom,grade,sexe,str from agent '.$w.' order by mat';
}
echo $req;
 
$res=mssql_query($req);
$M='';if  ($_POST['mat']!='') $m=$_POST['mat'];
$n='';if  ($_POST['nom']!='') $n=$_POST['nom'];
$s='';if  ($_POST['mat']!='') $s=$_POST['str'];
 
echo '<form action="recherche.php?action=agent" method="post">Matricule:<input name="mat" value="'.$m.'"><br>
Nom:<input name="nom" value="'.$n.'"> <br> Structure: <input name="str" value="'.$s.'"><input type="submit" name="enreg" value="AFFICHER" ></form>';
 
 
echo '<table border="1" bordercolor="#38603b" cellspacing="0" class="Style1">';
	echo '<tr align="center" style="font-weight:bold " bgcolor="#759179"><b><td width=10%>Affectation</td><td width=10%>Matricule</td><td width=10%>Nom</td><td width=10%>Prénom</td><td width=10%>Sexe</td><td width=5%>Grade</td><td>.</td></b></tr>';
 
while ($test=mssql_fetch_row($res))
{
 
	list($mat,$nom,$prenom,$grade,$sexe,$str)=$test;
	echo '<tr><td width=10%>';
	echo $str;
	echo '</td><td width=10%>';
	echo $mat;
	echo '</td><td width=10%>';
	echo $nom;
	echo '</td><td width=10% align="center">';
	echo $prenom;
	echo '</td><td width=10% align="center">';
	echo $sexe;
	echo '</td><td width=5% align="center">';
	echo $grade;
	echo '</td><td width=5% align="center">';
	echo '</td><td align="center"><a href="liste_dynam.php?rech='.$mat.' & action=agent" ><IMG SRC="images/rech.bmp" alt="" title="OK" border=0></a><br>';
	echo '</td></tr>';
 
}
echo '</table>';

mais mettrai-je l'instruction de Bovino??

Code:

1
2
3
 
 
<a href="#" onclick="ta_fonction()">

Re-Salut,

Pas le temps de coder 10 lignes que tu as déjà plusieurs propositions de code ! :ccool:

Si cela t'intéresse voila une solution que je viens de coder, correspondant à ce que je te proposais et qui est simple en passant par une ligne générique. Tu verras qu'elle ne nécessite que 5 lignes de code JS, mais qu'il faut bien sûr la compléter ;)

Code:

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
 
<html>
  <head>
  <script type="text/javascript">
  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);
  }
  </script>
 
  </head>
  <body>
    <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>
        <select>
          <option>Tennis</option>
          <option>Kopa</option>
          <option>Ballon</option>
        </select></td>
      <td><input type="text" /></td>
      <td><input type="text" /> €</td>
      <td><button onclick="supprLigne(this.parentNode.parentNode)">Suppr</button></td>
     </tr>
    </table>  
 
    <button onclick="ajouterLigneFacture();">Ajouter ligne</button>
  </body>
</html>

ERE

22/05/2009, 20h07
bigboomshakala

Hello,

je pense que j'arrive un peu tard, mais concernant une table éditable il y a la v1.0 de ma HtmlEditTable :oops:
(sources complètes téléchargeables à la fin de l'article)
22/05/2009, 20h09
BYALI

waw emmanuel.remy ton code est extra, mais dans le cas où, au lieu d'avoir un select des produits (imagine que j'ai 1000), je fais un input et un bouton de recherche à coté qui me mène vers une page de recherche, au choix je reviens et je place le produit recherché dans l'input adéquat.....(voir le code de ma page recherche plus haut),
le souci c quand je reviens à cette page tout se réinitialise, y a pas moyen de suavegarder ma page avant que j'ouvre la recherche????
22/05/2009, 20h18
BYALI

bigboomshakala , merci pour ton lien mais la table n'est pas éditable, il n'y a pas d'input, je ne peux rien saisir dessus?
22/05/2009, 20h21
bigboomshakala

Citation:

Envoyé par BYALI

bigboomshakala , merci pour ton lien mais la table n'est pas éditable, il n'y a pas d'input, je ne peux rien saisir dessus?

bah il suffit d'aller sur le lien vers la démo de la version finale (dernière page) ou de cliquer sur l'image de la page une. là tu arrives sur la démo. pour éditer une cellule il faut double-cliquer dessus
22/05/2009, 20h26
BYALI

ah oui c vrai, j'ai pas fait attention

et pour ajouter une ligne?? j'associe le code que m'a donné "emmanuel.remy" c ça??
22/05/2009, 20h29
bigboomshakala

il y a des fonctions adaptées pour ajouter des lignes et des colonnes (fonctions Lines et Columns), pour récupérer les données (AllData et Data).
22/05/2009, 20h39
BYALI

et pour ajouter un select c possible dans une des cellules??
22/05/2009, 20h40
bigboomshakala

:mouarf: non ça c'est la v1. les select c'est prévu pour la v4 !
22/05/2009, 20h43
BYALI

je vous suis pas?!! c quoi V1 et V4?
22/05/2009, 20h47
bigboomshakala

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...
22/05/2009, 20h52
BYALI

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:
22/05/2009, 21h11
FMaz

@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.

Citation:

je fais un input et un bouton de recherche à coté qui me mène vers une page de recherche

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.

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:

Code:

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <script type="text/javascript">
  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é, ...');
    document.getElementById("recherche").style.display="none";
  }
 
  function dispRecherche(node) {
    document.getElementById("recherche").style.display="block";
  }  
  </script>
 
  </head>
  <body>
    <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>
        <select>
          <option>Tennis</option>
          <option>Kopa</option>
          <option>Ballon</option>
        </select><button onclick="dispRecherche(this);">...</button></td>
      <td><input type="text" /></td>
      <td><input type="text" /> €</td>
      <td><button onclick="supprLigne(this.parentNode.parentNode)">Suppr</button></td>
     </tr>
    </table>  
 
    <button onclick="ajouterLigneFacture();">Ajouter ligne</button>
 
    <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>
          <option>Tennis</option>
          <option>Kopa</option>
          <option>Ballon</option>
          <option>Canne à pêche</option>
          <option>Baton de randonnée</option>
          <option>Tente igloo</option>
          <option>chronometre</option>
          <option>Lunette de glacier</option>
        </select></td></tr>
        <tr><td><button onclick="validRecherche();">Valider</button></td></tr>
      </table>
    </div>
 
  </body>
</html>

ERE

22/05/2009, 23h21
emmanuel.remy

@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
23/05/2009, 08h55
BYALI

@ 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???
23/05/2009, 09h06
BYALI

et comment accéder à l'input se trouvant dans la 3ème ligne de la 2ème colonne?? pour mettre une information X??
23/05/2009, 13h59
emmanuel.remy

Citation:

et les names des inputs, ils sont tous pareil, comment faire pour injecter ligne par ligne dans ma table lors de l'enregistrement???

Le pus simple c'est de te constituer une structure javascript (tableau ou autre) que tu enverras au final vers ton server pour enregistrement

Citation:

et comment accéder à l'input se trouvant dans la 3ème ligne de la 2ème colonne?? pour mettre une information X??

Par le DOM. Je vais essayer de te faire une démo rapide.

ERE
23/05/2009, 14h04
BYALI

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.

Code:

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <script type="text/javascript">
  //la ligne en cours d'"édition"
  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>
    <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" /><button onclick="dispRecherche(this.parentNode);">...</button></td>
      <td><input type="text" /></td>
      <td><input type="text" /> €</td>
      <td><button onclick="supprLigne(this.parentNode.parentNode)">Suppr</button></td>
     </tr>
    </table>  
 
    <button onclick="ajouterLigneFacture();">Ajouter ligne</button>
 
    <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 onclick="validRecherche();">Valider</button></td></tr>
      </table>
    </div>
 
  </body>
</html>

Bon après-midi,

ERE

23/05/2009, 15h38
BYALI

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??

Citation:

Envoyé par BYALI

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 ?
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.

Code:

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
<!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>

et ttt.php:

Code:

1
2
3
4
5
6
7
<html>
  <body>
    <pre>
       <?php var_dump($_POST); ?>
    </pre>
  <body>
</html>

ERE

23/05/2009, 16h32
BYALI

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é
23/05/2009, 16h43
emmanuel.remy

Citation:

Envoyé par BYALI

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:

Si tu as des select sur une ligne:

Code:

var selects = trEdit.getElementsByTagName("select");

C'est exactement la même démarche et tu peux mixer les 2.

ERE
23/05/2009, 16h58
BYALI

emmanuel.remy a dit

Citation:

Quand une tête pense seule, elle devient folle.

sincèrement vous avez raison. je vous tire chapeau de votre patience. je vous tiens au courant de mon évolution.

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:
23/05/2009, 17h10
emmanuel.remy

Très heureux d'avoir pu contribuer à donner un coup de main.
:lahola:

Bon courage pour la suite.

ERE
24/05/2009, 22h14
FMaz

Citation:

Envoyé par emmanuel.remy

@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

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.

Si tout les input ont le même name, il va se passer quoi sur le script qui reçois les données POST ?
24/05/2009, 23h53
emmanuel.remy

Citation:

Envoyé par FMaz

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.

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... ;)
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
25/05/2009, 03h04
FMaz
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:
Code:

1 2 <input name="produit_%id" value="" />
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)
25/05/2009, 11h55
emmanuel.remy

Citation:

Il serait peut-être même possible d'automatiser celà pour créer un système plus versatile

Bien sûr. Tout est envisageable, et comme toujours ce n'est qu'une question de temps et d'implication... ;)

ERE