Php/html valeur liste deroulante
mimi8210
Messages postés
167
Date d'inscription
Statut
Membre
Dernière intervention
-
mimi8210 Messages postés 167 Date d'inscription Statut Membre Dernière intervention -
mimi8210 Messages postés 167 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Quel est le code pour connaître la valeur d'une liste déroulante pour faire en sorte qu'au simple changement de valeur dans cette liste, on affiche ou non certaines informations de la même page, instantanément ...
Quel est le code pour connaître la valeur d'une liste déroulante pour faire en sorte qu'au simple changement de valeur dans cette liste, on affiche ou non certaines informations de la même page, instantanément ...
A voir également:
- Php/html valeur liste deroulante
- Liste déroulante excel - Guide
- Liste déroulante en cascade - Guide
- Liste déroulante google sheet - Accueil - Guide bureautique
- Editeur html - Télécharger - HTML
- Supprimer liste déroulante excel - Forum Réseaux sociaux
10 réponses
Salut,
un connaisseur débarque sur le post :P
Ce que tu cherches à faire, mimi, c'est de l'Ajax. Il y a un objet spécial en JavaScript qui s'appelle (accrochez-vous) XmlHttpRequest, et qui permet d'envoyer des requêtes à un serveur sans avoir besoin de recharger la page.
Le principe est simple :
1/ on crée un XmlHttpRequest (je vais dire XHR pour faire court),
2/ on lui associe à l'avance une fonction de traitement de la réponse,
3/ on lui donne l'adresse du serveur à interroger, la méthode (post ou get), et les paramètres de la requête, puis
4/ on envoie la requête.
Là où c'est moins simple, c'est que suivant le navigateur, ça ne se gère pas de la même façon :/ Mais en cherchant sur le Net, on trouve des tas de functions pour obtenir un XHR proprement. Elles sont toutes globalement équivalentes, mais je te laisse choisir la tienne, ça te fera un peu d'exercice ;)
Alors admettons que tu as réussi à créer un XHR, et qu'il s'appelle... xhr. On est à l'étape 2/. Ton serveur doit avoir été configuré pour répondre à la requête du XHR. Tu peux lui faire envoyer n'importe quel type de donnée (pas seulement du XML). Par exemple, voici un script PHP tout simple qui renvoie du texte :
Ensuite, la fonction JavaScript. Elle doit être capable de reconnaître dans quel état est le XHR :
0 -> pas prêt
1 -> prêt mais pas envoyé
2 -> envoyé mais pas encore de réponse
3 -> réponse en partie reçue
4 -> transfert terminé
En général, on ne s'intéresse qu'à l'état 4. La fonction doit aussi savoir si le serveur n'a pas fait d'erreur. Il renvoie des codes HTTP (par exemple, le fameux 404). Quand tout va bien, il renvoie 200.
La fonction doit donc commencer un peu comme ça :
Pour le script du serveur, tu as la totale liberté ! Tu peux changer le type de réponse comme je t'ai montré, tu peux générer des codes d'erreur si la requête SQL a échoué :
pour terminer l'étape 2/, il faut associer la fonction au XHR :
C'est le moment de préparer la requête, l'étape 3/. Pour l'exemple, je prends la méthode get :
Étape 4/ enfin, on envoie le corps requête. En get, le corps est vide car les paramètres passent par l'URL :
Après ça il n'y a plus rien à faire ! La fonction traitement est appellée automatiquement au fur et à mesure que les bouts de la réponse arrivent.
Pour résumer, voici les propriétés et les méthodes que j'ai utilisées dans ce post :
- onreadystatechange : la fonction associée
- readyState : le code d'état
- responseText : la réponse du serveur
- status : le code HTTP
- statusText : le message d'erreur HTTP
- open(méthode, url) : pour ouvrir la requête
- send(corps) : pour envoyer la requête.
Voilà comment on peut résumer l'Ajax en un seul post ^^
un connaisseur débarque sur le post :P
Ce que tu cherches à faire, mimi, c'est de l'Ajax. Il y a un objet spécial en JavaScript qui s'appelle (accrochez-vous) XmlHttpRequest, et qui permet d'envoyer des requêtes à un serveur sans avoir besoin de recharger la page.
Le principe est simple :
1/ on crée un XmlHttpRequest (je vais dire XHR pour faire court),
2/ on lui associe à l'avance une fonction de traitement de la réponse,
3/ on lui donne l'adresse du serveur à interroger, la méthode (post ou get), et les paramètres de la requête, puis
4/ on envoie la requête.
Là où c'est moins simple, c'est que suivant le navigateur, ça ne se gère pas de la même façon :/ Mais en cherchant sur le Net, on trouve des tas de functions pour obtenir un XHR proprement. Elles sont toutes globalement équivalentes, mais je te laisse choisir la tienne, ça te fera un peu d'exercice ;)
Alors admettons que tu as réussi à créer un XHR, et qu'il s'appelle... xhr. On est à l'étape 2/. Ton serveur doit avoir été configuré pour répondre à la requête du XHR. Tu peux lui faire envoyer n'importe quel type de donnée (pas seulement du XML). Par exemple, voici un script PHP tout simple qui renvoie du texte :
<?php
header('content-type: text/plain');
echo 'Bonjour !';
?>
Ensuite, la fonction JavaScript. Elle doit être capable de reconnaître dans quel état est le XHR :
0 -> pas prêt
1 -> prêt mais pas envoyé
2 -> envoyé mais pas encore de réponse
3 -> réponse en partie reçue
4 -> transfert terminé
En général, on ne s'intéresse qu'à l'état 4. La fonction doit aussi savoir si le serveur n'a pas fait d'erreur. Il renvoie des codes HTTP (par exemple, le fameux 404). Quand tout va bien, il renvoie 200.
La fonction doit donc commencer un peu comme ça :
function traitement () {
if (xhr.readyState != 4)
return;
if (xhr.status != 200) {
alert('erreur du serveur : '
+ xhr.status + ' ' + xhr.statusText);
return;
}
// ...
}
Pour le script du serveur, tu as la totale liberté ! Tu peux changer le type de réponse comme je t'ai montré, tu peux générer des codes d'erreur si la requête SQL a échoué :
header("HTTP/1.0 500 Probleme SQL");Là c'est également à toi de gérer.
pour terminer l'étape 2/, il faut associer la fonction au XHR :
xhr.onreadystatechange = traitement; // pas de parenthèses, c'est important
C'est le moment de préparer la requête, l'étape 3/. Pour l'exemple, je prends la méthode get :
xhr.open('get', 'url_du_script_serveur.php?param1=val1¶m2=val2');Les paramètres passent par l'URL, comme une requête get normale.
Étape 4/ enfin, on envoie le corps requête. En get, le corps est vide car les paramètres passent par l'URL :
xhr.send(null);En post ça se passerait comme ça :
xhr.send('param1=val1¶m2=val2');
Après ça il n'y a plus rien à faire ! La fonction traitement est appellée automatiquement au fur et à mesure que les bouts de la réponse arrivent.
Pour résumer, voici les propriétés et les méthodes que j'ai utilisées dans ce post :
- onreadystatechange : la fonction associée
- readyState : le code d'état
- responseText : la réponse du serveur
- status : le code HTTP
- statusText : le message d'erreur HTTP
- open(méthode, url) : pour ouvrir la requête
- send(corps) : pour envoyer la requête.
Voilà comment on peut résumer l'Ajax en un seul post ^^
mimi8210
Messages postés
167
Date d'inscription
Statut
Membre
Dernière intervention
10
Tout d'abord merci de me donner une telle explication. Je viens de lire les premières lignes et avant de poursuivre la compréhension de tout ça, je voudrais savoir si je peux coder avec cette méthode et vérifier le fonctionnement si je travaille en local ? Parce que pour l'instant je n'ais que ça ... =/ Aussi, un gars m'avait dit qu'il est possible de ne pas utiliser d'ajax, est de ne travailler qu'avec le javascript pour ce que je veux faire, en récupérant la valeur de la première liste déroulante, puis selon la valeur obtenue, transformer le : style=display:... de la deuxième liste en "none" ou en "yes", je ne sais pas si ça vous parle ?? Non non, je ne cherche pas à fuir la difficulté ! ^^' J'ai juste envie de comprendre mon code, enfin bon pour l'instant je me relance dans la compréhension de ton explication ! ;)
D'après mes recherches, il faut utiliser du javascript et des fonctions, dans un premier temps pour récupérer le choix effectué dès le click de l'utilisateur, ensuite il faut, je pense, faire un méli mélo du php et du javascript pour effectuer les conditions désirées... Je continue mes recherches, (en ne connaissant pas vraiment le javascript ça va être délicat mais bon ^^') si je trouve avant qu'un connaisseur n'ait débarqué sur le post, je ferai part de mes trouvailles ^^
Oui, t'es obligé de passer par du javascript pour le coup
Afficher des informations sur la page ... ca veut dire simplement cacher des champs, ou aller chercher des infos en base de données suivant la valeur du select ?
Afficher des informations sur la page ... ca veut dire simplement cacher des champs, ou aller chercher des infos en base de données suivant la valeur du select ?
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Les deux en fait ^^' C'est à dire que je récupère des données de la BDD, et la valeur du select précédent déterminera la condition d'affichage...
c est juste une mise a jour d affichage que tu as a faire quand la listbox change de valeur ou tu as un traitement a faire a ce moment (chercher des infos en bdd ou autres).
en fait la vrai question est est ce que tu as besoin de php quand la valeur change ou juste du javaScript?
en fait la vrai question est est ce que tu as besoin de php quand la valeur change ou juste du javaScript?
Je ne sais pas trop justement vu que je ne sais pas comment programmer face à ce problème.
Si tu veux, il s'agit de deux listes déroulantes: la première est un résultat de requête (qui fonctionne!), la deuxième est aussi un résultat de requête (qui fonctionne aussi mais pour l'instant, toutes les informations possibles s'affichent, alors que je voudrais afficher simplement celles dont la clé primaire est représentée par la valeur de la première liste déroulante)...
Arf je ne pense pas être très claire, mais je n'arrive pas à m'expliquer autrement =/
Si tu veux, il s'agit de deux listes déroulantes: la première est un résultat de requête (qui fonctionne!), la deuxième est aussi un résultat de requête (qui fonctionne aussi mais pour l'instant, toutes les informations possibles s'affichent, alors que je voudrais afficher simplement celles dont la clé primaire est représentée par la valeur de la première liste déroulante)...
Arf je ne pense pas être très claire, mais je n'arrive pas à m'expliquer autrement =/
Si si, c'est plus clair maintenant
Et ca complique d'autant plus la chose qu'il faut que tu passes par une requête AJAX
Enfin, c'est pas forcément compliqué en soit, mais faut prendre le tps de comprendre :S
Et ca complique d'autant plus la chose qu'il faut que tu passes par une requête AJAX
Enfin, c'est pas forcément compliqué en soit, mais faut prendre le tps de comprendre :S
bon alors dit moi si j ai bien compris.
tu veux que le contenu de la première listbox conditionne le contenu de la deuxième?
si c est le cas tu n as qu une solution, onclick => requete AJAX qui va chercher les infos en fonction du choix sélectionne dans la première et affichage de la 2eme listbox
tu veux de l aide pour le faire?
tu veux que le contenu de la première listbox conditionne le contenu de la deuxième?
si c est le cas tu n as qu une solution, onclick => requete AJAX qui va chercher les infos en fonction du choix sélectionne dans la première et affichage de la 2eme listbox
tu veux de l aide pour le faire?
Oui tu as bien compris. Et en effet, si tu veux bien m'accorder un peu de temps je veux bien de l'aide, mais avant de t'engager sache que je ne connais actuellement strictement rien en AJAX, et à peine en javascript =( ...
Si jamais tu veux bien m'expliquer comment faire, je te donne des infos qui pourraient t'aider à comprendre ma situation exacte...
Alors voici mes deux tables :
CATEGORIE(nomcategorie);
SOUSCATEGORIE(nomsouscategorie, nomcategorie);
Voici ma première fonction javascript que j'ai réussis à trouver ce matin qui me permet de récupérer la valeur de la liste catégorie (elle fonctionne, j'ai vérifié avec un echo):
function recuperer()
{
var cat=document.getElementById('categorie').options[document.getElementById('categorie').selectedIndex].value
}
Voici ma première liste déroulante (celle donc de catégorie) :
<select NAME="categorie" id="categorie" style="width:20em" onchange=recuperer()>
<option> Choisir categorie </option>
<?php $req=mysql_query("Select nomcategorie from CATEGORIE") or die ("Erreur requete: ".mysql_error());
if( mysql_num_rows($req) == 0 )
{
echo 'Aucune catégorie enregistrée';
?>
<input type="button" value="Retour" onclick="window.location.replace('pagegestionarticle.php')"/>
<?php
}
else
{
$i = 0;
$trouve =0;
while ( ( $i<mysql_num_rows($req) ) && ($trouve ==0) )
{
$donnee = mysql_fetch_array($req);?>
<option VALUE="<?php echo ' ' .$donnee["nomcategorie"]. ' ';?>"><?php echo ' ' .$donnee["nomcategorie"]. ' ';
$i=$i+1;
}
}
?>
</select>
Voici ma deuxième liste déroulante (pour l'instant sans aucune condition, elle affiche toutes les sous-categories possibles)
<select NAME="souscategorie" style="width:20em">
<option> Choisir sous catégorie </option>
<?php
$req=mysql_query("Select nomsouscategorie from SOUSCATEGORIE ") or die ("Erreur requete: ".mysql_error());
if( mysql_num_rows($req) == 0 )
{
echo 'Aucune sous-catégorie enregistrée';
?>
<input type="button" value="Retour" onclick="window.location.replace('pagegestionarticle.php')"/>
<?php
}
else
{
$i = 0;
$trouve =0;
while ( ( $i<mysql_num_rows($req) ) && ($trouve ==0) )
{
$donnee = mysql_fetch_array($req);?>
<option VALUE="<?php echo ' ' .$donnee["nomsouscategorie"]. ' ';?>" style=afficher() ><?php echo ' ' .$donnee["nomsouscategorie"]. ' ';
$i=$i+1;
}
}
?>
</select>
Voilà, s'il te manque des informations tu me dis...
Si jamais tu veux bien m'expliquer comment faire, je te donne des infos qui pourraient t'aider à comprendre ma situation exacte...
Alors voici mes deux tables :
CATEGORIE(nomcategorie);
SOUSCATEGORIE(nomsouscategorie, nomcategorie);
Voici ma première fonction javascript que j'ai réussis à trouver ce matin qui me permet de récupérer la valeur de la liste catégorie (elle fonctionne, j'ai vérifié avec un echo):
function recuperer()
{
var cat=document.getElementById('categorie').options[document.getElementById('categorie').selectedIndex].value
}
Voici ma première liste déroulante (celle donc de catégorie) :
<select NAME="categorie" id="categorie" style="width:20em" onchange=recuperer()>
<option> Choisir categorie </option>
<?php $req=mysql_query("Select nomcategorie from CATEGORIE") or die ("Erreur requete: ".mysql_error());
if( mysql_num_rows($req) == 0 )
{
echo 'Aucune catégorie enregistrée';
?>
<input type="button" value="Retour" onclick="window.location.replace('pagegestionarticle.php')"/>
<?php
}
else
{
$i = 0;
$trouve =0;
while ( ( $i<mysql_num_rows($req) ) && ($trouve ==0) )
{
$donnee = mysql_fetch_array($req);?>
<option VALUE="<?php echo ' ' .$donnee["nomcategorie"]. ' ';?>"><?php echo ' ' .$donnee["nomcategorie"]. ' ';
$i=$i+1;
}
}
?>
</select>
Voici ma deuxième liste déroulante (pour l'instant sans aucune condition, elle affiche toutes les sous-categories possibles)
<select NAME="souscategorie" style="width:20em">
<option> Choisir sous catégorie </option>
<?php
$req=mysql_query("Select nomsouscategorie from SOUSCATEGORIE ") or die ("Erreur requete: ".mysql_error());
if( mysql_num_rows($req) == 0 )
{
echo 'Aucune sous-catégorie enregistrée';
?>
<input type="button" value="Retour" onclick="window.location.replace('pagegestionarticle.php')"/>
<?php
}
else
{
$i = 0;
$trouve =0;
while ( ( $i<mysql_num_rows($req) ) && ($trouve ==0) )
{
$donnee = mysql_fetch_array($req);?>
<option VALUE="<?php echo ' ' .$donnee["nomsouscategorie"]. ' ';?>" style=afficher() ><?php echo ' ' .$donnee["nomsouscategorie"]. ' ';
$i=$i+1;
}
}
?>
</select>
Voilà, s'il te manque des informations tu me dis...