Remplir input text suivant une autre déjà en autocomplétion

Version imprimable

1 pièce(s) jointe(s)

Bonsoir à tous,
Après pas mal de temps à chercher comment faire, je me lance à vous en faire la demande.

Je m'explique.

Pièce jointe 186244
Suivant ce fourmulaire, avec saisi de la reference, la designation s'inscrit en automatique. Je voudrais, maintenant que suivant la base selectionnée (ici gennes) , et donc suivant la référence de l'article, cela aille chercher dans une table, le casier correspondant.

le html (oui je sais il reste à faire :)

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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html> 
	<head >
		<title>Commande aux bases</title>
		<meta charset="UTF-8">
<meta name="description" content="commande mail des bases">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="jerome" >
<link href="style.css" rel="stylesheet" media="all" type="text/css"> 
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
		<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.ui/1.8.10/jquery-ui.js"></script>
		<script type="text/javascript">
			var cache = {};
			$(function ()
			{
				$("#ref, #desi").autocomplete({
					source: function (request, response)
					{
						//Si la réponse est dans le cache
						if (('FR' + '-' + request.term) in cache)
						{
							response($.map(cache['FR' + '-' + request.term], function (item)
							{
 
								return {
									label: item.reference + ", " + item.designation,
									value: function ()
									{
										if ($(this).attr('id') == 'ref')
										{
											$('#desi').val(item.designation);
											return item.reference;
										}
										else
										{
											$('#ref').val(item.reference);
											return item.designation;
										}
									}
								}
							}));
						}
						//Sinon -> Requete Ajax
						else
						{
							var objData = {};
							if ($(this.element).attr('id') == 'ref')
							{
								objData = { reference: request.term, pays: 'FR', maxRows: 10 };
							}
							else
							{
								objData = { designation: request.term, pays: 'FR', maxRows: 10 };
							}
							$.ajax({
								url: "./AutoCompletion.php",
								dataType: "json",
								data: objData,
								type: 'POST',
								success: function (data)
								{
									//Ajout de reponse dans le cache
									cache[('FR' + '-' + request.term)] = data;
									response($.map(data, function (item)
									{
 
										return {
											label: item.reference + ", " + item.designation,
											value: function ()
											{
												if ($(this).attr('id') == 'ref')
												{
													$('#desi').val(item.designation);
													return item.reference;
												}
												else
												{
													$('#ref').val(item.reference);
													return item.designation;
												}
											}
										}
									}));
								}
							});
						}
					},
					minLength: 3,
					delay: 600
				});
			});
		</script>
 
 
 
 
 
		<link rel="Stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" />
	</head>
	<body>
	</br>
	</br>
	<div id="conteneur">
		<form action="#">
		<div id="left"><fieldset>
 <legend> A QUI? : </legend>
   <p>Sélectioner la base qui dispose de la(des) pièce(s)) : </p>
		 <select name="choixbase">
<option value="gennes">Gennes</option>
<option value="cherre">Cherre</option>
<option value="varades">Varades</option>
<option value="abbaretz">Abbaretz</option>
<option value="Challain">Challain</option>
<option value="Noyen">Noyen</option>
<option value="Juille">Juille</option>
<option value="Bouloire">Bouloire</option>
<option value="Vautorte">Vautorte</option>
<option value="Peuton">Peuton</option>
<option value="Courcité">Courcite</option>
<option value="Vaiges">Vaiges</option>
<option value="Serigny">Serigny</option>
</select>
		</fieldset>
<fieldset>
 <legend> QUOI? : </legend>	
				<h3>Référence :</h3><input type="text" id="ref" size="25"/>	
 			<h3>Désignation : </h3><input type="text" id="desi" size="40" />	
			</fieldset></div><div id="right">
			<fieldset>
 <legend> quantité et ou? : </legend>
			<h3>Qté: </h3><input type="text" id="qte" size="6" />
			<h3>Casier: </h3><input type="text" id="casier" size="6" /></fieldset>
			<fieldset>
 <legend> demande de et pour? : </legend>
			<h3>De: </h3><input type="text" id="de" size="6" />
			<h3>Attribution: </h3><input type="text" id="pour" size="6" /></fieldset></div>
		</form>
		</div>
	</body>
</html>

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
<?php
require_once('./AutoCompletionCPVille.class.php');
 
//Initialisation de la liste
$list = array();
 
//Connexion MySQL
try
{
    $db = new PDO('mysql:host=localhost;dbname=rometcdemail', 'root', '*******');
}
catch (Exception $ex)
{
    echo $ex->getMessage();
}
 
//Construction de la requete
$strQuery = "SELECT ref reference, desi designation FROM source WHERE ";
if (isset($_POST["reference"]))
{
    $strQuery .= "ref LIKE :reference ";
}
else
{
    $strQuery .= "desi LIKE :designation ";
}
//$strQuery .= "AND CODEPAYS = 'FR' ";
//Limite
if (isset($_POST["maxRows"]))
{
    $strQuery .= "LIMIT 0, :maxRows";
}
$query = $db->prepare($strQuery);
if (isset($_POST["reference"]))
{
    $value = $_POST["reference"]."%";
    $query->bindParam(":reference", $value, PDO::PARAM_STR);
}
else
{
    $value = $_POST["designation"]."%";
    $query->bindParam(":designation", $value, PDO::PARAM_STR);
}
//Limite
if (isset($_POST["maxRows"]))
{
    $valueRows = intval($_POST["maxRows"]);
    $query->bindParam(":maxRows", $valueRows, PDO::PARAM_INT);
}
 
$query->execute();
 
$list = $query->fetchAll(PDO::FETCH_CLASS, "AutoCompletionCPVille");;
 
echo json_encode($list);
?>

la table de la base Gennes est sur ce style : id aticle et casier.

Merci d'avance pour votre aide. Enfin si vous m'avez bien compris.

27/08/2015, 22h42
NoSmoking

Bonjour,
où est ce que tu récupères la valeur de ton <select name="choixbase"> pour l'envoyer en tant que paramètre à des fins de traitement coté serveur ?
28/08/2015, 10h15
Pythoniseur

Bonjour,
Justement, je ne sais pas comment repartir pour faire ma fonction.
Car je voudrais egalement que cela se fasse avec ajax.
Merci d'avance pour ton aide.

Pour commencer il te faut mettre une ID à ton SELECT afin de pouvoir aisément récupérer la valeur de l'OPTION sélectionnée

Code:

<select name="choixbase" id="choixbase">

ensuite dans ta fonction requête Ajax tu récupères la valeur via un simple

Code:

nom_base = document.getElementById('choixbase').value;

et tu mets à jour ton objData avant envoi cela pourrait donner (code partiel à mettre à jour)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 //Sinon -> Requete Ajax else { // partie commune var objData = { base: document.getElementById('choixbase').value, pays: 'FR', maxRows: 10 }; // mise à jour foncton du besoin if ($(this.element).attr('id') == 'ref') { objData.reference = request.term; } else { objData.designation = request.term; }
il te restera à faire le nécessaire coté serveur.

Merci à toi,
mais en fait j'essaie de faire autrement mais je bloque sur l'écriture exacte des codes.
le Html du form toujours le meme :

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
 <div id="contenu">
		<form action="" method="post" >
		 <fieldset>
 <legend> Sélectionner la base qui dispose de la(les) pièce(s) --
  		<select name="choixbase" id="choixbase">
<option value="gennes">Gennes</option>
<option value="cherre">Cherre</option>
<option value="varades">Varades</option>
<option value="abbaretz">Abbaretz</option>
<option value="Challain">Challain</option>
<option value="Noyen">Noyen</option>
<option value="Juille">Juille</option>
<option value="Bouloire">Bouloire</option>
<option value="Vautorte">Vautorte</option>
<option value="Peuton">Peuton</option>
<option value="Courcité">Courcite</option>
<option value="Vaiges">Vaiges</option>
<option value="Serigny">Serigny</option>
</select></legend>
 		Référence : <input type="text" name = "ref" id="ref" size="13"/>
 		Désignation : <input type="text" name = "desi" id="desi" size="40" />	
 </fieldset>
 
 
			<fieldset>
         <legend> QUANTITE ET OU? --- DEMANDE PAR ET POUR QUI? </legend>
			Qte : <input type="text" name = "qte" id="qte" size="6" />
			Casier : <input type="text" name ="casiers" id="casiers" size="6" />
			Qui : <input type="text" name = "qui" id="qui" size="6" />
			Attribution : <input type="text" name ="pourqui" id="pourqui" size="6" />
			</fieldset>
			<input type="submit" name="OK" id="submit" value="OK">
       <a href="" id ="chercher">
       Mise à jour liste
       </a>
 
			</form>

voici le script que je voudrais utiliser :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script type="text/javascript">			<script type="text/javascript">
			$(document).ready(function(){
			$("#qte").change(function () {
 
				var ref2 = $("#ref").val();
	$.ajax({
		url     : 'casier.php',
		type    : 'POST',
		data    : {"ref2" :ref2},
		success: function(resultat) {
		       alert('ok'); 
		}
		,
		error: function(resultat)
		{
			$('#casiers').val(resultat);
			alert('error');
		}
	});
});
});
 
	</script>

et le php qui va avec :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
require('shared.php');
 
$sqlRequest  = "SELECT casier FROM cherre WHERE article = $_POST['ref']";
$req = $bdd->prepare($sqlRequest);
$req ->setFetchMode(PDO::FETCH_OBJ);
$req ->execute();
 
while( $resultat = $req->fetch() )
{
        echo $resultat->casier;
}
$req->closeCursor();
?>

avec cela, j'ai toujours l'erreur "error" et [object Object] qui s'affiche dans mon input.
Merci d'avance

ALORS AVEC LES CODES SUIVANTS :

Code:

1
2
3
4
5
6
7
$req = $bdd->prepare("SELECT casier FROM cherre WHERE ref = $_POST['ref']");
//$req->bindValue( 'ref2', $_POST['ref'], PDO::PARAM_STR );
$req ->execute();
$resultat = $req->fetch();
$resultat = $resultat['casier'];
echo $resultat;
$req->closeCursor();

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
(document).ready(function(){
			$("#qte").change(function () {
 
				var ref2 = $("#ref").val();
	$.ajax({
		url     : 'casier.php',
		type    : 'POST',
		data    : {"ref2" :ref2},
		success: function(resultat) {
		       <!--alert('ok'); -->
		       $('#casiers').val(resultat);
		     		}
		,
		error: function(resultat)
		{
			$('#casiers').val(resultat);
			alert('error');
		}
	});
});
});

J'ai toujours l'erreur qui apparaît, mais quand je met une valeur connu à la place du $_POST['ref'], cela marche.
Comment faut il faire?
Merci d'avance

01/09/2015, 21h45
NoSmoking

Citation:

...mais quand je met une valeur connu à la place du $_POST['ref'], cela marche.

peut être parce que d'un coté tu écris $_POST['ref'] et de l'autre data : {"ref2" :ref2} ;)

Effectivement, et c'est résolu pour cette partie. Maintenant, c'est le choix de la table qui pose problème.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
	<script type="text/javascript">
$(document).ready(function(){
			$("#qte").change(function () {
 
				var ref = $("#ref").val();
				var choixbase = $("#choixbase").val();
	$.ajax({
		url     : 'casier.php',
		type    : 'POST',
		data    : {"ref" :ref,"choixbase" :choixbase},
		success: function(resultat) {
		       <!--alert('ok'); -->
		       $('#casiers').val(resultat);
		     		}
		,
		error: function(resultat)
		{
			$('#casiers').val(resultat);
			alert('error');
		}
	});
});
});

Code:

1
2
3
4
5
6
7
8
9
$req = $bdd->prepare("SELECT casier FROM choixbase = :choixbase WHERE ref= :ref");
// $req .= "choixbase LIKE :choixbase ";
$req->bindParam( ':choixbase', $_POST['choixbase'], PDO::PARAM_STR);
$req->bindValue( 'ref', $_POST['ref'], PDO::PARAM_STR );
$req ->execute();
$resultat = $req->fetchAll();
$resultat = $resultat['casier'];
echo $resultat;
$req->closeCursor();

Apparemment, au niveau Ajax, c'est bon mais la déclaration du select dans le PHP échoue, et je ne sais pas comment faire.
Merci d'avance.

02/09/2015, 18h29
NoSmoking

Citation:

Effectivement, et c'est résolu pour cette partie, maintenant, c'est le choix de la table qui pose problème.

La discussion coté Ajax est donc résolue, quant au problème coté serveur je te propose de voir du coté du forum PHP l'aide que tu y recevra sera meilleur et plus pertinente. ;)