Discussion :

[maxredphenix]

Bonjour à tous,

Je suis en train de créer une appli php. Je voudrais savoir comment récupérer la valeur(numéro de tel) d'un input afin de le rechercher un fichier csv et remplir les autres inputs avec les valeurs correspondantes à ce numéro.

Je m'explique, j'ai un fieldset dans mon formulaire dans lequel il y à divers input, on peut rentrer le numéro, le nom l'utilisateur etc...


De plus j'ai accès à un csv servant à l'origine pour l'annuaire outlook donc la structure est la suivante:
identifiant;nom;prenom;@mail;service;telephone;batiment
identifiant;nom;prenom;@mail;service;telephone telephone2;batiment

J'aimerai que lorsque l'on rempli le champ numéro d'appel ce dernier active automatiquement une recherche dans le fichier csv afin de vérifier que le numéro existe (avec une boucle en cas de changement ulterieur du numéro) et si c'est le cas on rempli les autres input qui suivent avec les infos qui leurs correspondent (enfin ce qui est dispo, car il peut manquer l'@mail ou autre)

Après j'ai crée mes inputs de cette manière et je sais pas s'il y a un truc particulier à faire pour faire cette recherche automatique et remplissage automatique si numéro existant:

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
<form name="form_demande" method="post" action="../formulaires_traitement/traitement_demande.php">
        <div id="num_appel"><fieldset style="border:none">      
                <div id="fourcolonnes_centreg"> <!-- Mettre au milieu à gauche du fieldset-->
                        <span class="num_appelant">
                                <label for="num_appelant">N° de l'appelant: </label>
                                <input type="text" name="num_appelant" id="num_appelant" placeholder="ex: 34100" />
                        </span>
                </div>
                <div id="fourcolonnes_centred"> <!-- Mettre au milieu à droite du fieldset-->
                        <label>Date Appel: </label>
                        <input type="text" id="date_appel" name="date_appel" value="<?php echo date('d-m-Y'); ?>" /> <!-- Affichage du calendrier avec date du jour rentrer automatiquement -->
                </div>
                <div id="fourcolonnes_droite"> <!-- Mettre à droite du fieldset-->
                        <label>Heure Appel: </label>
                        <input type="text" id="timepicker" name="heure_appel" value="<?php echo date('H:i'); ?>" /> <!-- Affichage de l'heure: Rentrer automatiquement -->
                </div>
        </fieldset>
        </div>
        <div class="infoglobales"><fieldset>
                <legend>Informations Globales</legend>
                        <div id="infoglobalemilieu">
                                <span>
                                        <label for="nom_demandeur">Demandeur: </label>
                                        <input type="text" name="nom_demandeur" id="nom_demandeur" maxlength="30" />
                                </span>
                                <br />
                                <span>
                                        <label for="service">Service: </label>
                                        <input type="text" name="service" id="service" maxlength="50" />
                                </span>
                        </div>
                        <!-- Block de droite du fieldset Infoglobale -->
                        <div id="infoglobaledroite">
                                <span>
                                        <label for="batiment">Bâtiment: </label>
                                        <input type="text" name="batiment" id="batiment" maxlength="10" />
                                </span>
                                <span>
                                        <label for="local">Local: </label>
                                        <input type="text" name="local" id="local" />
                                </span>
                        </div>
                </fieldset>
        </div>
</form>

ex de fichier csv (désolé j'ai mis des valeurs au pif):
------------------------------------------------------------------------------------------------------------------
10101010;Dupont;Alfred;alfred@test.fr;MON/PTIT/SERVICE;0380808080 0320202020; Bt 012
10101011;Dupont;Henri;henri@test.fr;CINE DU COIN;0380808081; Bt 035
10101012;Dupond;Jean Claude;jc@test.fr;ESSENCE;0380808082; Bt 122
10101013;Dupond;Antoinette;toinette71@test.fr;POMPIER;0380808083; Bt 135
10101014;Dubois;Fredreric;fredymercury@test.fr;DANS LE BOIS;0380808084; Bt 148
10101015;Faitenfler;Ilsé;malbarre@test.fr;PAS DE TRAVAIL;0380808085; Bt 160
10101016;Inconnu;Les;inconnu@test.fr;LUI ON SAIT PAS;0380808086; Bt 170
-----------------------------------------------------------------------------------------------------------------------
Est-ce que quelqu'un sait comment faire ceci? sachant qu'en plus il arrive qu'une personne ait 2 num

merci d'avance parce que la j'avoue ne pas savoir faire ce style d'autocomplete

maxredphenix

[headmax]

Salut faudrait que tu convertit tes données csv en json, a partir de la tu sera plus alèse pour manipulé tes données avec javascript.

Côté PHP

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
function convCsvToArrayToJson($file){
	$datas = array();
	$handle = fopen($file, "r");
	while (($data = fgetcsv($handle)) !== FALSE) {
		foreach ($data as $k=>$v){
		 	$datas[$k] = array_push($datas, explode(";", $v));
		}
	}
	return json_encode($datas);
}
 
echo convCsvToArrayToJson("test.csv"); //donnée json manipulable comme un tableau en js.

J'ai pas testé si ça marchait mais l'idée et la.

Tu pourras ensuite faire ton module js de recherche pour parcourir ce nouveau tableau :

Côté JS

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
<script type="text/javascript">
var JsonData = <?php echo convCsvToArrayToJson("test.csv"); ?>;
/*
JsonData[nclient][fields]
 
fields :
id             [0]
nom          [1]
prenom      [2]
mail           [2]
job            [2]
tel             [2]
code          [2]
*/
alert(JsonData[1][0]); //client 2 affichage de son id ...
</script>

[maxredphenix]

Bonjour,

Désolé pour ce retard, j'ai pas vu qu'il y avait une réponse et j'ai reçu aucun mail.

Je vais regarder cela de plus prêt, je savais pas que la conversion en json était si simple.

En faite une fois en json, tu construis un tableau et tu fait une autocompletion des champs via le résultat N° xx du tableau qui lui correspond?

Encore merci de ta réponse

maxredphenix

[headmax]

Oui en gros il faut que tu parcours ton tableau json, il te faut les événement javascript déclencheur de ton autocomplétion :

Soit en utilisant sur un input événement onchange, et bien entendu si tu a peur que ton client disparaisse après un refresh de la page pour X raisons..

Tu te créer un cookies ou une session pour garder en mémoire le dernier cookie la dernière session du dernier ID recherché.

Code :

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

1
2
3
 
<body onload="findClient('<?php echo $_SESSION["num_appelant"]; ?>');">
<input type="text" name="num_appelant" id="num_appelant" placeholder="ex: 34100" onchange="findClient(this.value);" />

Ta function findClient est la function qui parcours le tableau et qui compare l'unique paramètre IDclient ou num_appelant avec le tableau js, si le trouve il l'affiche sinon rien.

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
 
//juste le parcours du tableaux
function findClient(idClient){
var clients = <?php echo convCsvToArrayToJson("test.csv"); ?>
for(c in clients){
  if(c.id == idClient)
  return c;
}
};
 
ou
 
//parcours et alimetation du DOM
function findClient(idClient){
var clients = <?php echo convCsvToArrayToJson("test.csv"); ?>
for(c in clients){
  if(c.id == idClient)
     document.getElementById("nom_demandeur").value = c.nom;
     document.getElementById("num_appelant").value = c.tel;
    ...
}
};

S'est du oneshoot j'ai pas testé mais l'idée est là et dans cette exemple il ne s'agit que de l'autocomplétion de ton champs de recherche par id, tu pourras aire la même chose pour tout est autres champs, biensur en passant un second paramètre a ta function et un switch et tou pourra jonglé d'un champs à l'autre, recherche pas nom, prenom, id...
Bonne chance

[maxredphenix]

Bonjour,

Merci pour ta réponse, c'est super ce que tu as fait, je vais tester cela de suite.

Par contre juste comme ça pour voir si j'ai compris (je suis plus que débutant en javascript),
Vu que je veux juste faire une recherche par numéro, je laisse ce type de code pour chaque input:

Code :

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

1
2
3
4
5
6
 
<input type="text" name="num_appelant" id="num_appelant" placeholder="ex: 34100" onchange="findClient(this.value);" />
<input type="text" name="nom_demandeur" id="nom_demandeur" maxlength="30" />
<input type="text" name="service" id="service" maxlength="50" />
<input type="text" name="batiment" id="batiment" maxlength="10" />
<input type="text" name="local" id="local" />

Mais par contre, comment est-ce que la valeur est affecter à chaque champ? c'est la commande suivante?:

Code :

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

document.getElementById("num_appelant").value = c.tel;

Encore merci de ton aide

Cordialement

maxredphenix

[headmax]

oui elle te permet de remplir le champs avec la valeur du tableau, et correspondant à l'action de saisit fait sur le champs input dont l'id est "num_appelant".

Code :

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

1
2
3
 
var objNumAppelant = document.getElementById("num_appelant"); //obj html
objNumAppelant.value = "mavaleur" // donnera <input type="text" id="num_appelant" value="mavaleur">

Ici on utilise l'attribut value (le text contenue dans input).
Tu n'a pas a changer la valeur num_appelant puisqu'il est fait par celui qui fait la recherche. Donc tu doit ciblé tes objects avec getElementById("id_input") et lui passer la valeur que nous retourne le tableau json.

[maxredphenix]

Bonsoir,

Ok, c'est super alors. J'ai du coup pas eu le temps hier mais je regarder cela ce soir et je te tiens au courant dès que cela fonctionne (ou si je rencontre des soucis )

Encore merci

maxredphenix

[headmax]

Ok pas de soucis, bonne chance.

[maxredphenix]

Bonjour,

Je viens de créer ma page lirecsv.php qui est appeler via un require_once dans mon formulaire. Voial le code de lirecsv:

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
<?php 
	// Fonction de conversion du fichier CSV contenant l'annuaire du Site
	function convCsvToArrayToJson($file){
	$datas = array();
	$handle = fopen($file, "r");
	while (($data = fgetcsv($handle)) !== FALSE) {
		foreach ($data as $k=>$v){
		 	$datas[$k] = array_push($datas, explode(";", $v));
		}
	}
	return json_encode($datas);
}
 
	// Fonction de parcours du Tableau JSON (annuaire) et alimentation des champs
	function findClient(idClient){
		var clients = <?php echo convCsvToArrayToJson("../../data/annuaire.csv"); ?>
		for(c in clients){
			if(c.id == idClient)
				document.getElementById("num_appelant").value=c.tel;
				document.getElementById("nom_demandeur").value=c.nom;
				document.getElementById("service").value=c.service;
				document.getElementById("batiment").value=c.batiment;
		}
	}
?>

et voila la partie intéressante formulaire:

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
<span class="num_appelant">
						<label for="num_appelant">N° de l'appelant: </label>
						<!-- Le onchange sert à faire un appel à la fonction findClient pour remplir divers champs via l'annuaire. 
								à chaque modification du champ la fonction ira chercher sa correspondance dans le fichier annuaire-->
						<input type="text" name="num_appelant" id="num_appelant" placeholder="ex: 34100" onchange="findClient(this.value);"/>
					</span>
<div id="infoglobalemilieu">
						<span>
							<label for="nom_demandeur">Demandeur: </label>
							<input type="text" name="nom_demandeur" id="nom_demandeur" maxlength="30" />
						</span>
						<br />
						<span>
							<label for="service">Service: </label>
							<input type="text" name="service" id="service" maxlength="50" />
						</span>
					</div>
					<!-- Block de droite du fieldset Infoglobale -->
					<div id="infoglobaledroite">
						<span>
							<label for="batiment">Bâtiment: </label>
							<input type="text" name="batiment" id="batiment" maxlength="10" />
						</span>
						<span>
							<label for="local">Local: </label>
							<input type="text" name="local" id="local" />
						</span>
					</div>

mais j'ai une erreur qui s'affiche:
Parse error: syntax error, unexpected ')', expecting '&' or T_VARIABLE in C:\wamp\www\Monsite\php\formulaires_creation\lirecsv.php on line 15

soit à la première ligne de la fonction findclient. Je vois pas du tout ou est le souci...est-ce que tu peux m'aider?

Encore merci

[NoSmoking]

Bonjour,
ton PHP me semble en cause

ligne 1: <?php.
...
ligne 16: var clients = <?php echo convCsvToArrayToJson("../../data/annuaire.csv"); ?>.
...
ligne 25: ?>.

Problème de construction donc

[headmax]

Oui j'ai oublié le point virgule à la fin.
js function findClient

Code :

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

1
2
 
var clients = <?php echo convCsvToArrayToJson("../../data/annuaire.csv"); ?>;

Si tu es sur PHP5 normalement tu n'a pas besoin de simple quote.
Par contre si tu pouvais me faire un var_dump(json_encode($datas)); directement dans la function et me retourner le resultat sa m'aiderais grandement.

[maxredphenix]

Je viens de tester mais cela ne change rien, j'ai toujours la même erreur. Par contre si je rajoute un $ devant idclient l'erreur passe à la ligne suivante, est-ce qu'il faut le mettre ou pas?

Je viens de faire un var dump, voila le resultat si je lance le fichier lirecsv.php dans le navigateur:

string '[7,["10101011","Dupont","Henri","henri@test.fr","CINE DU COIN","34100"," Bt 035"],["10101012","Dupond","Jean Claude","jc@test.fr","ESSENCE","380808082"," Bt 122"],["10101013","Dupond","Antoinette","toinette71@test.fr","POMPIER","380808083"," Bt 135"],["10101014","Dubois","Fredreric","fredymercury@test.fr","DANS LE BOIS","380808084"," Bt 148"],["10101015","Faitenfler",null,"malbarre@test.fr","PAS DE TRAVAIL","380808085"," Bt 160"],["10101016","Inconnu","Les","inconnu@test.fr","LUI ON SAIT PAS","380808086"," '... (length=521)

j'ai fait ce code ci pour lirecsv.php:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php 
	// Fonction de conversion du fichier CSV contenant l'annuaire du Site
	function convCsvToArrayToJson($file){
	$datas = array();
	$handle = fopen($file, "r");
	while (($data = fgetcsv($handle)) !== FALSE) {
		foreach ($data as $k=>$v){
		 	$datas[$k] = array_push($datas, explode(";", $v));
		}
	}
	return var_dump(json_encode($datas));
}
echo convCsvToArrayToJson("../../data/annuaire.csv");
?>

J'espère que c'est ce que tu voulais.

Merci

[headmax]

Ok j'ai compris ou est ton erreur :

Il faut que tu met dans ta balise script JS et non dans PHP.

Code :

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

1
2
3
4
5
 
<script type="text/javascript">
var clients = <?php echo convCsvToArrayToJson("../../data/annuaire.csv"); ?>;
alert(clients); /* ton tableau js doit est retourné */
</script>

Ne pas definir clients dans les balises PHP, il s'agit d'une affectation d'un tableau PHP json a une variable javascript.
Tiens moi au courant.

[maxredphenix]

je viens de mettre ton code à la suite de la fonction de conversion en json:

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
<?php
	// Fonction de conversion du fichier CSV contenant l'annuaire du Site
function convCsvToArrayToJson($file){
	$datas = array();
	$handle = fopen($file, "r");
	while (($data = fgetcsv($handle)) !== FALSE) {
		foreach ($data as $k=>$v){
		 	$datas[$k] = array_push($datas, explode(";", $v));
		}
	}
	return json_encode($datas);
}
?>
<script type="text/javascript">
var clients = <?php echo convCsvToArrayToJson("../../data/annuaire.csv"); ?>;
alert(clients); /* ton tableau js doit est retourné */
</script>

Si je lance la page lirecsv, j'ai un popup qui contient:



Par contre si je mets return var_dump(json_encode($datas)); j'ai ...rien

J'espere que cela t'aide un peu

merci

[maxredphenix]

Et comme je suis sûr d'avoir fait un truc qui n'était pas ce que tu demandais, j'ai tout mis à l'intérieur de balise <script>:

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
<script type="text/javascript">
	// Fonction de conversion du fichier CSV contenant l'annuaire du Site
	function convCsvToArrayToJson($file){
	$datas = array();
	$handle = fopen($file, "r");
	while (($data = fgetcsv($handle)) !== FALSE) {
		foreach ($data as $k=>$v){
		 	$datas[$k] = array_push($datas, explode(";", $v));
		}
	}
	return json_encode($datas);
}
 
// Fonction de parcours du Tableau JSON (annuaire) et alimentation des champs
	function findClient(idClient){
		var clients = <?php echo convCsvToArrayToJson("../../data/annuaire.csv"); ?>;
		for(c in clients){
			if(c.id == idClient)
				document.getElementById("num_appelant").value=c.tel;
				document.getElementById("nom_demandeur").value=c.nom;
				document.getElementById("service").value=c.service;
				document.getElementById("batiment").value=c.batiment;
		}
	}
</script>

Mais si je lance ma page contenant mon formulaire avec le code dans la balise <head> j'ai juste l'image d'arrière plan.

Si je fais un require_once du fichier lirecsv avant le code de l'input num_appelant tout ce qui est avant est afficher mais pas le reste.

[headmax]

Tu avance y a plus d'erreur normalement .

[headmax]

Ok donc pour la suite :

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
 
function findClient(idClient){
		var clients = <?php echo convCsvToArrayToJson("../../data/annuaire.csv"); ?>;
		for(c in clients){
alert(c.id);
alert(c.nom);
alert(c.tel);
alert(c.service);
			if(c.id == idClient)
				document.getElementById("num_appelant").value=c.tel;
				document.getElementById("nom_demandeur").value=c.nom;
				document.getElementById("service").value=c.service;
				document.getElementById("batiment").value=c.batiment;
		}
	}

ça te retourne bien les valeurs?

[maxredphenix]

non j'ai rien du tout si je lance directement lirecsv.php et idem qu'avant avec le require_once dans ma page formulaire

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
<script type="text/javascript">
	// Fonction de conversion du fichier CSV contenant l'annuaire du Site
	function convCsvToArrayToJson($file){
		$datas = array();
		$handle = fopen($file, "r");
		while (($data = fgetcsv($handle)) !== FALSE) {
			foreach ($data as $k=>$v){
				$datas[$k] = array_push($datas, explode(";", $v));
			}
		}
		return json_encode($datas);
	}
 
function findClient(idClient){
	var clients = <?php echo convCsvToArrayToJson("../../data/annuaire.csv"); ?>;
	for(c in clients){
	alert(c.id);
	alert(c.nom);
	alert(c.tel);
	alert(c.service);
		if(c.id == idClient)
			document.getElementById("num_appelant").value=c.tel;
			document.getElementById("nom_demandeur").value=c.nom;
			document.getElementById("service").value=c.service;
			document.getElementById("batiment").value=c.batiment;
	}
}
</script>

est-ce que tu peux m'expliquer comment fonctionne le principe des value=c.tel etc.., comment le code js fait pour savoir que le téléphone est placé à tel endroit dans le json etc...?

Je te remercie

Passe une bonne soirée

maxredphenix

[headmax]

Tout simplement car il CIBLE élement HTML par son ID :

Exemple :
html

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
 
<html>
<body>
<div id="bill">Mon text dans div</div>
<input id="boule" type="text" value="la valeur dans input"/>
<script type="text/javascript">
window.onload = function(){
alert(document.getElementById("bill").textContent); //il t'affichera Mon text...*/
alert(document.getElementById("boule").value); /*il taffichera la valeur dans ...*/
/* SI tu souhaite changer les valeurs */
alert("ON va changer l'input observe bien :");
document.getElementById("boule").value="Vive Json";
 
};
</script>
</body>
</html>

[maxredphenix]

Bonjour,

Merci pour ton exemple, j'ai un peu mieux compris le système d'affectation des valeurs dans un champs via son id (je débute vraiment en js). Par contre je me suis mal exprimé, c’était comment est-ce que l'on affecte les bonnes valeurs dans tel champs?
par exemple : 10101012;Dupond;Jean Claude;jc@test.fr;ESSENCE;0380808082; Bt 122
Comment est-ce que le js va savoir que le téléphone se trouve à la 6eme position dans le JSON ? et du coup comment est-ce qu'on lui lui que c.tel c'est tout ce qui se trouvera en 6eme position?

Désolé d'être chiant je voudrais juste comprendre le principe et pas simplement copier ce que tu me dis parce que même si j'en ai besoin, le mieux c'est quand même d'apprendre

Encore merci pour le temps que tu me consacres. Passe une bonne journée

En attente de tes nouvelles,

maxredphenix