Renseigner des cellules d'un tableau à la suite d'une sélection dans un champs <select>

Version imprimable

Bonjour,

A la suite d'un click sur un bouton, je crée une ligne supplémentaire.

Cependant je veux quand je sélectionne une valeur sur un champ select situe sur la première cellule, les champs situes sur les autres cellules se replissent par requête selon la valeur choisie.

Ici je veux que nom et situation de famille se renseignent si je choisis un prénom
Code:

1 2 3 4 5 6 <table id="tableau"> <th>Prenom</th> <th>Nom</th> <th>Situation de famille</th> </table> <input type="button" onclick="ajouteLigne('tableau')" value="Ajouter agent"/>
voici le code JS
Code:

1 2 3 4 5 6 7 8 9 10 11 12 function ajouteLigne(tableID) { var table = document.getElementById(tableID); var ligne = table.insertRow(-1); var rowNumber = table.childNodes.length; var cell_prenom = ligne.insertCell(0); var cell_nom = ligne.insertCell(1); var cell_sitfamille = ligne.insertCell(2); cell_prenom.innerHTML='<select id="prenom_ag[]"><option value="-1">Choisir prenom</option>'; cell_nom.innerHTML='<input type="text" name="direction[]"/>'; cell_sitfamille.innerHTML='<input type="text" name="sitfamille[]"/>'; }
Quel événement dois-je implémenter sur le champ select prenom sur la même fonction ou une autre fonction ?

28/11/2019, 17h36
Isher
Bonjour,

Je dirais que l'évènement onChange sur select me semble un bon départ. soit directement ds la balise HTML

Code:

<select onchange="myFunction()">

soit dans le code javascript
Code:

1 2 3 4 document.getElementById('prenom').addEventListener('change', function(e){ // ici le code lorsque le prénom change });
A noter qu'une petite recherche google m'a donné ce lien en 3e réponse:

https://developer.mozilla.org/fr/doc...dEventListener

--
Éric Santonacci

Bonjour,

J'ai utilise un événement "onchange" sur le champ select "prenom" qui appelle un fonction charger_champs().
Par contre cette fonction est imbriquée dans une grande fonction qui se charge d'ajouter des lignes.
Je veux que quand l'utilisateur clique sur le bouton "Ajouter agent", ca cree une ligne avec le les champs prénom, nom et situation famille et quand il sélectionne un prénom, le nom et la situation famille s'affichent en fonction du prénom choisi

voici le

Code:

1
2
3
4
5
6
7
8
9
<table id="tableau">
<th>Prenom</th>
<th>Nom</th>
<th>Situation de famille</th>
<th>Grade</th>
<th>Fonction</th>
<th>Direction</th>
</table>
<input type="button" onclick="ajouteLigne('tableau')" value="Ajouter agent"/>

voici le code JS

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
function ajouteLigne(tableID)
{
	var table = document.getElementById(tableID);
	var ligne = table.insertRow(-1);
    var rowNumber = table.childNodes.length;
    var cell_nom = ligne.insertCell(0);
	var cell_prenom = ligne.insertCell(1);
	var cell_sitfamille = ligne.insertCell(2);
	var cell_grade = ligne.insertCell(3);
	var cell_fonction = ligne.insertCell(4);
	var cell_direction = ligne.insertCell(5);
 
	    var codeHTML_prenom= '<select id="prenom_ag[]" onchange="charger_champs(this.value)"><option value="-1">Choisir prenom</option>';
		var codeHTML_nom= '<select id="nom_ag[]"><option value="-1">Choisir nom</option>';
		var codeHTML_sitfamil= '<select id="sitfamille_ag[]"><option value="-1">Choisir situation famille</option>';
		var codeHTML_grade= '<select id="grade_ag[]"><option value="-1">Choisir grade</option>';
		var codeHTML_fonction= '<select id="fonction_ag[]"><option value="-1">Choisir fonction</option>';
		var codeHTML_direct= '<select id="direction_ag[]"><option value="-1">Choisir direction</option>';
	 <?php
	   include('functions.php');
        $bdd_mission_msas=connect();
		$reponse_prenom = $bdd_mission_msas->query('SELECT * FROM  agent');
		 $optionsHTML_prenom="";				
		while ($donnees_prenom = $reponse_direct->fetch())
{
	$optionsHTML_prenom.='<option value="'.$donnees_prenom ['agent_id'].'">'.$donnees_prenom ['prenom'].'</option>';
}
 
$reponse_prenom->closeCursor();
 
?>
codeHTML_prenom+='<?php echo $optionsHTML_prenom ."</select>"; ?>';
 
function charger_champs(prenom_ident)
{
	<?php
$reponse_nom = $bdd_mission_msas->query('SELECT * FROM  agent where agent_id='+prenom_ident+'');
 $optionsHTML_nom="";				
		while ($donnees_nom = $reponse_nom->fetch())
{
	$optionsHTML_nom.='<option value="'.$donnees_nom ['agent_id'].'">'.$donnees_nom ['nom'].'</option>';
}
 
$reponse_nom->closeCursor();
 
?>
codeHTML_nom+='<?php echo $optionsHTML_nom ."</select>"; ?>';
 
 
<?php
	   	$reponse_sitfam = $bdd_mission_msas->query('SELECT * FROM  situation_famille sit,agent ag where (ag.agent_id='+prenom_ident+'and ag.sitfamille_id=sit.sitfamille_id)');
		 $optionsHTML_sitfam="";				
		while ($donnees_sitfamille = $reponse_sitfam->fetch())
{
	$optionsHTML_sitfam.='<option value="'.$donnees_sitfamille ['sitfamille_id'].'">'.$donnees_sitfamille ['siuationfamille'].'</option>';
}
 
$reponse_sitfam->closeCursor();
 
?>
codeHTML_sitfamil+='<?php echo $optionsHTML_sitfam ."</select>"; ?>';
 
}
cell_prenom.innerHTML = codeHTML_prenom;
cell_nom.innerHTML=codeHTML;
 cell_sitfamille.innerHTML = codeHTML_sitfamil;
 
}

Mais a l’exécution, il m'affiche une page blanche
Vous savez pas quelle est la solution ?

Merci d'avance

02/12/2019, 14h38
Isher

Bonjour,

Il semble que vous mélangiez le code javascript et le code PHP dans le même source.
Le PHP est exécuté coté serveur pour générer la page html, le code javascript est exécuté coté client dans le navigateur lorsque la page est affichée. Il n'est donc plus possible d'appeler des fonctions PHP.

Le mieux est de créer une API REST et de l'appeler dans le code javascript avec XMLHttpRequest ou mieux avec une librairie comme axios par exemple, puis d'afficher le résultat dans la page.
02/12/2019, 17h11
madinadiouf
Bonjour,

je ne maîtrise pas API REST ou les librairies.

Y'as pas un autre moyen ?
Exemple ici
Code:

1 2 var codeHTML_prenom= '<select id="prenom_ag[]" onchange="charger_champs(this.value,ligne)"><option value="-1">Choisir prenom</option>';
comment dire que this.value et ligne sont des variables javascript ?