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

Version imprimable

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:

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 ?

04/12/2019, 15h16
NoSmoking

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

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:

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:

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:

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 ?

05/12/2019, 10h25
NoSmoking

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.
05/12/2019, 11h04
madinadiouf

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

Citation:

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:

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:

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 ;)

05/12/2019, 14h05
madinadiouf

1 pièce(s) jointe(s)

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éé Pièce jointe 522122 Pièce jointe 522122
Vous voyez à la suite du <th> Direction , il met les anciennes données.
05/12/2019, 14h32
NoSmoking

https://www.developpez.com/template/kit/kitinfo.png 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.
05/12/2019, 14h55
madinadiouf

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.

Citation:

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:

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:

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.

05/12/2019, 16h21
madinadiouf

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

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:

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:

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.

05/12/2019, 16h59
madinadiouf

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.