Utiliser un paramètre Javascript dans une requête PHP

**madinadiouf** · 04/12/2019, 14h40

Bonjour,

Je veux spécifier valeur_prenom dans la requête comment faire ?
javascript et je veux l'utiliser dans un requête php

comme ceci

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
function charger_champ(valeur_prenom)
{
<?php
 include('functions.php');
 $bdd_mission_msas=connect();
$reponse_nom = $bdd_mission_msas->query('SELECT nom FROM  agent where agent_id='.+valeur_prenom.'');
while ($donnees_nom = $reponse_nom->fetch())
{
	echo $donnees_nom ['nom']);
}
?>
}

Comment faire ?

**NoSmoking** · 04/12/2019, 15h16

Bonjour,

• JavaScript s'exécute côté client, hors NodeJS
• PHP s'exécute côté serveur et est inconnu côté client

La communication Client → Serveur peut se faire en Ajax mais absolument pas comme tu l'envisages.

Voir :
↪ Comprendre les mécanismes d'AJAX

**madinadiouf** · 04/12/2019, 16h07

Bonjour,

J'utilise maintenant Ajax mais mon problème est que ma requête ajax ne s’exécute qu’une seule fois alors que il est dans une fonction qui s’exécute qu'a chaque fois qu'une nouvelle ligne est créée et que le champ select change de valeur.
Voici le

Code HTML :

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

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"/>

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
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
 
<script>
        "use strict";
	var ligne ;	
var code_HTML_nom;	
var code_HTML_sitfam;
 
function ajouteLigne(tableID)
{
	var table = document.getElementById(tableID);
	ligne= table.insertRow(-1);
    var rowNumber = table.childNodes.length;
    var cell_prenom = ligne.insertCell(0);
 
 
 
 
	    var codeHTML_prenom= '<select id="prenom_ag[]" onchange="charger_champ(this.value)" ><option value="-1">Choisir prenom</option>';
 
 
		code_HTML_nom='<input id="test"/>';
		code_HTML_sitfam='<input id="test_sitf"/>';
	 <?php
	   include('functions.php');
        $bdd_mission_msas=connect();
		$reponse_prenom = $bdd_mission_msas->query('SELECT * FROM  agent');
		 $optionsHTML_prenom="";				
		while ($donnees_prenom = $reponse_prenom->fetch())
{
	$optionsHTML_prenom.='<option value="'.$donnees_prenom ['agent_id'].'">'.$donnees_prenom ['prenom'].'</option>';
}
 
$reponse_prenom->closeCursor();
 
?>
codeHTML_prenom+='<?php echo $optionsHTML_prenom ."</select>"; ?>';
cell_prenom.innerHTML=codeHTML_prenom;
 
 
 
 
}
 
function charger_champ(valeur_prenom)
{
	var cell_nom = ligne.insertCell(1);
			  var cell_sitf = ligne.insertCell(2);
             cell_nom.innerHTML=code_HTML_nom;
			 cell_sitf.innerHTML=code_HTML_sitfam;
 
	$.post(
            'recupere_nom.php', // Un script PHP que l'on va créer juste après
            {
                valeur_prenomsd : valeur_prenom
                		// Nous récupérons la valeur de nos input que l'on fait passer à connexion.php
 
            },
 
            function(data){
 
 
 
 
 
			 var words = data.split(',');
			 		document.getElementById("test").value=words[0];
			document.getElementById('test').disabled=true;
             document.getElementById("test_sitf").value=words[1];	
             document.getElementById('test_sitf').disabled=true;
 
 
 
            },
 
            'text'
         );
 
 
 
 
 
 
 
}
 
 
 
 
 
        $( window ).load( function(){
 
        });
 
 
    </script>

code recupere_nom.php

Code PHP :

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
 
 
	<?php
	     include('functions.php');
	     $bdd_mission_msas=connect();
		 $tab_ag = array();
		 $valeur_prenom=$_POST['valeur_prenomsd'];
		 if(( !empty($valeur_prenom)&& ($valeur_prenom!=-1)))
		 {
 
 
 
		$reponse_nom = $bdd_mission_msas->query('SELECT nom FROM  agent where agent_id='.$valeur_prenom.'');
 
		while ($donnees_nom = $reponse_nom->fetch())
{
	array_push($tab_ag,$donnees_nom ['nom']);
}
 
$reponse_nom->closeCursor();
 
$reponse_sitf = $bdd_mission_msas->query('SELECT siuationfamille FROM  agent ag,situation_famille sitf where (agent_id='.$valeur_prenom.' and ag.sitfamille_id=sitf.sitfamille_id)');
 
		while ($donnees_sitf = $reponse_sitf->fetch())
{
	array_push($tab_ag,$donnees_sitf ['siuationfamille']);
}
 
$reponse_sitf->closeCursor();
 
		 }
		 else
		 {
			 array_push($tab_ag,"KO");
		 }
 
echo implode(',',$tab_ag);
?>

Mais quand je clique sur le bouton Ajout agent, à la première ligne quand je sélectionne le prenom, le nom et la situation se chargent sans problème mais quand je crée une deuxième ligne, ça ne charge pas. j'ai l'impression que ma requête ajax ne s’exécute qu’une seule fois.

Quel est le problème ?

**NoSmoking** · 05/12/2019, 10h25

Les premières choses à faire sont de regarder le code HTML généré, CTRL +U, et d'observer les messages dans la console du navigateur, F12.

**madinadiouf** · 05/12/2019, 11h04

Bonjour,

Juste il n'y a aucun message dans la console du navigateur.
Le problème est que la requête ajax n’amène les donnes que quand je change la valeur du champ sur la première ligne. sur la deuxième ligne quand je change de valeur, aucune donnée n'est amenée ??

**NoSmoking** · 05/12/2019, 11h55

sur la deuxième ligne quand je change de valeur, aucune donnée n'est amenée ??

Pas exactement !

Tu as ceci comme code que tu dupliques à chaque ajout d'une ligne :

Code :

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

1
2
code_HTML_nom='<input id="test"/>';
code_HTML_sitfam='<input id="test_sitf"/>';

hors une ID doit être UNIQUE, bilan lorsque tu fais ta requête se sont toujours les premiers champs qui sont remplis.

Il te faut ajouter ces champs au retour de ta réponse en leur donnant un name sous forme de tableau, quelque chose comme

Code :

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
$.post('recupere_nom.php', {
  valeur_prenomsd: valeur
}, function (data) {
  const words = data.split(',');
  // création des cellules
  const cellNom = ligne.insertCell(1);
  const cellSitf = ligne.insertCell(2);
  // création élément et initialisation
  const inputNom = document.createElement("INPUT");
  inputNom.name = "name[]";
  inputNom.disabled = true;
  inputNom.value = words[0];
  // ajout à la cellule
  cellNom.appendChild(inputNom);
  // création élément et initialisation
  const inputSitf = document.createElement("INPUT");
  inputSitf.name = "sitf[]";
  inputSitf.disabled = true;
  inputSitf.value = words[1];
  // ajout à la cellule
  cellSitf.appendChild(inputSitf);
}, 'text');

• Ta variable ligne est visiblement globale, ce n'est pas ce qui se fait de mieux, tu pourrais récupérer la <tr> parent de ton <select>, mais cela sera au prochain épisode.

• Je note également que tu utilises $.post, de jQuery, si c'est juste pour Ajax, cela c'est superflu

**madinadiouf** · 05/12/2019, 14h05

Bonjour,

Parfait ça marche sauf que il se trouve que quand je change de valeur sur le champ select, les input sont remplaces par leurs nouvelles valeurs mais les anciennes valeurs sont déplacées c'est a dire s'ajoute aux cellules déjà existantes
Il faut qu'on lui dise que si on change de valeur, qu'il conserve les cellules déjà crées. ?
voici une capture d’écran de l'effet créé cap_ecran.docx cap_ecran.docx
Vous voyez à la suite du <th> Direction , il met les anciennes données.

**NoSmoking** · 05/12/2019, 14h32

Plutôt que de joindre un fichier il est préférable de placer l'image, pas trop grosse, directement dans le post.

Bon il semblerait que tu ais compris le principe donc on va reprendre certains points, mais avant j'aimerais savoir si les données saisies doivent être envoyées côté serveur.

**madinadiouf** · 05/12/2019, 14h55

Bonjour,

Oui les données saisies vont être envoyées sur un serveur pour être enregistres dans une base de données.
Je compte utiliser Ajax sur un événement click d'un bouton valider.

Mais est-ce que vous avez compris le problème que vous expliquais précédemment c'est à dire quand on change de valeur sur le champ select les anciennes cellules contenant les input sont dessalées.

**NoSmoking** · 05/12/2019, 15h19

Mais est-ce que vous avez compris le problème

je crois que oui

ce que je te propose c'est de créer toutes les éléments que tu va avoir besoin pour l'affichage des données pour un prénom, ta fonction pourrait ressembler à cela

Code :

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
function ajouteLigne(tableID) {
  const table = document.getElementById(tableID);
  const oLigne= table.insertRow(-1);
  const cellPrenom = oLigne.insertCell(0);
  const prenomHTML = '<select id="prenom_ag[]" onchange="chargerChamp(this)" ><option value="-1">Choisir prenom</option>';  
  <?php
    include('functions.php');
    $bdd_mission_msas=connect();
    $reponse_prenom = $bdd_mission_msas->query('SELECT * FROM  agent');
    $optionsHTML_prenom="";
    while ($donnees_prenom = $reponse_prenom->fetch()) {
      $optionsHTML_prenom.='<option value="'.$donnees_prenom ['agent_id'].'">'.$donnees_prenom ['prenom'].'</option>';
    }
    $reponse_prenom->closeCursor();
  ?>
  prenomHTML +='<?php echo $optionsHTML_prenom ."</select>"; ?>';
  cellPrenom.innerHTML = prenomHTML;
 
  // création des éléments utiles
  const cellNom = oLigne.insertCell();
  const inputNom = document.createElement("INPUT");
  inputNom.name = "name[]";
  inputNom.disabled = true;
  cellNom.appendChild(inputNom);
 
  const cellSitf = oLigne.insertCell();
  const inputSitf = document.createElement("INPUT");
  inputSitf.name = "sitf[]";
  inputSitf.disabled = true;
  cellSitf.appendChild(inputSitf);
}

tu peux le faire à grand coup de innerHTML si le coeur t'en dit

Nota : on passe this en paramètre de la fonction chargerChamp et non plus la valeur cela va nous permettre de récupérer le <tr> concernée.

Maintenant lors du changement de champ il suffira d’effacer les champs et de les remplir au retour de la requête, donc quelque chose comme :

Code :

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
function chargerChamp(obj) {
  const valeur = obj.value;
  // récupération TR parent
  const oTR = obj.parentNode.parentNode;
  // on nettoie les valeurs
  oTR.cells[1].firstElementChild.value = "";
  oTR.cells[2].firstElementChild.value = "";
  // on requête si valeur définie
  if (valeur) {
    $.post('recupere_nom.php', {
      valeur_prenomsd: valeur
    }, function (data) {
      const words = data.split(',');
      oTR.cells[1].firstElementChild.value = words[0];
      oTR.cells[2].firstElementChild.value = words[1];
    })
  }
}

voilà en gros.

**madinadiouf** · 05/12/2019, 16h21

Bonjour,

Merci beaucoup, parfait, ça marche à merveille.
Maintenant la toute dernière chose importante c'est d'envoyer par ajax les données saisies.
La seule donnée qui me préoccupe c'est le prénom, je dois envoyer l'ensemble des valeurs prénoms de toutes les lignes.
Je sais que les valeurs sont dans prenom_ag[] mais comment les faire passer par ajax et les récupérer dans la page php qui enregistre les données.?????

**NoSmoking** · 05/12/2019, 16h54

Pour commencer, je n'y ai pas fait attention, il te faut remplacer l'id="prenom_ag[]" par name="prenom_ag[]" dans cette ligne

Code :

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

const prenomHTML ='<select id="prenom_ag[]" onchange="charger_champ(this)"><option value="">Choisir prenom</option><option>Jean<option>Michel</select>'

ensuite il te faut « serialiser », avant envoi, les prénoms avec par exemple :

Code :

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

1
2
3
4
5
6
7
8
9
10
function serializePrenoms() {
  const elements = document.querySelectorAll("[name^='prenom_ag']");  //sélecteur des champs
  const tab = [];
  elements.forEach(function (el) {
    if (el.value) {
      tab.push(el.value);
    }
  });
  return tab;
}

je me rend compte, de par ta manière de procéder, que dans les name les crochets n'étaient pas forcément nécessaire, en absence de solution de replis par envoi de formulaire.

**madinadiouf** · 05/12/2019, 16h59

Bonjour,

Merci je vais l’implémenter et je vous tiendrai au courant.
Mais ici dans ce formulaire, les autres champs à envoyer sont des input simples, seule le le prénom était un tableau.

Utiliser un paramètre Javascript dans une requête PHP

JavaScript

Discussions similaires

Partager

Partager