Formulaire html requête SQl et autocomplétion Ajax

**fabrizti** · 14/12/2015, 10h00

Bonjour à tout le monde.
Je vous contacte car je vous avoue que je ne suis vraiment pas un expert en Ajax et pourtant j'aimerais l'utiliser pour faire une autocompletion sur un de mes formulaires.

Je vous explique :

J'ai une base de données mysql avec une table produit comprenant idproduit, referenceproduit, descriptionproduit et tarifproduit.

J'ai un formulaire en HTML php avec un input text dont j'aimerais qu'en tapant la référence (pendant que je tape) cela me propose les références existantes dans la base de donnée et correspondant à ce que je tape. Et enfin lorsque je clique sur le choix proposé, cela me remplisse les autres champs input text "description" et "tarif".

Ainsi il y aurait deux actions celles de me proposer la référence du produit lorsque je tape et celle de me remplir les autres champs lorsque j'ai choisit la référence.

requete sql dans fichier requete.php

Code php :

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

1
2
3
$sql = "SELECT * FROM prod WHERE referenceprod='".$_POST['referenceprod']."'";
$sth = $dbh->query($sql);
$resultat = $sth->fetchAll();

formulaire html

Code html :

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

1
2
3
4
5
<form name="test" action="requete.php" method="post" >
Référence : <input type="text" name="referenceprod" value="je ne sais pas quoi mettre" /><br />
Description : <textarea cols="50" name="descriptionprod" rows="10">je ne sais pas quoi mettre</textarea><br />
Tarif : <input type="text" name="tarifprod" value="je ne sais pas quoi mettre" /><br />
</form>

Je me débrouille en PHP, Mysql et HTML mais j'ai lu le tutorial ajax ci-dessous pour faire ce que j'aimerais mais c'est pas évident.
http://dcabasson.developpez.com/arti...ion-pas-a-pas/

Si quelqu'un peut m'aider car ce serait un vrai plus pour mon formulaire.

Merci

**fabrizti** · 17/12/2015, 11h28

Bonjour,

J'ai réussi ce que je voulais faire, je vais l'expliquer cela peut servir à quelqu'un et j'ai un petit BUG complètement illogique que je ne comprends pas.

Alors j'ai réutilisé un tutoriel ainsi.

Voici mon fichier avec le formulaire :

Dans le header du fichier avec formulaire :

Code html :

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

1
2
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>

Code php :

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
 <form action="inserer.php" method="post" name="insereprodstock">
 
                <div class="label_div">Référence : </div>
                <div class="input_container">
                    <input type="text" id="ref_id" name="refprodstock" onkeyup="autocomplet()">
                    <ul id="ref_list_id"></ul>
 
                </div>
 
                <br /><br />
              <div class="label_div">Descriptif produit : </div>
                    <textarea cols="50"  id="descriptif_id" name="descriptifprodstock" rows="10"></textarea>
 
                  <br /><br />
              <div class="label_div">Tarif Vente : </div>   
                    <input name="tarifventeprodstock" id="tarifvente_id" type="text" value="0" size="50" />
 
 
                    <br /><br />
              <div class="label_div">Fournisseur : </div>
                    <select name="idfournisseur" id="idfournisseur_id">
		<?php foreach($fournisseur as $row){ 
                            $idfournisseur=htmlspecialchars($row['idfournisseur'],ENT_QUOTES);
                            $nomfournisseur=htmlspecialchars($row['nomfournisseur'],ENT_QUOTES);
 
                            ?>
                            <option value="<?php echo $idfournisseur; ?>" >
 
                                    <?php 
 
                                        echo $nomfournisseur;
                                    ?>
 
                            </option>
 
                            <?php } ?>
                        </select>
 
     <br /><br />
              <div class="label_div">LED : </div> 
                   <select name="ledprodstock" id="led_id">
                            <option value="0">Non</option>
                            <option value="1">Oui</option> 
                        </select>
 
                      <br /><br />
              <div class="label_div">Max connect : </div>   
                        <input name="maxconprodstock" type="number" id="maxcon_id" step="1" min="0" value="0" size="50" />
 
                         <br /><br />
              <div class="label_div">WATT : </div>   
                        <input name="wattprodstock" type="text" id="watt_id" value="0" size="50" />

Le code script.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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
 
// autocomplet : this function will be executed every time we change the text
function autocomplet() {
	var min_length = 0; // min caracters to display the autocomplete
	var keyword = $('#ref_id').val();
	if (keyword.length >= min_length) {
		$.ajax({
			url: 'ajax_refresh.php',
			type: 'POST',
			data: {keyword:keyword},
			success:function(data){
				$('#ref_list_id').show();
				$('#ref_list_id').html(data);
			}
		});
	} else {
		$('#ref_list_id').hide();
	}
}
 
// set_item : this function will be executed when we select an item
function set_item(item) {
	// change input value
	$('#ref_id').val(item);
	// hide proposition list
	$('#ref_list_id').hide();
}
 
function set_item2(item) {
	// change input value
	$('#descriptif_id').val(item);	
}
function set_item3(item) {
	// change input value
	$('#tarifvente_id').val(item);	
}
 
function set_item4(item) {
	// change input value
	$('#idfournisseur_id').val(item);	
}
 
function set_item5(item) {
	// change input value
	$('#led_id').val(item);	
}
function set_item7(item) {
	// change input value
	$('#maxcon_id').val(item);	
}
function set_item8(item) {
	// change input value
	$('#watt_id').val(item);	
}

Le fichier ajax refresh .php

Code php :

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
 
$keyword = '%'.$_POST['keyword'].'%';
$sql = "SELECT * FROM prodfournisseur WHERE refprodfournisseur LIKE (:keyword) ORDER BY idprodfournisseur ASC LIMIT 0, 10";
$query = $dbh->prepare($sql);
 
 
 
$query->bindParam(':keyword', $keyword, PDO::PARAM_STR);
$query->execute();
$list = $query->fetchAll();
foreach ($list as $rs) {
	$descriptifprodfournisseur=htmlspecialchars($rs['descriptifprodfournisseur'],ENT_QUOTES);
	// put in bold the written text
	$refprodfournisseur = str_replace($_POST['keyword'], '<b>'.$_POST['keyword'].'</b>', $rs['refprodfournisseur']);
	// add new option
    echo '<li onclick="
	set_item(\''.str_replace("'", "\'", $rs['refprodfournisseur']).'\');
	set_item2(\''.str_replace("'", "\'", $rs['descriptifprodfournisseur']).'\');
	set_item3(\''.str_replace("'", "\'", $rs['tarifventeprodfournisseur']).'\');
	set_item4(\''.str_replace("'", "\'", $rs['idfournisseur']).'\');
	set_item5(\''.str_replace("'", "\'", $rs['ledprodfournisseur']).'\');
	set_item7(\''.str_replace("'", "\'", $rs['maxconprodfournisseur']).'\');
	set_item8(\''.str_replace("'", "\'", $rs['wattprodfournisseur']).'\')
	">'.$refprodfournisseur.'</li>';
}

CA FONCTIONNE.
Lorsque je commence à taper une référence dans mon input text "ref_id" cela me propose les 10 résultats correspondant de ma base de donnée.
Lorsque je clique sur une des propositions, cela remplis mon input text ref_id et aussi les autres input (mais pas TOUS !!! c'est ca qui est illogique)
Mon champ descriptif se remplit.
Mon champ "<select>" Id fournisseur se modifie et propose l'option correspondante.
Mon champ tarifs se remplit aussi. PARFAIT
Mais de façon étrange les autres ne se remplissent pas.
Le champ "led" est un <select> (comme pour idfournisseur mais la cela ne marche pas, ça ne se modifie pas) et les champs "watt" et "maxcon" ne se modifient pas non plus.

J'ai essayé d'afficher la source de ma liste crée par javascript et elle transmet bien les bonnes données car cela me marque cela par exemple :

Code html :

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
 
<ul style="display: block;" id="ref_list_id">
<li onclick="
	set_item('CIC-R-LED-3X0.7-230V-W-B');
	set_item2('Rideau Icicle LED caoutchouc - 3 x 0.70 m - 150 lampes bleues - fil blanc - 230 V');
	set_item3('52.1');
	set_item4('1');
	set_item5('1');
	set_item6('1');
	set_item7('12');
	set_item8('14');
	"><b>CIC-R</b>-LED-3X0.7-230V-W-B
</li>
<li onclick="
	set_item('CIC-R-LED-3X0.7-230V-W-R');
	set_item2('Rideau Icicle LED caoutchouc - 3 x 0.70 m - 150 lampes rouges - fil blanc - 230 V');
	set_item3('50.9');
	set_item4('1');
	set_item5('1');
	set_item6('1');
	set_item7('12');
	set_item8('14');
	"><b>CIC-R</b>-LED-3X0.7-230V-W-R
</li>
</ul>

Donc les données sont bien transmises au fichier script.js qui ont tous le même code (set_item8, set_item7, set_item2 ...).
Et certains marche et d'autres non.

Je m'arrache les cheveux... j'en ai plus beaucoup.

**fabrizti** · 17/12/2015, 16h10

Personne n'aurait rien qu'une petite idée ?

Formulaire html requête SQl et autocomplétion Ajax

jQuery

Vue hybride

Discussions similaires

Partager

Partager