Cliquer sur une ligne de tableau créé depuis une base de données pour remplir un formulaire.

**Tdsripper** · 19/10/2016, 15h21

Bonjour,

Je vous joins le bout de code sur lequel je travaille depuis quelques jours. Quelques précisions s'imposent:

-Je suis débutant en HTML/PHP/MYSQL et j'apprends via le site et quelques vidéos youtube, il y a donc sûrement plein de choses que j'ignore et si vous prenez le temps de me répondre je vous en saurai fort gré.
-J'ai mis en haut de page en commentaire le bout de fonction que j'ai rattaché à ma page.
-Toujours dans ma démarche d'apprentissage je préfère si possible comprendre le mécanisme qui me permettra de faire plutôt que d'avoir la réponse toute faite.
-Certaines parties du fichiers ont été blankées par des XXXX-XXXXX, il s'agit de données boulot qui n'influent pas sur le reste du code.

Le 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
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
171
172
173
174
<!DOCTYPE html>
<html>
	<head>
		<title>Bienvenue sur le site</title>
		<meta charset="utf-8">
			<link rel="stylesheet" href="style.css">
			<?php require 'fonctions.php' ?>
 
<!-- 
contenu de fonctions.php:
function connexion($serveur, $bdd, $login, $pass){
	try{
		$connect = new PDO("mysql:host=$serveur;dbname=$bdd", $login, $pass);
		$connect->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
	}
 
	catch(PDOException $e){
		echo 'Echec: ' .$e->getMessage();
	}
 
	return $connect;
}
-->
 
	</head>
	<body>
 
		<header>
			<h1>Titre du site</h1>
 
		</header>
 
		<nav> 
			<div class="table">	
				<ul>
					<li class="menu-ind">
						<a href="XXXX.php">XXXX</a>
					</li>
					<li class="menu-or">
						<a href="XXXX.php">XXXX</a>
					</li>
					<li class="menu-eltecs">
						<a href="XXXX.php">XXXX</a>
					</li>
					<li class="menu-bilans">
						<a href="XXXX.php">XXXX</a>
					</li>
					<li class="menu-docs">
						<a href="XXXX.php">XXXX</a>
					</li>
					<li class="menu-infos">
						<a href="XXXX.php">XXXX</a>
					</li>
				</ul>
			</div>	
		</nav>
 
		<div class="block">		
			<div class="lmenu">
				<ul>
					<li class="menu-left">
						<a href="XXXX.php">Affichage des XXXX</a>
					</li>
					<li class="menu-left">
						<a href="XXXX.php">Ajout d'un XXXX</a>
					</li>
					<li class="menu-left">
						<a href="XXXX.php">Modification d'un XXXX</a>
					</li>
					<li class="menu-left">
						<a href="XXXX.php">Suppression d'un XXXX</a>
					</li>
					<li class="menu-left">
						<a href="XXXX.php">Recherche dans les XXXX</a>
					</li>
				</ul>
			</div>
 
			<section class="contenu">
				<table>
					<thead>
						<tr>
							<th width=7%>ID</th>
							<th width=13%>Nom</th>
							<th width=7%>Prenom</th>
							<th width=10%>Age</th>
							<th width=33%>Taille</th>
							<th width=12%>Poids</th>
							<th width=17%>Sexe</th>
						</tr>
					</thead>
					<tbody>
						<?php
                                                        $serveur="localhost";
                                                        $login="Ripper";
                                                        $pass="XXXXX";
 
                                                        
                                                        $connexion = connexion($serveur, 'Database', $login, $pass);
                                                        
                                                        $reponse = $connexion->query('SELECT * FROM T_PERSONNES');
 
                                                        While($data=$reponse->fetch()){
                                                ?>
 
								<tr>
									<td><?php echo $data['ID']; ?></td>
									<td><?php echo $data['Nom']; ?></td>
									<td><?php echo $data['Prenom']; ?></td>
									<td><?php echo $data['Age']; ?></td>
									<td><?php echo $data['Taille']; ?></td>
									<td><?php echo $data['Poids']; ?></td>
									<td><?php echo $data['Sexe']; ?></td>
								</tr> 
							<?php
                                                        }
                                                
                                                                        $reponse->closecursor();
                                                
                                                ?>
 
					</tbody>
				</table>
			</section>
 
			<aside class="rmenu">
				<form method="POST" action="">
 
					 <?php if(isset($_POST['ID'], $_POST['nom'], $_POST['prenom'], $_POST['Age'], $_POST['Taille'], $_POST['Poids'], $_POST['Sexe'], $_POST['IMC'])){
                                                
                                                //Traitement du formulaire
 
                                         }else{ ?>
 
						<label for="ID">Identifiant : </label>
						<input type="text" name="ID" id="ID"> <br>
 
						<label for="Nom">Nom : </label>
						<input type="text" name="Nom" id="Nom"><br>
 
						<label for="Prenom">Prenom : </label>	
						<input type="text" name="Prenom" id="Prenom"><br>
 
						<label for="Age">Age : </label>
						<input type="text" name="Age" id="Age"><br>
 
						<label for="Taille">Taille : </label>
						<input type="text" name="Taille" id="Taille"><br>
 
						<label for="Poids">Poids : </label>
						<input type="text" name="Poids" id="Poids"><br>
 
						<label for="Sexe">Sexe : </label>
						<input type="text" name="Sexe" id="Sexe"><br>
 
						<label for="IMC">IMC : </label>
						<input type="text" name="IMC" id="IMC"><br>
 
						<div class="bouton">
							<input type="submit" value="Modifier une personne">
						</div>
 
					<?php } ?>
 
				</form>
			</aside>
		</div>
 
		<footer>
		</br>
			XXXXXXXXXXXXXXXX-XXXXXXXXXXXXXXXXXX
		</footer>
	</body>
</html>

OBJET DE MA DEMANDE:

Faire que lors du clic sur une ligne créée dynamiquement cela remplisse les champs du formulaire situé dans le <aside> de manière à pouvoir les modifier dans la base (via une requête SQL dont je m'occuperai dans la partie //traitement du formulaire).

Un grand merci d'avance à toutes celles et ceux qui voudront bien se pencher sur mon problème.

Cordialement,

Tdsripper

**Vil'Coyote** · 19/10/2016, 15h34

de ce que je lis. tu génère les ligne depuis la base de données et affichage ton "aside" si le formulaire n'as pas été transmis.
Donc le but du jeu étant de remplir le formulaire à l'aide d'une ligne "cliqué" il te faudra donc passé par du javascript ou revoir ta manière de faire les choses.

**Celira** · 19/10/2016, 16h00

+1 sur Vil'Coyote : si ça doit être fait côté client, sans rechargement de page, il va forcément y avoir du JS dans l'équation.
Sinon, il faut au moins un onclick qui envoie l'identifiant de la ligne à éditer au script PHP et qui charge le formulaire d'édition avec les données récupérées depuis la base...

**Tdsripper** · 19/10/2016, 16h37

Je vais essayer de pas trop me perdre:

Si je comprends bien, un <tr onclick="fonction"> <td>.....</td></tr> me permettrait de rendre la ligne entière cliquable.

Ce que je ne vois pas c'est comment faire ressortir les valeurs du tableau pour les faire monter dans les différentes cases du formulaire.

Je me vois bien dans la fonction faire du Document.GetelementByID("ID de mon champ de formulaire a remplir").value = $variable mais je ne vois pas comment faire ressortir une valeur du tableau pour l'attribuer à variable.

Désolé encore si ça vous parait si simple, pour moi c'est l’Everest

Merci en tous cas pour ces premières pistes

EDIT:

Sachant que le onclick ne pourra pas traiter une fonction en PHP, est il possible de récupérer les valeurs contenues dans mon $data[colonnes] servant à la création ou faudra t il lire le tableau fini case par case pour en retirer les valeurs?

**NoSmoking** · 19/10/2016, 19h06

Bonjour,
sur le click de ta <tr> il te suffit de parcourir les cellules, collection cells, de celle ci et de récupérer les différentes valeurs pour affectation.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
function fctClick( obj){
  for( var i = 0, nb = obj.cells.length; i < nb; i += 1){
    alert( obj.cells[i].textContent);
  }
}

avec un appel

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<tr onclick="fctClick(this)">

**Tdsripper** · 19/10/2016, 20h04

Merci NoSmoking tu ne peux pas savoir à quel point ça éclaire ma lanterne.

Du coup l'idée serait de faire stocker a la fonction les résultats sous forme d'array, puis de construire une seconde fonction qui affecte la valeur des différentes cellules de l'array en question dans les champs du formulaire.

Je me lance:

Code javascript :

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
 
function fctClick( obj){
  var result = new array;
  for( var i = 0, nb = obj.cells.length; i < nb; i += 1){
    result[i]=( obj.cells[i].textContent);
 
  }
  return result;
}
 
 
function remplissage(result){
    Document.GetelementByID("ID").value = result[0];
    Document.GetelementByID("Nom").value = result[1];
    //etc pour chaque champ a remplir
}
}

C'est au niveau de l'appel que je suis pas sur que ca passe (j'ai pas pu tester encore je n'ai pas le fichier source sous la main):

Est il possible de faire:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<tr onclick="remplissage(fctClick(this))">

Merci (encore) d'avance.

**Tdsripper** · 20/10/2016, 08h09

Bon, je dois (encore - mais quel boulet!), revenir vers vous car il y a quelque chose que je ne comprends vraiment pas sur l'appel de fonction intégrées au onclick.

J'ai essayé dans un premier temps de mettre la fonction telle que proposée dans du <SCRIPT></SCRIPT> directement en dessous, puis directement avant mon <tr> mais rien ne se passe. Testé aussi l'appel à un .js externe en mettant la reference dans le <head> et rien non plus.

Je me suis dit que j'avais peut être des erreurs de syntaxe mais j'ai tout essayé et rien...

Alors j'ai testé deux choses:

<tr onclick = alert('Test')> : cela fonctionne parfaitement!
<tr onclick = test()> avec dans mon .js :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
function test(){
    alert('test');
}

Et cette solution ne fonctionne pas...

Je me demande si onclick accepte bien les fonctions personnalisées...

Quelqu'un aurait il une idée sur la source de mon erreur?

Merci d'avance

**NoSmoking** · 20/10/2016, 19h30

Je me demande si onclick accepte bien les fonctions personnalisées...

sans aucun doute !

Concernant ta problématique elle se règle en quelques lignes de code.

Comme pour chaque élément de ta table tu as un élément correspondant dans ton formulaire et ce à la même position.
Il te suffit de faire le transfert en direct dans une boucle, pas besoin d'ID sur tes <input>.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
function fctClick( obj){
  // récup. formulaire
  var oForm = document.querySelector('form');
  // récup. INPUT type text
  var oInputs = oForm.querySelectorAll('input[type=text]');
  // transfert des contenus
  for( var i = 0, nb = obj.cells.length; i < nb; i += 1){
    oInputs[i].value = obj.cells[i].textContent;
  }
}

Ci joint un fichier test sur une base déjà fournie sur ce forum

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
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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Modification enregistrement</title>
<meta name="Author" content="NoSmoking">
<style>
html, body{
  margin: 0;
  padding: 0;
  font: 1em/1.25 Verdana, sans-serif;
  background: #FFF;
}
#main {
  max-width: 60em;
  margin: auto;
}
h1, h2, h3 {
  color: #069;
  margin: .25em 0;
}
section {
  margin: 1em;
}
table {
  border-collapse: collapse;
}
td,th {
  padding: 0.5em;
  border: 1px solid #888;
}
thead {
  background: #EEE;
}
thead tr {
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.2));
  text-shadow: 1px 1px white;
}
tbody tr:hover {
  cursor:pointer;
  background: #F8F8F8;
}
label {
  display:inline-block;
  width:8em;
  text-align: left;
}
label:after {
  right: 0;
  float: right;
  content: ":\A0";
}
form {
  max-width: 25em;
}
form p {
  margin: .25em;
  text-align: center;  
}
form input {
  font-family: inherit;
  line-height: 1.5em;
  font-size: 1em;
  width: 12em;
}
form input:not([type=text]) {
  margin:.25em .25em;
  width:6em;
}
fieldset {
  border:1px solid #888;
  padding: .5em;
}
</style> 
</head>
<body>
  <div id="main"> 
    <header>
      <h1>Modification enregistrement</h1>
    </header>
    <section>
      <h2>Enregistrements</h2>
      <table>
        <thead>
          <tr>
            <th>ID</th><th>Nom</th><th>Prenom</th><th>Age</th><th>Taille</th><th>Poids</th><th>Sexe</th>
          </tr>
        </thead>
        <tbody>
          <tr onclick="fctClick(this)">
            <td>0001</td><td>Stan</td><td>Alain</td><td>35</td><td>1.85</td><td>85</td><td>M</td>
          </tr> 
          <tr onclick="fctClick(this)">
            <td>0002</td><td>Smith</td><td>John</td><td>45</td><td>1.73</td><td>91</td><td>M</td>
          </tr>     
          <tr onclick="fctClick(this)">
            <td>0003</td><td>Smith</td><td>Alice</td><td>25</td><td>1.69</td><td>63</td><td>F</td>
          </tr>     
        </tbody>
      </table>
      <h2>Formulaire</h2>
      <form method="GET" action="#">
        <fieldset>
          <legend>Données à modifier</legend>
          <p><label>Identifiant</label><input type="text" name="ID"></p>
          <p><label>Nom</label><input type="text" name="Nom"></p>
          <p><label>Prenom</label><input type="text" name="Prenom"></p>
          <p><label>Age</label><input type="text" name="Age"></p>
          <p><label>Taille</label><input type="text" name="Taille"></p>
          <p><label>Poids</label><input type="text" name="Poids"></p>
          <p><label>Sexe</label><input type="text" name="Sexe"></p>
          <p><label>IMC</label><input type="text" name="IMC"></p>
          <p><input type="submit" value="Modifier"><input type="reset" value="Annuler"></p>
        </fieldset>
      </form>
    </section>
  </div> 
<script>
function fctClick( obj){
  // récup. formulaire
  var oForm = document.querySelector('form');
  // récup. INPUT type text
  var oInputs = oForm.querySelectorAll('input[type=text]');
  // transfert des contenus
  for( var i = 0, nb = obj.cells.length; i < nb; i += 1){
    oInputs[i].value = obj.cells[i].textContent;
  }
}
</script>
</body>
</html>

pour analyse.

Cliquer sur une ligne de tableau créé depuis une base de données pour remplir un formulaire.

JavaScript

Discussions similaires

Partager

Partager