remplir deux champs après le click

**fazpedro** · 21/10/2011, 10h39

Bonjour,
je souhaite que jquery "remplisse" deux champs suite à la sélection d'une recherche : le premier "inputString" se remplit bien mais pas le deuxième champ 'secteur' "inputsecteur" ( = $secteur_recupere )...
Merci de votre aide.

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
39
40
41
42
43
44
45
46
47
48
..........
<script type="text/JavaScript">
function lookup(inputString) {
		if(inputString.length == 0) { // si le champs txte est vide
			$('#suggestions').hide(); // on cache les suggestions
		} else { // sinon
			$.post("ajax_lieu.php", {queryString: ""+inputString+""}, function(data){ 
			// on envoie la valeur du champ texte dans la variable post queryString au fichier ajax_lieu.php
				if(data.length >0) {
					$('#suggestions').show(); // si il y a un retour, on affiche la liste
					$('#autoSuggestionsList').html(data); // et on remplit la liste des données
				}
			});
		}
	}
	function fill(thisValue) { // remplir le champ texte si une suggestion est cliquée
		$('#inputString').val(thisValue); // ok fonctionne bien
		$('#inputsecteur').val(); // pour le secteur !
		setTimeout("$('#suggestions').hide();", 200);
	}
	$(document).ready( function () {
		$("input#inputString").keyup( function() { // si on presse une touche du clavier en étant dans le champ texte qui a pour id inputString
			lookup($(this).val()) 
		});
		$("input#inputString").blur( function() { // si le champ texte perd le focus
			fill() 
		});
	});
</script>
.......... formulaire ..........
<label for="ev7">Nom du lieu &nbsp; : &nbsp; </label>
<br />
<!-- pour affichage des lieux -->
<input type="text" tabindex ="10" name="lieu3" class="ev" value="<?php echo stripslashes($lieu_affiche) ?>" id="inputString" onblur="this.className='ev';valide(this, 'err_mdp');" class="ev" /><!--  champ texte à analyser pour les suggestions -->
 <div class="suggestionsBox" id="suggestions" style="display: none;"> <!-- bloc contenant les eventuelles suggestions -->
<div class="suggestionList" id="autoSuggestionsList"><!-- liste contenant les suggestions -->
</div>
</div>
<!-- FIN de : pour affichage des lieux -->

<!-- pour affichage du secteur -->
<input type="text" tabindex ="11" name="secteur" class="ev" value="<?php echo stripslashes($secteur_recupere) ?>" id="inputsecteur" onblur="this.className='ev';valide(this, 'err_mdp');" class="ev" /><!--  champ texte à analyser pour les suggestions -->
 <div class="suggestionsBox" id="suggestions" style="display: none;"> <!-- bloc contenant les eventuelles suggestions -->
<div class="suggestionList" id="autoSuggestionsList"><!-- liste contenant les suggestions -->
</div>
</div>
<!-- FIN de : pour affichage du secteur -->
......

ajax_lieu.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
15
16
17
18
19
20
21
22
<?php
require('configuration.php');$sql = connect_sql();
mysql_query("SET NAMES utf8");
if(isset($_POST['queryString'])) // si la longueur du contenu de la variable est superieur à 0
	{	$queryString = mysql_real_escape_string($_POST['queryString']);
		if(strlen($queryString) >0) 
		{	$chaine_post_recupere	= stripslashes($_POST['queryString']);				// recupere la valeur saisie
			$chaine_pour_requete_ajax 	= mysql_real_escape_string($chaine_post_recupere);	// valeur avec protection contre injections sql
			$chaine_pour_requete 	= stripslashes($chaine_pour_requete_ajax);				// valeur a afficher sans les slashes & cie...
			$result = mysql_query("SELECT * FROM lieu WHERE nom LIKE '%$chaine_pour_requete%' LIMIT 15");
			if($result) {	// on parcourt les resultats et on affiche les resultats dans un element de liste en ajoutant la fonction fill sur l'evenenement onClick
			while($nom = mysql_fetch_array($result))
			{	echo '<li onClick="fill(\''.$nom["nom"].' ('.($nom["ville"]).')'.'\');">'.stripslashes($nom["nom"]).'('.stripslashes($nom["ville"]).')'.'</li>';	
				$secteur_recupere = $nom["secteur"];
			}
						}
						else	{	echo 'pas de resultat';	}
		}
		else	{	echo 'pas de saisie';	}
	}
	else	{	echo 'Il ne devrait pas avoir un accès direct à ce script !!!';	}
?>

**kalimukti** · 21/10/2011, 14h07

Bonjour,
J'ai du mal à comprendre ton code:
dans ton script, tu mets:

Code :

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

1
2
3
4
 
$("input#inputString").blur( function() { // si le champ texte perd le focus
     fill() 
});

donc, tu ne passes pas de paramètres à fill()
Ensuite, dans fill(), tu mets:

Code :

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

1
2
3
4
5
6
 
function fill(thisValue) { // remplir le champ texte si une suggestion est cliquée
     $('#inputString').val(thisValue); // ok fonctionne bien
     $('#inputsecteur').val(); // pour le secteur !
     setTimeout("$('#suggestions').hide();", 200);
}

là, fill() à un paramètre, que tu mets dans le val() de #inputString... et tu dis que ça marche ? (vu que dans le code que tu mets, thisValue est NULL, j'ai du mal à voir)
ensuite,

Code :

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

$('#inputsecteur').val();

ne fait rien, à part retourner la valeur de ton input, que tu ne récupères pas dans une variable, du coup, cette ligne ne fait pas grand chose... (val() sans argument est un getter, pas un setter...)
enfin, dans ton code php, je vois le même problème:
tu récupères $secteur_recupere

Code :

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

$secteur_recupere = $nom["secteur"];

mais je ne vois ce que tu en fait après... tu ne sembles pas le renvoyer à ton script...

**fazpedro** · 21/10/2011, 14h38

@ kalimukti :
tu récupères $secteur_recupere
mais je ne vois ce que tu en fait après... tu ne sembles pas le renvoyer à ton script...

C'est bien cela le problème : comment récupérer cette valeur "$secteur_recupere" depuis l'ajax pour le remettre dans mon code php ?
merci...

**kalimukti** · 21/10/2011, 15h11

Envoyé par fazpedro

[I][COLOR="Green"]@ kalimukti :
C'est bien cela le problème : comment récupérer cette valeur "$secteur_recupere" depuis l'ajax pour le remettre dans mon code php ?
merci...

gné ? (désolé, je crois que j'ai un peu du mal aujourd'hui

)...
tu dois la récupérer sur ta page html et l'envoyer sur la page php ou l'inverse ?

si c'est le premier, un truc du style devrait le faire:

Code :

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

1
2
3
4
$.post("test.php", { queryString: $('#inputString').val(), inputSecteur: $('#inputSecteur').val() },
 function(data) {
   ...
 },

mais ton secteur, dans le code php semble plutôt venir de ta requête sql... d'où mon bug...

si ton problème est à l'inverse (renvoyer plusieurs valeurs au client (à ton script), tu as plusieurs solutions: xml, json, un simple string séparé de virgule (par exemple... avec un split derrière)... avec pour principe de reconstituer ton html (ce que tu fais en php)

Code :

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

echo '<li onClick="fill(\''.$nom["nom"].' ('.($nom["ville"]).')'.'\');">'.stripslashes($nom["nom"]).'('.stripslashes($nom["ville"]).')'.'</li>';

avec jquery, dans la fonction anonyme du $.post

**fazpedro** · 16/11/2011, 11h35

Je ne vois pas comment faire pour que l' Ajax puisse envoyer deux valeurs en même temps : "nom" et "ville"...
j'ai regardé json, mais je capte pas....

Merci.

Code :

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

1
2
3
4
5
6
 
....
if($result) // on parcourt les resultats
		{	while($nom = mysql_fetch_array($result)) 	// on affiche les resultats dans un element de liste en ajoutant la fonction fill sur l'evenenement onClick
			{	echo '<li onClick="fill(\''.$nom["nom"].' ('.($nom["ville"]).')'.'\');">'.stripslashes($nom["nom"]).'('.stripslashes($nom["ville"]).')'.'</li>';
				$secteur_recupere = $nom["ville"];

ce que je souhaite c'est pouvoir récupérer le secteur comme je récupère le nom...

**fazpedro** · 12/12/2011, 14h33

En fait, voici un exemple de résultat que je souhaite :
https://www.labri.fr/perso/lacroix/p.../autocomplete/

on choisit le premier champ et ensuite
les champs sont rempli automatiquement...

Merci de votre aide.

remplir deux champs après le click

jQuery

Vue hybride

Discussions similaires

Partager

Partager