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
Hello World ! On en aura jamais fini d'apprendre !
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
Hello World ! On en aura jamais fini d'apprendre !
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
Hello World ! On en aura jamais fini d'apprendre !
Première utilisation d'AJAX
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.