Bonjour/Bonsoir à tous

J'utilise pour la première fois Ajax et - évidemment - je bloque un peu, surtout parce que mes connaissances en jQuery sont pas très élevées en réalité.

Voici ce que je souhaite faire :

J'ai un formulaire avec un input de type texte (pour rentrer un code postal), et j'aurais aimé qu'une fonction jquery soit appelée automatiquement lorsque cet input du formulaire est modifié, dans le but de remplir une liste déroulante avec le nom des communes associées à ce code postal.

Du coup je ne peux pas faire un $('.input').on('click', function () { ... } ); (Ce qui est a peu près tout ce que je sais faire pour le moment )  car il n'y a pas de bouton 'envoyer' ou autre je le sais bien, ce qu'il me faudrait c'est quelque chose du type : Si le champ input a reçu 5 chiffres (qui composent alors le code postal), alors appelle la fonction jquery.

Voici le code de test que j'utilise pour le moment  (avec des commentaires pour mes interrogations sur le code ^^) :

PHP :

<div>
 <form>
   <input id="cp" maxlength="5" name="cp" type="text"> // input ou l'user entre le code postal
 </form>
</div>
<div>
 <span>communes</span>
   <select name="commune" id="commune">
     // ici s'affichent grâce a AJAX les communes liées au cp indiqué au dessus
    </select>
</div>

Jquery :

$('#cp').on('click', function () { // ici je ne sais pas quoi utiliser ..
      remplirListeCommunes();
});

function remplirListeCommunes() {
  var jqxhr = $.ajax({
    type: 'post',    // méthode post
    url: '/remplircommunes',
    dataType: "html",    // le fichier php fait un echo de code HTML
    contentType: "application/x-www-form-urlencoded; charset=UTF-8",
    data: "cp =" + cp // est ce que c'est comme cela que l'on envoi au script php le paramètre cp ?
   })
   .done(function (response, textStatus, jqXHR) {
     $("#categorie").html("<option value=''>Veuillez choisir...</option>" + response);
    })
    .fail(function (jqXHR, textStatus, errorThrown) {
      // Réagit si le code serveur n'a pas pu être appelé par AJAX, s'il a planté ou s'il n'a pas retourné le bon type de données
      $("#categorie").html("<option value=''>Un problème technique nous empêche de retrouver les catégories (code A).</option>");
    });
}

Voila mon petit soucis;

Merci d'avance aux personnes qui pourront m'aider

Cdt

Mecadie

Bonjour,

Pour tester en temps "réel" le contenu de ton input et calculer la taille de la chaine de caractères, tu peux faire:

$('#cp').val().length < 5

-
Edité par eclairia 9 janvier 2018 à 18:10:08

eclairia a écrit:

Bonjour,

Pour tester en temps "réel" le contenu de ton input et calculer la taille de la chaine de caractères, tu peux faire:

$('#cp').val().length < 5

-
Edité par eclairia il y a 36 minutes

Merci de l'info,

et du coup pour appeler la fonction si cet condition est remplie je peux faire ça ?

if($('#cp').val().length < 5) {
 remplirListeCommunes();
}

Cdt

Mecadie

Normalement oui.

Pour tester si cela fonctionne, mets un console.log("Salut") entre tes accolades.

Si "Salut" apparait alors tu peux appeler remplirListeCommunes(); de la même façcon.

eclairia a écrit:

Normalement oui.

Pour tester si cela fonctionne, mets un console.log("Salut") entre tes accolades.

Si "Salut" apparait alors tu peux appeler remplirListeCommunes(); de la même façcon.

Hello !

J'ai grâce a ton aide j'ai réussi à avancer jusque ce point :

J'ai ajouté un 'onchange="myFunction()"' à mon input et voici le Jquery que j'ai :

 function test(){
     if($('#cp').val().length == 5) {
        console.log( "ok!" );
     } else {
        console.log( "nok!" );
     }
 };

Du coup quand je modifie le champ 'cp' et que j'ai entré 5 caractères j'ai bien le 'ok!' qui s'affiche dans la console, cependant le log ne s'affiche que lorsque l'utilisateur clique de nouveau en dehors de l'input .. Quel est la méthode qui doit remplacer le 'onchange' pour que 'ok!' s'affiche directement dans la console sans que l'utilisateur ne doive quitter l'input ?

Cdt

Mecadie

UPDATE : j'ai utilisé l'évènement onkeyup, ca fonctionne je laisse le sujet ouvert au cas ou j'ai d'autres questions

-
Edité par Mecadie 10 janvier 2018 à 11:38:07

Salut vénérable développeur,

un onkeyup devrait convenir pour effectuer des tests après chaque frappe

-
Edité par 007julien 10 janvier 2018 à 15:30:13

007julien a écrit:

un onkeyup devrait convenir pour effectuer des tests après chaque frappe

Oui j'ai dit dans l'edit que j'avais utilisé ca pour m'en sortir