Remplissage auto d'un formulaire avec jQuery et AJAX
Bonjour.
Je poste ici après 2 jours de tests et de recherches, sans aucun résultat, afin de trouver une solution à mon problème.
L'idée, c'est de remplir automatiquement tous les champs d'un formulaire html (une dizaine) en fonction de la sélection faite sur une autocomplétion concernant l'un des 3 premiers champs (n'importe lequel) à partir d'une requête PHP appelée en utilisant AJAX. Pour l'instant j'essaie d'aller au plus simple : juste 2 champs pouvant s'auto compléter les uns les autres (les 2 premiers) mais même ça j'y arrive pas ! Je me suis inspiré de ce tutoriel : http://x-zolezzi.developpez.com/tuto...utocompletion/ qui marche d'ailleurs très bien pour le moment.
Voilà les codes de la partie jQuery, la partie html, et la partie PHP de ma dernière tentative infructueuse ...
HTML :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| echo '<form method = "post" action = "traitement.php?lang='.$lang.'" name = "devis_formulaire" onsubmit = "return(verifsubmit(devis_formulaire))" autocomplete = "on" >';
if (isset($_SESSION['login'])) {
echo '<div id = "radios" >';
echo '<input type = "radio" id = "prospect" name = "contact" onclick = "formulaireAffichage()" checked = "checked" /><label for = "prospect" style = "margin-left:10px;" >Prospect existant</label><br><br>';
echo '<input type = "radio" id = "client" name = "contact" onclick = "formulaireAffichage()" /><label for = "prospect" style = "margin-left:10px;" >Client existant</label><br><br>';
echo '<input type = "radio" id = "nouveau" name = "contact" onclick = "formulaireAffichage()" /><label for = "prospect" style = "margin-left:10px;" >Nouveau prospect</label>';
echo '</div>';
}
echo '<input type = "text" name = "societe" id = "societe" style = "width:190px;" autocomplete = "off" placeholder = "'.$var_language_14.'" required /><br><br>';
echo '<input type = "text" name = "interlocuteur" id = "interlocuteur" style = "width:190px;" autocomplete = "off" placeholder = "'.$var_language_15.'" /><br><br>';
// s'affiche si le bouton radio " prospect " est coché
echo '<div id = "id_affichage" >';
echo '<input type = "text" name = "id_prospect" id = "id_prospect" style = "width:190px;" autocomplete = "off" placeholder = "'.$var_language_15b.'" /><br><br>';
echo '</div>';
// s'affiche si le bouton radio " client " est coché
echo '<div id = "numero_client" style = "display:none;" >';
echo '<input type = "text" name = "id_client" id = "id_client" style = "width:190px;" autocomplete = "off" placeholder = "'.$var_language_15c.'" /><br><br>';
echo '</div>';
echo '</form>'; |
Le reste du formulaire (entre la div numero_client et la balise de fin de formulaire) est masqué et ne s'affiche que si le 3e bouton radio est coché (donc si la personne concernée n'est ni dans notre base clients, ni dans notre base prospects) et je ne le mettrai pas ici car il n'est pas (encore) concerné par ce que j'essaie de faire.
jQuery :
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
| $(function () {
$("#societe, #interlocuteur").autocomplete({
source: function (request, response) {
var objData = {};
if ($(this.element).attr('id') == 'societe') {
objData = { nomClient: request.term };
}
else if ($(this.element).attr('id') == 'interlocuteur') {
objData = { prenomClient: request.term };
}
$.ajax({
url: "chemindufichier/autocompletion_test.php",
dataType: "json",
data: objData,
type: 'POST',
success: function (data) {
response($.map(data, function (item) {
return {
label: item.NomClient + ", " + item.PrenomClient,
value: function () {
if ($(this).attr('id') == 'societe') {
$('#interlocuteur').val(item.PrenomClient);
return item.NomClient;
}
else if ($(this).attr('id') == 'interlocuteur') {
$('#societe').val(item.NomClient);
return item.PrenomClient;
}
}
}
}));
}
});
},
minLength: 2,
delay: 200
});
}); |
J'ai déjà pu vérifier que la partie qui ne marche pas c'est toute la partie AJAX. Si je remplace toute la fonction de source par un array prédéfini, ça fonctionne comme il faut
PHP :
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
| class autocompletionDevis {
public $NomClient;
public $PrenomClient;
}
// initialisation de la liste de résultats
$list = array();
// connexion à la base
try {
$db = new PDO('mysql:host=nom_hote;dbname=nom_base', 'login', 'password');
$db->exec("SET CHARACTER SET utf8");
}
catch (Exception $ex) {
echo $ex->getMessage();
}
// construction de la requête
$strQuery = "SELECT NC Nom_client, PC Prenom_client FROM nom_table WHERE ";
// si on a saisi du texte dans l'input societe (Nom_client dans la base nom_table)
if (isset($_POST['nomClient'])) {
$strQuery .= "NC LIKE :nomClient ";
}
// si on a saisi du texte dans l'input interlocuteur (Prenom_client dans la base nom_table)
elseif (isset($_POST['prenomClient'])) {
$strQuery .= "PC LIKE :prenomClient ";
}
// limite de résultats affichés
$strQuery .= "LIMIT 0, 10";
// préparation de la requête
$query = $db->prepare($strQuery);
// bind des valeurs
if (isset($_POST['nomClient'])) {
$value = $_POST["nomClient"]."%";
$query->bindParam(":nomClient", $value, PDO::PARAM_STR);
}
elseif (isset($_POST['prenomClient'])) {
$value = $_POST["prenomClient"]."%";
$query->bindParam(":prenomClient", $value, PDO::PARAM_STR);
}
// exécution de la requête
$query->execute();
$list = $query->fetchAll(PDO::FETCH_CLASS, "autocompletionDevis");;
echo json_encode($list); |
Ne me demandez pas pourquoi l'index Nom_client de la base est associé à l'id " société " du formulaire ou l'index Prenom_client associé à l'id " interlocuteur " c'est normal. Celui qui gère les bases a oublié de changer le nom des index ...
N'étant pas doué en jQuery et encore moins en AJAX, je n'arrive pas à voir où est la ou les erreurs. J'ai aussi cherché partout où j'ai pu, y compris ici, mais 90% des sujets concernent des autosuggestions pour un seul champ texte, genre moteur de recherche, et ce n'est pas du tout la finalité de ce que je voudrais. Sachant que je commence avec deux champs, mais quand ça fonctionnera enfin je modifierai la requête SQL et la fonction source (partie jQuery) pour remplir automatiquement tous les autres champs, y compris les champs cachés, après avoir sélectionné l'un des éléments de la liste affichée. J'imagine que c'est possible.
Je remercie par avance ceux qui accepteraient de m'aider, ou simplement m'aiguiller dans la bonne direction, parce que je nage en plein brouillard depuis 2 jours :(
