Remplir un formulaire dynamiquement en fonction d'une combobox

Résolu/Fermé
Fontainard Messages postés 68 Date d'inscription dimanche 16 mars 2014 Statut Membre Dernière intervention 24 janvier 2017 - Modifié par Fontainard le 8/03/2016 à 02:47
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 - 9 mars 2016 à 18:03
Bonjour, je débute complètement avec Ajax/Javascript j'ai donc très peu de notions. J'essaye de bidouiller depuis quelques temps un affichage dynamique de mon formulaire en fonction d'un client qu'on sélectionne à l'aide d'une combobox. Sans réussite, je fais appel à vous dans l'éventualité ou vous pourrez peut être m'aider à me mettre sur la voie. (Je n'ai pas trouvé de documentations pertinentes qui répondent à mes besoins, mis à part un code qui générait des régions et des départements associés).

Concrètement, je souhaites afficher les numéros de demandes selon le client sélectionné. A la sélection du client, j'aimerais afficher toutes ces informations dans le formulaire, informations qui pourraient être éventuellement modifiés plus tard. IDEM pour la section demande, à la sélection de la demande j'aimerais générer les infos demandes.

Seul l'affichage de mes clients fonctionne correctement actuellement, voici le code:

BDD:

CREATE TABLE IF NOT EXISTS `clients` (
  `NUM_CLI` int(11) NOT NULL,
  `NOM_CLI` varchar(128) NOT NULL,
  `PRENOM_CLI` varchar(128) NOT NULL,
  `ADRESSE_CLI` varchar(255) NOT NULL,
  `CODEVILLE_CLI` varchar(128) NOT NULL,
  `TEL_CLI` varchar(128) DEFAULT NULL,
  PRIMARY KEY (`NUM_CLI`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

CREATE TABLE IF NOT EXISTS `demandes` (
  `NUM_DEM` int(11) NOT NULL,
  `NUM_CLI` int(11) NOT NULL,
  `TYPE_DEM` varchar(128) NOT NULL,
  `DATE_LIMITE` date DEFAULT NULL,
  PRIMARY KEY (`NUM_DEM`),
  KEY `I_FK_DEMANDES_CLIENTS` (`NUM_CLI`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;


script page formulaire:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>

$(document).ready(function() {
    var $clients = $('#clients');
    var $demandes = $('#demandes');
    // chargement des clients via ajax
    $.ajax({
        url: 'client.php',
        data: 'go', // on envoie $_GET['go']
        dataType: 'json', // on veut un retour JSON
        success: function(json) {
            $.each(json, function(index, value) { // pour chaque noeud JSON
                // on ajoute l option dans la liste
                $clients.append('<option value="'+ index +'">'+ value +'</option>');
            });
        }
    });

    // à la sélection d un client dans la liste
       $clients.on('change', function() {
        var val = $(this).val(); // on récupère la valeur de la demande

        if(val != '') {
           $demandes.empty(); // on vide la liste des demandes

            $.ajax({
                url: 'client.php',
                data: 'NUM_CLI='+ val, // on envoie $_GET['NUM_CLI']
                dataType: 'json',
                success: function(json) {
                    $.each(json, function(index, value) {
                        $demandes.append('<option value="'+ index +'">'+ value +'</option>');
                    });
                }
            });
        }
    });
});

</script>


formulaire:
<form action="/" method="post">
<div class="gauche">
    <fieldset>
    <legend>Séléctionner le client</legend>
    <div>
        <label for="NOM_CLI">Nom client :</label>
        <select id="clients"/>
        <option value="">Selectionner client</option>
    </div>
</select>
</fieldset>

<fieldset>
 <legend> Informations du client</legend>
   <p>Merci de sélectionner le client pour la demande et remplir ces données</p>
    <div class="leftform">
        <div>
            <label for="Num_CLI">Numéro client :</label>
            <input type="text" id="Num" />
          </div>
            <div>

            <label for="NUM_DEM">Prénom client :</label>
            <input type="text" id="Pre" />
        </div>
        <div>
            <label for="Num_DEM">Adresse client :</label>
            <input type="text" id="Adr" />
        </div>
         <div>
            <label for="Num_DEM">Code ville :</label>
            <input type="text" id="CP" />
        </div>
         <div>
            <label for="Num_DEM">Téléphone client :</label>
            <input type="text" id="Tel" />
        </div>
    </div>
      </form>
</fieldset>
</div>
<div class="gauche">
<fieldset>
    <legend>Séléctionner Demande</legend>
    <div>
        <label for="Num_DEM">Numéro demande :</label>
        <select id="demandes" name="demandes"/>
        <option value="">Selectionner demande</option>
    </div>
</select>
</fieldset>
<fieldset>
 <legend>Affecter nouvelle Demande</legend>
   <p>Veuillez insérer une nouvelle demande de location</p>
   <div>
            <label for="TYPE_DEM">Type demande :</label>
            <input type="text" id="Tdem" />
        </div>
        <div>
            <label for="DATE_LIMITE">Date limite :</label>
            <input type="text" id="Dl" />
        </div>
         <div>
            <label for="Num_DEM">Arrondissements demandés :</label>
            <input type="text" id="a1" length"2"/>
            <input type="text" id="a2" length"2"/>
            <input type="text" id="a3" length"2"/>
            <input type="text" id="a4" length"2"/>
        </div>
    </div>

 <fieldset>
 <p>
 <input type="submit" value="Valider la demande" />
 <br>
 <input type="reset" value="Effacer contenu" />
 <br>
 <input type="button" src"" value="Ajouter un nouveau client" />
 <br>
 <input type="button" src"" value="Liste demandes client" />
 <br>
 </p>
 </fieldset>
</select>
</form>


script client.php

<?php 
if(isset($_GET['go']) || isset($_GET['NUM_CLI'])) {
 
    $json = array();
     
    if(isset($_GET['go'])) {
        // requête qui récupère les clients
        $requete = "SELECT * FROM clients ORDER BY NOM_CLI";
    } else if(isset($_GET['NUM_CLI'])) {
        $id = htmlentities(intval($_GET['NUM_CLI']));
        // requête qui récupère les demandes selon les clients
        $requete = "SELECT * FROM demandes WHERE NUM_CLI = ". $id ."";
    }

    // connexion à la base de données
    try {
        $bdd = new PDO('mysql:host=localhost;dbname=locadir', 'root', '');
    } catch(Exception $e) {
        exit('Impossible de se connecter à la base de données.');
    }
    // exécution de la requête
    $resultat = $bdd->query($requete) or die(print_r($bdd->errorInfo()));
     
    // résultats
    while($donnees = $resultat->fetch(PDO::FETCH_ASSOC)) {
        
        $json[$donnees['NUM_CLI']][] = utf8_encode($donnees['NOM_CLI']);
    }

    // envoi du résultat au success
    echo json_encode($json);
}
?>


Suis-je dans la bonne direction? Comment dois-je procéder afin d'afficher les informations correspondantes à mon client?

En vous remerciant par avance pour votre aide!
A voir également:

2 réponses

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
Modifié par jordane45 le 8/03/2016 à 14:40
Bonjour,


Pour l'ajax, je te conseille d'utiliser la méthode POST à la place de GET.
Je t'ai également mis des fonctions "bien pratiques" ..

$(document).ready(function() {
    var $clients = $('#clients');
    var $demandes = $('#demandes');
    var urlAjx = "client.php";   // Fichier ajax PHP
    
   // chargement des clients via ajax
   var data = {ACTION:"GET_CLIENTS"}
   //Ajax:
   sendAjx(urlAjx,data, afficherClients, function(error){alert(error);});
    

   // à la sélection d un client dans la liste
   $clients.on('change', function() {
      var val = $(this).val(); // on récupère la valeur de la demande
      if(val != '') {
        $demandes.empty(); // on vide la liste des demandes
        var data = { ACTION:"GET_DEMANDES_BY_NUM_CLI"
                    ,NUM_CLI:val
                   };
        //Ajax:
        sendAjx(urlAjx,data, afficherClients, function(error){alert(error);});
      }
    });
});

// Fonctions de callBack utilisées lors des appels ajax
function afficherClients(json){
  var result = json.RESULT;
  $.each(result, function(index, value) {
    // on ajoute l option dans la liste
    $clients.append('<option value="'+ index +'">'+ value +'</option>');
  });
}

function afficherDemandes(json){
   var result = json.RESULT;
   $.each(result, function(index, value) {
      $demandes.append('<option value="'+ index +'">'+ value +'</option>');
  });
  
}

//--------------------------------------------------------------------------------------------------------------//
// FONCTIONS AJAX
// Jordane45 - 02-2015
//--------------------------------------------------------------------------------------------------------------//
/**
 Permet d'appeller la fonction AJAX
  *urlAjx : Fichier ajax PHP
  *data : Variables à transmettres
  *callback : Fonction appellée en cas de succès
  *callbackerror : Fonction appellée en cas d'erreur (optionnel ! )
  *options : Variables suplémentaires à passer dans les fonction de callback si besoin (optionnel )
*/
 function sendAjx(urlAjx,data,callback,callbackerror,options){
  var async = typeof(options)!='undefined' && typeof(options.async)!='undefined' ? options.async : true;
   $.ajax({ 
      type: "POST",
      url: urlAjx,
      data: data,
      async: async,
      dataType: "json",
      success: function(reponse){
       //debug(reponse);
        if (typeof callback == 'function') { 
            callback(reponse,options); 
        }
       },
      error:function(jqXHR, textStatus){
        var error = formatErrorMessage(jqXHR, textStatus);
         if (typeof callbackerror == 'function') {
            callbackerror(error,options); 
         }else{
           alert('error :' + error);
         }
        }
     }); 
  
 }
 
 /**
  Format les messages erreurs AJAX pour les afficher
 */
 function formatErrorMessage(jqXHR, exception) {
 var errorTxt="";
 var err = jqXHR.responseText ;
    if (jqXHR.status === 0) {
        errorTxt = ('Not connected.\nPlease verify your network connection.');
    } else if (jqXHR.status == 404) {
        errorTxt = ('The requested page not found. [404]');
    } else if (jqXHR.status == 500) {
        errorTxt = ('Internal Server Error [500].');
    } else if (exception === 'parsererror') {
        errorTxt = ('Requested JSON parse failed.');
    } else if (exception === 'timeout') {
        errorTxt = ('Time out error.');
    } else if (exception === 'abort') {
        errorTxt = ('Ajax request aborted.');
    } else {
        errorTxt = ('Uncaught Error.\n' + jqXHR.responseText);
    }
    
    return errorTxt + " : " +err;
}





Pour ce qui est du PHP :

Déjà .. place le code de connexion à ta bdd dans un fichier à part
Comme ça.. tu n'auras qu'à l'inclure dans les pages où tu en as besoin
sans avoir à tout copier/coller en permanence.
Cela simplifie la maintenance du code... et au cas où tu changerais d'hébergeur... de ne pas
avoir à parcourir tous tes fichiers pour y faire la modification.
Par exemple :
<?php
//Fichier cnxBDD.php
 // connexion à la base de données
 $host = "localhost";
 $dbname = "locadir";
 $user = "root";
 $pwd = "";
  try {
      $bdd = new PDO("mysql:host=$host;dbname=$dbname", $user, $pwd);
  } catch (PDOException $e) {
      echo "<br>".$e."<br>";
      printf("%s:%d %s (%d) [%s]\n", $e->getFile(), $e->getLine(), $e->getMessage(), $e->getCode(), get_class($e));
      exit('Impossible de se connecter à la base de données.');
  }
?>


Puis ton script ajax php :
Comme tu pourras le voir, j'ai ajouté une variable "action" qui permet de choisir l'action à réaliser ...
<?php 
//affichage des erreurs PHP
error_reporting(E_ALL);

//connexion à la BDD
require_once 'cnxBDD.php';

//récupération "propre" des variables
$num_cli = !empty($_POST['NUM_CLI']) ? $_POST['NUM_CLI'] : NULL;
$ACTION = !empty($_POST['ACTION']) ? $_POST['ACTION'] : NULL;

//je défini une variable de retour :
$result=array();

//Choix de l'action à réaliser :
switch($ACTION){ 

 case "GET_CLIENTS":
   $sql = "SELECT * FROM clients ORDER BY NOM_CLI";
  try{
    $prepare = $bdd->prepare($sql);
   $res = $prepare->execute();
   //on stocke le résultat dans un ARRAY
   $result['RESULT'] = $prepare->fetchAll();
   }catch(Exception $e) {
    $result['ERROR'] = $e->getMessage();
   }
  break;
 
 case "GET_DEMANDES_BY_NUM_CLI":
  $sql = "SELECT * FROM demandes WHERE NUM_CLI = '$num_cli' ";
  try{
    $prepare = $bdd->prepare($sql);
   $res = $prepare->execute();
   //on stocke le résultat dans un ARRAY
   $result['RESULT'] = $prepare->fetchAll();
   }catch(Exception $e) {
    $result['ERROR'] = $e->getMessage();
   } 
  break;
  
  default: // si aucune action correspondante !
   $result['RESULT'] = $_POST
  $result['ERROR'] = "Aucune Action ne correspond";
}


    // envoi du résultat au success
  echo json_encode($result);

?>


Cordialement, 
Jordane                                                                 
2
Fontainard Messages postés 68 Date d'inscription dimanche 16 mars 2014 Statut Membre Dernière intervention 24 janvier 2017
9 mars 2016 à 17:35
Merci grandement d'avoir pris la peine de ré-adapter mon code c'est bien sympa, néanmoins... on arrive pas à appeller une action car une erreur s'affiche en console:
formdemande.phtml:26
._Deferred/e.resolveWith()
jquery.min.js:16
f</<.ready()
jquery.min.js:16
f</z()
jquery.min.js:16

$clients.on('change', function() {
      var val = $(this).val(); // on récupère la valeur de la demande
      if(val != '') {
        $demandes.empty(); // on vide la liste des demandes
        var data = { ACTION:"GET_DEMANDES_BY_NUM_CLI"
                    ,NUM_CLI:val
                   };


je crois que la fonction qui appartient à clients pose problème.
Aucune erreur ne semble s'afficher mis à part "Requested JSON parse failed. : "

Pour information, la bibliothèque que j'utilise est : https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js

Une idée ? :)
0
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650 > Fontainard Messages postés 68 Date d'inscription dimanche 16 mars 2014 Statut Membre Dernière intervention 24 janvier 2017
9 mars 2016 à 18:03

Aucune erreur ne semble s'afficher mis à part "Requested JSON parse failed. : "


Peux tu regarder, via la CONSOLE de ton navigateur, ce que donne l'appel à l'ajax ?
PS: pour ça.. j'utilise le plugin FIREBUG pour FIREFOX... je t'invite à en faire autant.
0
Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 524
8 mars 2016 à 11:28
Salut,

Tu semble bien être dans la bonne direction.

Quelques petites remarques à la première lecture :
- les variables javascript n'ont pas besoin d'être précédé par un $
- le htmlentities sur une variable avant de l'utilisé en sql n'est pas correct. htmlentities doit être utilisée uniquement lors de l'affichage dans un document html, rien à voir avec la protection sql.
Ici le intval suffit pour éviter les injections sql.

Du coup quel est précisément le problème ?
As tu des erreurs js dans la console de développement de ton navigateur ?
Toujours dans la console de développement, tu peux voir le résultat retourné par tes requêtes ajax dans l'onglet Réseau. Celles-ci sont-elles correctement exécutée et est-ce qu'elles retournent bien le résultat attendu ?

Bonne journée
-1
Fontainard Messages postés 68 Date d'inscription dimanche 16 mars 2014 Statut Membre Dernière intervention 24 janvier 2017
9 mars 2016 à 17:02
Merci pour ces conseils avisés Pitet.
Le problème, c'est que ça ne fonctionne pas avec cette méthode sans pour autant me présenter d'erreurs dans la console du navigateur. Seule l'affichage de clients fonctionne, et malgré la présence de demandes qui lui sont affectés, les demandes ne sont pas affichés.
0