[Réglé]Menu déroulant

Menu déroulant [Réglé] - HTML/CSS - Programmation

Marsh Posté le 18-01-2007 à 11:53:18    

Bonjour,
 
J'utilise dans mon script un menu déroulant.
Seulement j'aimerais bien quelques petit truc en plus.
 
Voici le code utilisé :
 
Javascript dans le header :  

Citation :

   <script type="text/javascript" language="JavaScript">
<!--
function postoption(){
var choix=document.formulaire.critere.selectedIndex
switch (choix)
{case 0:location.href="liste.php?crit=nom";break;
case 1:location.href="liste.php?crit=prenom";break;
case 2:location.href="liste.php?crit=ville";break;
case 3:location.href="liste.php?crit=societe";break;
case 4:location.href="liste.php?crit=mail";break;
case 5:location.href="liste.php?crit=profession";break;
default:location.href="liste.php";break;
}
}
//-->
</script>


 
Formulaire :
 

Citation :

<form name="formulaire">
Lister par :
<select name="critere" onchange="postoption()">
<option value="nom">Nom</option>
<option value="prenom">Prenom</option>
<option value="ville">Ville</option>
<option value="societe">Société</option>
<option value="mail">Mail</option>
<option value="profession">Profession</option>
</select>
</form>


 
Déjà, j'aimerais pourvoir rajouter du php ici : href="liste.php?crit=profession";break; (je voudrais rajouter une variable du style liste.php?crit=profession&lettre='.$lettre.'  dans le javascript)
Est ce possible si je met le code dans body ?
 
Et deuxiemement, lorsque je clique sur une option du menu sur le site, le menu se remet tout de suite sur la premiere option et celle ci est inclicable. Comment faire pour garder en mémoire le choix de l'option (qu'il reste affiché dans le menu) ?
 
Merci beaucoup


Message édité par izbing2 le 19-01-2007 à 15:36:13
Reply

Marsh Posté le 18-01-2007 à 11:53:18   

Reply

Marsh Posté le 18-01-2007 à 14:14:27    

Bonjour,

 

Je ne comprends pas pourquoi tu utilises Javascript de la sorte ici, c'est absolument superflu. En plus, tu rajoutes une valeur dans ton formulaire, paf tu dois modifier ton code JS aussi ...

 

Tu ne le précises pas mais je vois avec la page de destination que tu es en php alors voici un petit bout de code qui devrait aller mieux (je suppose que le formulaire fait pointer sur la page elle-même, mieux aussi de ne pas entrer cette valeur en dur)

 


Code :
  1. <?php
  2. echo '<form name="formulaire" method="get" action="'.$_SERVER['PHP_SELF'].'">
  3. Lister par :';
  4. echo '<select name="critere" onchange="submit()">';
  5. echo '
  6. <option value="nom" '.($_GET['critere']=="nom" ? 'selected':'').'>Nom</option>
  7. <option value="ville" '.($_GET['critere']=="ville" ? 'selected':'').'>Ville</option>
  8. <option value="societe" '.($_GET['critere']=="societe" ? 'selected':'').'>Societe</option>
  9. <option value="mail" '.($_GET['critere']=="mail" ? 'selected':'').'>Mail</option>
  10. <option value="profession" '.($_GET['critere']=="profession" ? 'selected':'').'>Profession</option>
  11. ';
  12. echo '</select></form>';
  13. ?>
 


Message édité par ZeBix le 18-01-2007 à 14:16:23
Reply

Marsh Posté le 18-01-2007 à 14:49:17    

Il ne faut jamais utiliser de JS pour ce genre de trucs, ça pose plein de problèmes d'usabilité... Il vaut toujours mieux mettre un p'tit bouton Ok à côté...

Reply

Marsh Posté le 18-01-2007 à 14:52:53    

Je ne sais pas quels sont les problèmes d'usabilité en soi mais en tout cas pour ma part je mets toujours un bouton submit aussi, l'habitude sans doute :)
 
@izbing : comme florentG le suggère tu peux donc enlever le paramètre "onchange" et rajouter un :  
 

Code :
  1. <input type="submit" value="Ok">

 
 
avant la balise </form>  
 
:)

Reply

Marsh Posté le 18-01-2007 à 15:02:14    

Oui je connaissais mais en fait je fais se script pour une entreprise et si chez eux ça marche ben le reste on s'en fou ;-) (et ils veulent pas se faire chier avec le bouton)
 
Sinon je crois qu'on c'est mal compris.
 
Regarde donc tout mon code tu devrais mieux comprendre
 

Citation :


<?php
$titrepage = "Liste";
 include  ("head.php" );  
 ?>
 
    <script type="text/javascript" language="JavaScript">
<!--
function postoption(){
var choix=document.formulaire.critere.selectedIndex
switch (choix)
{case 0:location.href="liste.php?crit=nom";break;
case 1:location.href="liste.php?crit=prenom";break;
case 2:location.href="liste.php?crit=ville";break;
case 3:location.href="liste.php?crit=societe";break;
case 4:location.href="liste.php?crit=mail";break;
case 5:location.href="liste.php?crit=profession";break;
default:location.href="liste.php";break;
}
}
//-->
</script>
<?php
  echo '<form name="formulaire" method="get" action="'.$_SERVER['PHP_SELF'].'"> Lister par :';
echo '<select name="critere" onchange="submit()">';
 echo '
 
      <option value="nom" '.($_GET['critere']=="nom" ? 'selected':'').'>Nom</option>
 
      <option value="ville" '.($_GET['critere']=="ville" ? 'selected':'').'>Ville</option>
 
      <option value="societe" '.($_GET['critere']=="societe" ? 'selected':'').'>Societe</option>
 
      <option value="mail" '.($_GET['critere']=="mail" ? 'selected':'').'>Mail</option>
 
      <option value="profession" '.($_GET['critere']=="profession" ? 'selected':'').'>Profession</option>
 
      ';
      echo '</select></form>';
 
      ?>
<?php
//Critères
$crit1=$_GET['crit'];
 
if (!empty($_GET['crit'])) {
$crit = $_GET['crit'];
}
elseif (isset($_GET['crit'])) {
$crit = $_GET['crit'];
}
else {
$crit='nom';
}
 
echo '<p>Classé par <span class="classer"> '.$crit.'</span></p>';
 
echo '
<span class="liste">
<a href="liste.php?lettre=a&crit='.$crit.'">A</a> -  
<a href="liste.php?lettre=b&crit='.$crit.'">B</a> -  
<a href="liste.php?lettre=c&crit='.$crit.'">C</a> -  
<a href="liste.php?lettre=d&crit='.$crit.'">D</a> -  
<a href="liste.php?lettre=e&crit='.$crit.'">E</a> -  
<a href="liste.php?lettre=f&crit='.$crit.'">F</a> -  
<a href="liste.php?lettre=g&crit='.$crit.'">G</a> -  
<a href="liste.php?lettre=h&crit='.$crit.'">H</a>-  
<a href="liste.php?lettre=i&crit='.$crit.'">I</a> -  
<a href="liste.php?lettre=j&crit='.$crit.'">J</a> -  
<a href="liste.php?lettre=k&crit='.$crit.'">K</a> -  
<a href="liste.php?lettre=l&crit='.$crit.'">L</a> -  
<a href="liste.php?lettre=m&crit='.$crit.'">M</a> - <br />
<a href="liste.php?lettre=n&crit='.$crit.'">N</a> -  
<a href="liste.php?lettre=o&crit='.$crit.'">O</a> -  
<a href="liste.php?lettre=p&crit='.$crit.'">P</a> -  
<a href="liste.php?lettre=q&crit='.$crit.'">Q</a> -  
<a href="liste.php?lettre=r&crit='.$crit.'">R</a> -  
<a href="liste.php?lettre=s&crit='.$crit.'">S</a> -  
<a href="liste.php?lettre=t&crit='.$crit.'">T</a> -  
<a href="liste.php?lettre=u&crit='.$crit.'">U</a> -  
<a href="liste.php?lettre=v&crit='.$crit.'">V</a> -  
<a href="liste.php?lettre=w&crit='.$crit.'">W</a> -  
<a href="liste.php?lettre=x&crit='.$crit.'">X</a> -  
<a href="liste.php?lettre=y&crit='.$crit.'">Y</a> -  
<a href="liste.php?lettre=z&crit='.$crit.'">Z</a> </span><br /><br />  
';
 
//On récupère la variable définissant la lettre du listing
if (empty($_GET['lettre'])){
$lettre="a";
}
else {
$lettre= $_GET['lettre'];
}
 
//connexion Mysql
include ("bd.php" );
mysql_connect($host, $user,$pass) or die("erreur de connexion au serveur" );
mysql_select_db($bdd) or die("erreur de connexion a la base de donnees" );
$table = "clients";
 
//La requête
$req = mysql_query("SELECT *  FROM $table  WHERE ".$crit." LIKE '".$lettre."%'  Order by ".$crit." ASC" )or exit(mysql_error());
 
 
while ($donne = mysql_fetch_assoc($req)){
 
echo '<b>'.$donne[''.$crit.''].'</b> <br />';
}
 
mysql_close();
 
?>
 
      <div class="menu">
   <?php include ("menu.php" ); ?>
      </div>
   
   </div>
 
   </body>
</html>

Reply

Marsh Posté le 19-01-2007 à 12:15:40    

up

Reply

Marsh Posté le 19-01-2007 à 12:29:48    

Comme toujours avec la solution que t'as choisit, il suffit de rajouter une ligne du genre "----------------" ou un nom plus parlant en début de liste et le tour est joué.
Mais bon, dans tous les cas, si tu veux pas mettre à la porte 10% des visiteurs du site (si c'est un site sur internet) il faut avoir un bouton d'envoie dans le formulaire et ne le cacher qu'a l'aide de javascript (comme ça ceux qui n'ont pas javascript ont quand même un bouton de validation)
 
Au fait, une régle d'or quand on fait un site professionnel ( à moins que t'en ai rien à foutre de voir ton client venir raler dans 15 jours) c'est de toujours prévoir l'abscence du javascript surtout quand ca ne prend que quelques secondes à prévoir.


Message édité par omega2 le 19-01-2007 à 12:35:04
Reply

Marsh Posté le 19-01-2007 à 15:28:26    

C'est un site professionnel pour 1 client qui à javascript à qui ça ne dérange pas d'utiliser javascript et qui ne veux pas de bouton d'envoie.
 
Alors tout est bon et je te remercie :)

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed