Discussion :

[Ben-o]

Bonjour,

Je sollicite votre aide car je rencontre un problème avec un formulaire.

Je possède sur un site web une DB MySql de clients alimentée par un formulaire via, jusque-là rien de bien méchant.
J'ai ajouté une fonction d'autocomplétion en ajax pour le champ "nom".
Ce que je souhaiterai faire, c'est remplir automatiquement plusieurs autres champs ("prénom", "adresse"...) lorsqu'un nom est sélectionné.

Comment mettre en place ceci ?

Merci par avance.

PS : j'ai peut être posté au mauvais endroit, cela est peut être réalisable en php ?

[emmanuel.remy]

Salut,

Puisque tu récupères déjà le nom, quel est le souci pour faire de même avec d'autres infos ?

ERE

[Ben-o]

Merci pour ta réponse, je vais essayer de le faire en JS aussi alors.
J'avais récupéré le script pour l'autocomplétion sur le net.
J'espère m'en sortir pour réaliser l'autocomplétion des autres champs en fonction du champ nom.
Si j'ai un problème, je reviendrai par ici !

[emmanuel.remy]

Merci pour ta réponse, je vais essayer de le faire en JS aussi alors.
J'avais récupéré le script pour l'autocomplétion sur le net.
J'espère m'en sortir pour réaliser l'autocomplétion des autres champs en fonction du champ nom.
Si j'ai un problème, je reviendrai par ici !

Oui ou si tu ne manipules pas de gros volume de données tu peux peut-être rapatrier d'un coup toutes tes infos nécessaires ?

ERE

[Ben-o]

En fait j'ai actuellement une base de 700 clients environ avec plus ou moins 300 nouveaux clients pas mois.
Ca va faire beaucoup si je rapatrie tout.
Du coup il faudrait que j'aille chercher les infos (prénom, adresse...) au moment où l'on sélectionne le nom d'un client et pas avant.

[emmanuel.remy]

En fait j'ai actuellement une base de 700 clients environ avec plus ou moins 300 nouveaux clients pas mois.
Ca va faire beaucoup si je rapatrie tout.
Du coup il faudrait que j'aille chercher les infos (prénom, adresse...) au moment où l'on sélectionne le nom d'un client et pas avant.

Avec le temps c'est certain que cela va peser...

ERE

[Ben-o]

Arf, je bloque

Voici comment se présente le code.
J'ai donc une page "insertion.php" qui contient le formulaire de saisie d'un nouveau client et dont le champ nom possède une fonction d'autocomplétion :

Code :

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

1
2
3
4
5
6
7
8
9
10
<input type="text" name="nom" id="nom" tabindex="40" size="10" onfocus="this.className='focus';" onblur="this.className='normal';" />
<div id="auto_noms"></div>
<script type="text/javascript">
new Ajax.Autocompleter (
'nom',
'auto_noms',
'autocompleter_noms.php',
{method: 'post', paramName: 'nom'}
);
</script>

Ensuite, j'ai un autre fichier php "autocompleter_nom.php" qui lui contient la requête SQL pour récupérer tous les noms présents dans la base :

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
<?php
 
$tab_noms = array();
 
$requete_recuperation_noms = mysql_query("SELECT DISTINCT nom_client FROM t... ORDER BY nom_client ASC") or die('Erreur SQL !<br />'.mysql_error());
 
while ($donnees = mysql_fetch_array($requete_recuperation_noms)) {
	$tab_noms[] = $donnees['nom_client'];
}
 
$q = $_POST['nom']; $i = 0;
 
if ($q != "") {
	echo '<ul>';
		foreach($tab_noms as $nom) {
			if (substr(strtolower($nom),0,strlen($q)) == strtolower(stripslashes($q))) {
				echo '<li><a href="#" onclick="return false">'.htmlentities($nom).'</a></li>';
			}
		}
	echo '</ul>';
}
 
?>

Il faudrait donc, que quand un nom est sélectionné dans la liste, les champs "prénom", "adresse", "email"... se remplissent automatiquement.

Pouvez-vous m'aider à mettre ceci en place ?

Merci par avance.

[emmanuel.remy]

Salut,

Tes scripts te permettent de récupérer une liste de nom, puis de basculer le nom dans la zone de saisie.
Ensuite quand tu quittes cette zone de saisie et que le contenu a été modifié (nouveau nom, onchange) il faut que tu effectues un appel Ajax pour récupérer les infos concernant la personne.

Attention: si tu as des homonymes... L'idéal est donc de ne pas passer le nom mais la clé primaire que tu as en base...

ERE

[Ben-o]

Merci pour ta réponse.

Peux-tu me dire comment faire l'appel Ajax pour récupérer les infos ?

[emmanuel.remy]

Re,

A priori tu utilises une librairie particulière (scriptaculous ?) mais tu peux aussi te référer à ce tutoriel: http://siddh.developpez.com/articles/ajax/

ERE

[Ben-o]

Merci pour le lien.

Effectivement, j'utilise scriptaculous et prototype.
J'ai récupéré ça d'un tutorial sur le net, sans être un spécialiste du JS.

Si je comprends bien, le tutoriel que tu m'as communiqué est basé sur une autre méthode que scriptaculous, ça veut dire qu'il me faudrait tout recréer en fonction de ça ?

Désolé si mes questions sont bizarres, mais je ne suis vraiment pas un pro du JS...

[emmanuel.remy]

Salut,

Merci pour le lien.

Effectivement, j'utilise scriptaculous et prototype.
J'ai récupéré ça d'un tutorial sur le net, sans être un spécialiste du JS.

Si je comprends bien, le tutoriel que tu m'as communiqué est basé sur une autre méthode que scriptaculous, ça veut dire qu'il me faudrait tout recréer en fonction de ça ?

Désolé si mes questions sont bizarres, mais je ne suis vraiment pas un pro du JS...

Surtout pas et d'ailleurs tu peux même te facilter la vie en utilisant directement prototype. Regarde par là: http://www.prototypejs.org/learn/introduction-to-ajax

ERE

[Ben-o]

Ok !

J'y retourne alors !

[Ben-o]

J'ai suivi le tutoriel que tu m'as donné qui fait correspondre 2 listes déroulantes.

Je suis arrivé à faire correspondre un input à une liste déroulante (on choisit une option dans la liste et le champ "input" se remplit automatiquement, mais je n'arrive pas à faire correspondre 2 "input", ce dont j'ai besoin concrètement.

Voici mon code (j'ai conservé prototype et scriptaculous pour l'autocomplétion) :

Page principale partie 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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<script type='text/javascript'>
	function getXhr() {
		var xhr = null; 
		if(window.XMLHttpRequest)
			xhr = new XMLHttpRequest(); 
		else if(window.ActiveXObject){ 
			try {
				xhr = new ActiveXObject("Msxml2.XMLHTTP");
			}
			catch (e) {
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}
		}
		else { 
			alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
			xhr = false; 
		} 
		return xhr;
	}
 
	function go() {
		var xhr = getXhr();
		xhr.onreadystatechange = function() {
		if(xhr.readyState == 4 && xhr.status == 200) {
			leselect = xhr.responseText;
			document.getElementById('prenom').innerHTML = leselect;
		}
		}
 
		xhr.open("POST","ajax_autocomplete.php",true);
		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		sel = document.getElementById('nom');
		idnom = sel.options[sel.selectedIndex].value;
		xhr.send("nom_contact="+idnom);
	}
</script>

Page principale partie 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
18
19
20
21
<form>
	<fieldset>
		<legend>Champs liés</legend>
			<label>Nom contact</label>
				<input type="text" name="nom" id="nom" onchange='go()' />
					<div id="auto_noms"></div>
						<script type="text/javascript">
							new Ajax.Autocompleter (
							'nom',
							'auto_noms',
							'autocompleter_noms.php',
							{method: 'post', paramName: 'nom'}
							);
						</script>
 
			<label>Prénom contact</label>
				<div id='prenom' style='display:inline'>
					<input type="text" value="" />
				</div>
	</fieldset>
</form>

Page ajax_autocomplete.php :

Code :

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

1
2
3
4
5
6
7
8
9
<?php
	if(isset($_POST["nom_contact"])) {
		include ('../fonction_connexion.php');
		$res = mysql_query("SELECT prenom_contact FROM t_gestion_contacts WHERE nom_contact = ".$_POST["nom_contact"]."");
		while($row = mysql_fetch_assoc($res)) {
			echo "<input type='text' value='".$row["prenom_contact"]."' />";
		}
	}
?>

Comment faire ?

Encore merci.

[emmanuel.remy]

Trop compliqué, tu n'as pas lu le lien vers prototype

Code :

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

1
2
3
4
5
 
<div id="product">Nom du produit</div>
 
 
new Ajax.Updater('product', '/some_url', { method: 'get' });

Tu as UNE ligne de code à écrire.

ERE

[Ben-o]

Merci !

Ça doit donc donner quelque chose comme ça :

Page 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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<script type='text/javascript'>
 
	function getXhr() {
		var xhr = null; 
		if(window.XMLHttpRequest)
			xhr = new XMLHttpRequest(); 
		else if(window.ActiveXObject){ 
			try {
				xhr = new ActiveXObject("Msxml2.XMLHTTP");
			}
			catch (e) {
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}
		}
		else {
			alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
			xhr = false; 
		} 
		return xhr;
	}
 
	function go() {
		var xhr = getXhr();
		xhr.onreadystatechange = function() {
			if(xhr.readyState == 4 && xhr.status == 200) {
				leselect = xhr.responseText;
				document.getElementById('prenom').innerHTML = leselect;
			}
		}
 
		xhr.open("POST","ajax_autocomplete2.php",true);
		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		sel = document.getElementById('nom');
		idnom = sel.options[sel.selectedIndex].value;
		xhr.send("nom_contact="+idnom);
	}
 
</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
26
27
28
<form>
	<fieldset>
		<legend>Champs liés</legend>
			<label>Nom contact</label>
				<input type="text" name="nom" id="nom" onchange='go()' />
					<div id="auto_noms"></div>
						<script type="text/javascript">
							new Ajax.Autocompleter (
								'nom',
								'auto_noms',
								'autocompleter_noms.php',
								{method: 'post', paramName: 'nom'}
							);
						</script>
 
			<label>Prénom contact</label>
				<input type="text" name="prenom" id="prenom" />
					<div id='auto_prenom' style='display:inline'>
						<script type="text/javascript">
							new Ajax.Updater (
								'prenom',
								'ajax_autocomplete2.php',
								{method: 'get'}
							);
						</script>
					</div>
	</fieldset>
</form>

Page ajax_autocomplete2.php :

Code :

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

1
2
3
4
5
6
7
8
9
10
<?php
 
	if(isset($_POST["nom_contact"])) {
		include ('../fonction_connexion.php');
		$res = mysql_query("SELECT prenom_contact FROM t_gestion_contacts WHERE nom_contact = ".$_POST["nom_contact"]."");
		while($row = mysql_fetch_assoc($res)) {
			echo "<input type='text' value='".$row["prenom_contact"]."' />";
		}
	}
?>

Le problème, c'est que la variable $-POST['nom_contact'] est apparemment vide, donc ça ne me remplit pas le champ prénom.

Je dois pas être très loin, mais c'est toujours pas ça...

Merci encore pour ta patience.

[emmanuel.remy]

Ajoute ta variable du nom dans l'url appelée.

ERE

[Ben-o]

J'essaye ça !

[Ben-o]

Ça ne marche toujours pas...

J'ai ajouté la variable à l'url comme ceci :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<label>Prénom contact</label>
	<input type="text" name="prenom" id="prenom" />
		<div id='auto_prenom' style='display:inline'>
			<script type="text/javascript">
				new Ajax.Updater (
					'prenom',
					"ajax_autocomplete2.php?nom_contact='<?php echo $nom_contact; ?>'',
					{method: 'get'}
				);
			</script>
		</div>

Par contre, dans la partie JS de ma page HTML, j'appelle cette également la page "ajax_autocomplete2.php" avec la méthode POST ce coup-ci.

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
/* Méthode qui sera appelée sur le click du bouton */
	function go() {
		var xhr = getXhr();
		xhr.onreadystatechange = function() {
			if(xhr.readyState == 4 && xhr.status == 200) {
				leselect = xhr.responseText;
				document.getElementById('prenom').innerHTML = leselect;
			}
		}
 
		xhr.open("POST","ajax_autocomplete2.php",true);
		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		sel = document.getElementById('nom');
		idnom = sel.options[sel.selectedIndex].value;
		xhr.send("nom_contact="+idnom);
	}

Je suis un peu paumé je crois

[emmanuel.remy]

Re,

Paumé ? C'est un peu normal. Pas de problème plus que ça.

Il faut bien comprendre que Prototype s'occupe de tout pour tes appels AJAX. Donc ta fonction "go()" devrait utiliser Prototype et non faire de l'ajax brut.

Sinon, dans ton cas, en repartant sur des bases saines:

• supprimer la fonction go
• l'aspect auto-completion est bon, tu n'y touches plus
• sur le onchange du nom tu appelles une fonction goPrenom qui effectue un Ajax.Refresh (ce sera plus simple)
  

  Code :

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

  1
  2
  3
  4
  5
  6
  7
  8
  9
  new Ajax.Request('ajax_autocomplete2.php', {
    method: 'post',
    parameters : "nom_contact=" + XXXXXXX
    onSuccess: function(transport) {
        //transport.responseText est le texte récupéré par l'appel
        //Inscrire le prenom dans la zone de texte  
   
    });
  });

  XXXXXXX est la valeur actuelle de ta zone du nom, ta page ajax_autocomplete2.php fait alors:

  Code :

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

  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  <?php
   
  	if(isset($_POST["nom_contact"])) {
  		include ('../fonction_connexion.php');
  		$res = mysql_query("SELECT prenom_contact FROM t_gestion_contacts WHERE nom_contact = ".$_POST["nom_contact"]."");
  		while($row = mysql_fetch_assoc($res)) {
  			//echo "<input type='text' value='".$row["prenom_contact"]."' />";
  		echo $row["prenom_contact"];
  		break; //peut pas avoir plusieurs prénoms sinon 1 N aberrant		
  }
  	}
  ?>

  et dans le onSuccess tu inscris le prénom récupéré

ERE