formulaire de commande

doublemetre · 31/01/2012, 20h36

Bonjour,
je cherche à faire un formulaire de commande, un champ article, un champ designation.
J'ai un table mysql avec ces 2 champs
C'est un formulaire intelligent quand on tappe un lettre il affiche la liste.
J'aimerais qu'il affiche dans le champ designation le résultat correspondant à l'article.
exemple je tappe p dans le champ article j'ai la liste pomme et quand je valide le résultat exemple carton de 6kg s'affiche dans la designation.
Je pense que je dois modifier cela: input[type=text] y donner un id,
mais je sais pas comment pouvez-vous m'aider ?

voici le code:

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
    <script type="text/javascript" src="js/jquery.production.js"></script>
        <script type="text/javascript">
		$(document).ready(function(){
 
			// Suggestions lors de la saisie
			$('input[type=text]').keyup(function(){
				$('#retour').html('');
				if( $(this).val() != ''){
					$.ajax({
						async: true,
						url : 'php/ajax.php',
						data : "article="+$(this).val(),
						type : 'POST',
						success: function(retour){
							var backup = $('#retour').html();
							$('#retour').html(retour);
						},
						error : function(){
							alert("Une erreur s'est produite.");
						}
					});
				}
			});
 
			// Lorsqu'on click sur une suggestion
			$('#retour').hover(function(){
				$('#retour div').click(function(){
					var xx = $(this).html(); // Récupère le contenu
					$('input[type=text]').val(xx); // Ecrit en valeur dans le champ texte
					$('#retour').html(''); // Efface le contenu
				});
			});
 
		});
		</script>
        <style type="text/css">
		input[type=text]{
			padding:5px;
		}
 
		#retour div{ padding-bottom:2px; padding-left:10px; padding-top:2px; width:160px; }
		#retour div:hover{ background:#f6f6f6; cursor:pointer; }
		</style>
    </head>
    <body>
 
    	<form method="post">
        	<input type="text" name="article" />
          <input type="text" name="designation" />
    	</form>

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email