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

**Pythoniseur** · 24/08/2015, 20h13

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

Je m'explique.

Nom : Screenshot.png
Affichages : 1393
Taille : 28,3 Ko

Nom : Screenshot.png
Affichages : 1393
Taille : 28,3 Ko

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 :

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

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

**NoSmoking** · 27/08/2015, 22h42

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 ?

**Pythoniseur** · 28/08/2015, 10h15

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.

**NoSmoking** · 29/08/2015, 14h39

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 html :

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

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

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

Code :

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

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

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

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

**Pythoniseur** · 30/08/2015, 20h24

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 :

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

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

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

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

**Pythoniseur** · 01/09/2015, 18h27

ALORS AVEC LES CODES SUIVANTS :

Code :

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

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 :

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

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

AJAX

Vue hybride

Discussions similaires

Partager

Partager