PHP

Cliquer sur un menu déroulant + affichage instantané

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Cliquer sur un menu déroulant + affichage instantané

cedric0123

Bonjour tout le monde,
Je me permets de venir demander votre aide car je bloque sur mon code depuis 2 jours et j'espère que quelqu'un, ici, pourra m'éclairer.
Je réalise actuellement un code PHP dans lequel se trouve un menu déroulant récupérant des données de ma base Mysql.
J'aimerais pouvoir sélectionner les champs que je souhaite de mon menu déroulant, et , lors de la sélection d'un ou plusieurs champs, récupérer de manière instantanée mes choix dans un tableau sur la même page.
En regardant différents forums, j'ai pu constater que cela nécessitait l'utilisation de javascript et j'avoue que je ne vois pas du tout comment m'y prendre.

Je vous remercie d'avance de bien vouloir m'éclairer

Voici mon code pour le moment:

<label for="CodeConducteur">Code conducteur : </label>

<?php

$db = mysqli_connect("localhost", "root", "" ) or die("Impossible de se connecter : " . mysqli_error());
mysqli_select_db($db,'drupal') or die("Impossible de se connecter à la base de données : " . mysqli_error());
$req = "SELECT CodeConducteur FROM dbo_conducteurs WHERE (((dbo_Conducteurs.IdGroupe)=5) AND ((dbo_Conducteurs.DateFinActif) = '')) ORDER BY dbo_Conducteurs.CodeConducteur";
$res = mysqli_query($db, $req);

echo "<SELECT NAME='CodeConducteur' onChange='FocusObjet()'>";
while ($result = mysqli_fetch_array($res)) {
echo "<OPTION VALUE='$result[0]'>$result[0]</OPTION>\n";
}
echo "</SELECT>";

mysqli_close($db);

?>

Publicité

antac

Bonjour Cédric,

En fait ce que tu veux faire c'est typiquement de l'Ajax.
Cette page te donnera un bon exemple : http://www.w3schools.com/php/php_ajax_database.asp

et la manière de faire

cedric0123

Merci beaucoup! C'était vraiment ça que je voulais, ça marche niquel.

Par contre, par rapport au code présenté sur le lien que tu m'as fourni, est-il possible d'ajouter plusieurs entrées dans le tableau en gardant en mémoire la sélection précédente ?
Je m'explique.

Dans ce code, à chaque nouveau choix dans le menu déroulant, la sélection précédente disparait et est remplacée par le nouveau choix.

Maintenant, admettons que je choisisse dans mon menu déroulant: Dupont Pierre
-> Dupont Pierre s'inscrit dans le tableau automatiquement.
Si je veux maintenant sélectionner Durand Jean dans mon menu déroulant, comment faut-il modifier le code pour obtenir dans le tableau:

-Dupont Pierre
-Durant Jean

Merci d'avance

cedric0123

Voici mon code:

fichier HTML

<html>
<head>
<script>
function showUser(str) {
if (str == "" ) {
document.getElementById("txtHint" ).innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP" );
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txtHint" ).innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
}
</script>
</head>
<body>

<form>
<select name="NomConducteur" onchange="showUser(this.value)">
<option value="">Choisir un VP:</option>
<option value="328">Ballesteros Carmen</option>
<option value="516">Benoiton Julio</option>
<option value="517">Bonaccio Herve</option>
<option value="137">Chami Mustapha</option>
<option value="274">Chamot Daniel</option>
<option value="444">Poplimont Jean-Pierre</option>
<option value="475">Paubert Laurence</option>
<option value="497">Truffet Alain</option>
</select>
</form>
<br>
<div id="txtHint"><b></b></div>

</body>
</html>

Fichier PHP

<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 50%;
border-collapse: collapse;
}

table, td, th {
border: 1px solid black;
padding: 5px;
}

th {text-align: left;}
</style>
</head>
<body>

<?php
$q = intval($_GET['q']);

$con = mysqli_connect('localhost','root','','drupal');
if (!$con) {
die('Could not connect: ' . mysqli_error($con));
}

mysqli_select_db($con,"ajax_demo" );
$sql="SELECT CodeConducteur, NomConducteur, PrenomConducteur FROM dbo_conducteurs WHERE (((dbo_Conducteurs.IdConducteur)= '".$q."') AND ((dbo_Conducteurs.DateFinActif) = '') ) ORDER BY dbo_Conducteurs.CodeConducteur";
$result = mysqli_query($con,$sql);

echo "<table>
<tr>
<th>Code Conducteur</th>
<th>Nom Conducteur</th>
<th>Prenom Conducteur</th>
</tr>";
while($row = mysqli_fetch_array($result)) {
echo "<tr>";
echo "<td>" . $row['CodeConducteur'] . "</td>";
echo "<td>" . $row['NomConducteur'] . "</td>";
echo "<td>" . $row['PrenomConducteur'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysqli_close($con);
?>
</body>
</html>

antac

Dans ce cas le mieux c'est d'enregistrer dans un tableau (array) javascript les choix qui ont été fait en les cumulants.

Pour ça :
Déclare un tableau au début de ta page du genre : var MonTableau = new Array();
Dans la fonction showUser(id), tu fais MonTableau.push(id) pour ajouter l'id sélectionner au tableau.

Une fois ceci fait, tu constitues une chaîne d'ids séparée par des virgules : var strLstId=MonTableau.join(',');
Et tu passes cette variable (strLstId) en paramètre (D'ailleurs je te conseille d'utiliser du POST au lieu du GET).

(Je te conseille de prévoir aussi un bouton de reset pour réinitialiser ton tableau)

Côté PHP et SQL au lieu d'utiliser (dbo_Conducteurs.IdConducteur)= '".$q."' tu utiliseras (dbo_Conducteurs.IdConducteur) IN ( '".$q."')

Message édité par antac le 16-04-2015 à 11:46:07

cedric0123

Merci je vais essayer de faire ça, si j'y arrive. Je ne suis pas une flèche en php.
Merci de m'aider en tous cas.

cedric0123

Je n'y arrive pas ...

antac

Qu'est ce qui te bloque ?

cedric0123

Je ne vois pas où placer les différentes lignes de code que tu m'as écrit. J'ai essayé mais mon tableau ne s'affiche même plus lorsque j'actualise ma page.
( J'avais prévenu, je suis mauvais ahaha)

antac

Poste ton code modifié

Message édité par antac le 16-04-2015 à 21:28:38

Publicité

cedric0123

<html>
<head>
<script>

var Tableau = new Array();
var strLstId = Tableau.join(',');

function showUser(str, strLstId) {
if (str == "" ) {
document.getElementById("txtHint" ).innerHTML = "";
return;
}
else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP" );
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txtHint" ).innerHTML = xmlhttp.responseText;

}
}
xmlhttp.open("POST","getuser2.php?q="+str,true,);
Tableau.push(str);
xmlhttp.send();

}

}

</script>
</head>
<body>

<form>
<select name="NomConducteur" onchange="showUser(this.value)">
<option value="">Choisir un VP:</option>
<option value="328">Personne1</option>
<option value="516">Personne2</option>
<option value="517">Personne3</option>
<option value="137">Personne4</option>
<option value="274">Personne5</option>
<option value="444">Personne6</option>
<option value="475">Personne7</option>
<option value="497">Personne8</option>
</select>
</form>
<br>
<div id="txtHint"><b></b></div>

</body>
</html>

rufo

Pas me confondre avec Lycos!

var Tableau = new Array();
var strLstId = "";

Puis dans showUser(), avant xmlhttp.open, tu fais :
Tableau.push(str);
strLstId = Tableau.join(',');
xmlhttp.open("POST","getuser2.php?q="+strLstId,true,);

---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta

cedric0123

Merci de m'aider
ça ne marche toujours pas mais il y a du progrès. Maintenant lorsque je clique sur un choix de mon menu déroulant, celui s'affiche et lorsque je clique sur un autre choix, le premier choix reste affiché mais n'affiche pas le second à la suite.

<html>
<head>
<script>

var Tableau = new Array();
var strLstId = "";

function showUser(str) {
if (str == "" ) {
document.getElementById("txtHint" ).innerHTML = "";
return;
}
else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP" );
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txtHint" ).innerHTML = xmlhttp.responseText;

}
}
Tableau.push(str);
strLstId = Tableau.join(',');
xmlhttp.open("POST","getuser2.php?q="+strLstId,true);
xmlhttp.send();

}

}

</script>
</head>
<body>

<form>
<select name="NomConducteur" onchange="showUser(this.value)">
<option value="">Choisir un VP:</option>
<option value="328">Personne1</option>
<option value="516">Personne2</option>
<option value="517">Personne3</option>
<option value="137">Personne4</option>
<option value="274">Personne5</option>
<option value="444">Personne6</option>
<option value="475">Personne7</option>
<option value="497">Personne8</option>
</select>
</form>
<br>
<div id="txtHint"><b></b></div>

</body>
</html>

cedric0123

Ah oui et autre petit problème, que je fasse mon premier choix sur personne 1, personne 2 ou 3 4 5 6 7 8, il n'y a que le nom,prenom,code de la personne 1 qui apparait.

rufo

Pas me confondre avec Lycos!

Ca vient de ça, je pense : document.getElementById("txtHint" ).innerHTML = xmlhttp.responseText;

Ton script php, il revoie quoi comme réponse : ce qui est attendu ou un truc moisi ? En gros, faut déterminer si c'est la source de données qui est fausse mais affichée correctement ou si la source de données et bonne mais mal affichée.

cedric0123

ça me renvoie bien les informations que je souhaite, donc je pense pas que la requete sql ait un problème.
C'est juste que maintenant, lorsque je clique sur mon menu déroulant, quelle que soit la personne que je sélectionne, ça me renvoie les informations concernant "personne1" qui restent affichées même si je clique sur un autre choix par la suite.

Je t'envoie mon document php pour que tu puisses voir.

<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 50%;
border-collapse: collapse;
}

table, td, th {
border: 1px solid black;
padding: 5px;
}

th {text-align: left;}
</style>
</head>
<body>

<?php
$q = intval($_GET['q']);

$con = mysqli_connect('localhost','root','','drupal');
if (!$con) {
die('Could not connect: ' . mysqli_error($con));
}

mysqli_select_db($con,"ajax_demo" );
$sql="SELECT CodeConducteur, NomConducteur, PrenomConducteur FROM dbo_conducteurs WHERE (((dbo_Conducteurs.IdConducteur)= '".$q."') AND ((dbo_Conducteurs.DateFinActif) = '') ) ORDER BY dbo_Conducteurs.CodeConducteur";
$result = mysqli_query($con,$sql);

echo "<table>
<tr>
<th>Code Conducteur</th>
<th>Nom Conducteur</th>
<th>Prenom Conducteur</th>
</tr>";
while($row = mysqli_fetch_array($result)) {
echo "<tr>";
echo "<td>" . $row['CodeConducteur'] . "</td>";
echo "<td>" . $row['NomConducteur'] . "</td>";
echo "<td>" . $row['PrenomConducteur'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysqli_close($con);
?>
</body>
</html>

rufo

Pas me confondre avec Lycos!

To PHP est pas bon.

Une foisla requête SQL faite, tu doit envoyer la portion de HTML à afficher à ton navigateur dans la <div> prévue et non une page HTML entière.

Tu doit donc mettre :

Code :

// Ta requête SQL ici puis :
header("Content-type: text/html; charset=UTF-8" );
echo "<table>
<tr>
<th>Code Conducteur</th>
<th>Nom Conducteur</th>
<th>Prenom Conducteur</th>
</tr>";
while($row = mysqli_fetch_array($result)) {
    echo "<tr>";
    echo "<td>" . $row['CodeConducteur'] . "</td>";
    echo "<td>" . $row['NomConducteur'] . "</td>";
    echo "<td>" . $row['PrenomConducteur'] . "</td>";
    echo "</tr>";
}
echo "</table>";
mysqli_close($con);

antac

C'est ta requête SQL qui est mauvaise. Comme je t'ai dit (dbo_Conducteurs.IdConducteur)= '".$q."') doit être modifié par

(dbo_Conducteurs.IdConducteur) IN (".$q." ))
Afin de gérer la conditions sur toutes les valeurs passées.

Par contre, on voit clairement que tu ne comprends pas ce que tu écris... Faut y aller progressivement avant de taper dans l'ajax, faut déjà comprendre un poil le fonctionnement du javascript et des divs

Message édité par antac le 17-04-2015 à 21:47:27

cedric0123

Je sais que je ne comprends pas grand chose au code que je fais, mais c'est dans le cadre d'un projet de stage, du coup je n'ai pas le temps d'apprendre tous les langages... Je suis un peu pressé par mon tuteur...

J'ai suivi tes conseils pour la requête sql mais ça ne change rien au problème pour le moment.

rufo

Pas me confondre avec Lycos!

Un petit tour sur OpenClassRoom te serait fort utile concernant Ajax
Et la période de stage est justement le bon moment pour apprendre de nouveaux langages ou se perfectionner. Un projet de stage n'a pas l'obligation d'aboutir (du reste, un nb important de stages n'aboutissent pas à un résultat directement exploitable par l'entreprise). Par contre, le stage doit avoir permis à l'étudiant d'avoir appris des choses en plus par rapport à ce qu'il connaissait en sortant de son école et pour l'entreprise, d'avoir au moins déblayé le terrain et voir les pistes à laisser de côté et celles à explorer ou retenir et mettre en oeuvre dans un autre stage ou une vrai mission

Message cité 1 fois

cedric0123

Merci du conseil rufo, j'essaye mais j'ai vraiment envie de réaliser ce projet, j'ai horreur des choses non terminées.
Pour moi, les balises <div> servent uniquement pour les id afin de les gérer avec le css. Dans mon cas, je vais par la suite incorporer les codes dans un site sous Drupal.

Est-ce-cela que tu voulais que je fasse ?

<div id="txtHint">
<?php
header("Content-type: text/html; charset=UTF-8" );
echo "<table>
<tr>
<th>Code Conducteur</th>
<th>Nom Conducteur</th>
<th>Prenom Conducteur</th>
</tr>";
while($row = mysqli_fetch_array($result)) {
echo "<tr>";
echo "<td>" . $row['CodeConducteur'] . "</td>";
echo "<td>" . $row['NomConducteur'] . "</td>";
echo "<td>" . $row['PrenomConducteur'] . "</td>";
echo "</tr>";
}
echo "</table>";
?>
</div>

<?php
mysqli_close($con);
?>

rufo

Pas me confondre avec Lycos!

Tu ne comprends vraiment pas ce que tu fais, le code que tu postes le démontre clairement. Manifestement, tu ne capte pas l'enchaînement des portions de codes exécutées côté client et serveur. :pfff:

<div id="txtHint">
<?php
header("Content-type: text/html; charset=UTF-8" );

--> ça n'a aucun sens. <div id="txtHint"> est côté client et déjà dans la page affichée alors que le script php qui doit générer le contenu à la volée de la div via ajax se fait côté serveur et ne vas envoyer qu'une portion de html à ta page déjà affichée.

Franchement, si tu veux gagner du temps et finir ton projet, vas sur OpenClassRoom et passe une journée ou 2 à lire leurs tutos sur Ajax (et éventuellement javascript si tu connais pas trop). Tu verras qu'ensuite, tu perdras beaucoup moins de temps à développer et à pas comprendre pourquoi ce que tu fais ne fonctionne pas

Edit : ah oui, et lire la doc de php, ça peut te servir aussi. Si t'avais lu à quoi sert header(), t'aurais vite vu que le mettre là après avoir mis <div id="txtHint"> avant allait générer un msg d'erreur de php

Message édité par rufo le 17-04-2015 à 16:21:59

bardiel

Debian powa !

rufo a écrit :

Et la période de stage est justement le bon moment pour apprendre de nouveaux langages ou se perfectionner. Un projet de stage n'a pas l'obligation d'aboutir (du reste, un nb important de stages n'aboutissent pas à un résultat directement exploitable par l'entreprise). Par contre, le stage doit avoir permis à l'étudiant d'avoir appris des choses en plus par rapport à ce qu'il connaissait en sortant de son école et pour l'entreprise, d'avoir au moins déblayé le terrain et voir les pistes à laisser de côté et celles à explorer ou retenir et mettre en oeuvre dans un autre stage ou une vrai mission

Exactement, donc si ton tuteur n'a pas conscience de cela, il faudra le lui indiquer qu'il ne s'agit qu'une "base", pas de quelque chose d'opérationnel à la suite.
Beaucoup d'entreprises prennent des stagiaires pour faire du remplacement ou pour les mettre sur un projet de manière à ne pas embaucher quelqu'un temporairement, ça leur coûte beaucoup moins cher de faire ainsi... à voir aussi quels sont tes objectifs par rapport à ta formation, si tu as pris un stage de développement PHP/SQL/Ajax mais que tu vas bosser par la suite dans un tout autre sujet (Admin AD par exemple), t'as raté ton objectif de formation [:spamatounet]

Je conseillerais aussi de regarder les log de PHP sur ton serveur, et d'utiliser error_log (voir le manuel PHP dessus) pour te faire des traces pour savoir si ton script PHP se déroule bien.
Si tu faisais vraiment un développement de "manière pro", il faudrait aussi regarder les logs du serveur SQL pour optimiser les demandes et la base SQL.

---------------
Grippe ? Coronavirus ? Portez votre masque correctement ! :D

antac

Regarde aussi du côté de firebug pour analyser les paramètres et les retours de ton appel ajax

rufo

Pas me confondre avec Lycos!

Je me demande si Firebug est toujours nécessaire vu les outils de dév inclus dans les dernières versions de Firefox...

antac

Ah quand même, je trouve Firebug mieux personnellement.... Mais c'est peut être aussi une question d'habitude.

Message édité par antac le 20-04-2015 à 12:31:56

Publicité

FORUM HardWare.fr

Programmation

PHP

Cliquer sur un menu déroulant + affichage instantané

Sujets relatifs
probleme d'affichage d'une seconde fenêtre	affichage par mois
Affichage d'une date en format "dd-MM-yyyy"	Barre de menu : retour à la ligne
Script animation bandeau déroulant	Menu et compatibilité Javascript IE
Affichage sous-liste	Probelme d'affichage html sur internet explorer
aide pour affichage dans un cadre donné "CSS"	Probleme affichage Nginx <-> PHP
Plus de sujets relatifs à : Cliquer sur un menu déroulant + affichage instantané

Page générée en 0.097 secondes