Champ dependant d'une liste deroulante

Signaler
Messages postés
498
Date d'inscription
lundi 24 août 2009
Statut
Membre
Dernière intervention
1 mars 2020
-
 msi79 -
bonsoir a tous .
voici ce que je veux .
j'ai une table destinateurs avec pour champ nom_dest et dest_Mail.
1. je récupère tous les noms dans une liste déroulante
2. a chaque fois que je choisi un nom de la liste déroulante automatiquement l'autre champ (champ texte) se rempli avec le mail de ce destinateurs.

j'ai essayé de m'inspirer de ce code mais je suis bloqué.
si quelqu'un pouvait bien m'aider.

voici le code :
<?php
include("connect.php");
?>
<!doctype html>
<html lang="fr">
        <head>
                <meta charset="UTF-8"/>
                <title>Formulaire dynamique</title>
        </head>
        <body>
          <form method="post" action="reception.php">
          
            <p>
              <select name="annee" id="annee" pattern="(premiere) | (deuxieme)" onchange='anneeChange();'>
                <option value="choisissez" selected disabled>-- choisissez --</option>              
                <option value="premiere">AUTRE</option>
               
                <?php
				$req="SELECT id_dest,nom_dest,email  FROM destinateurs ORDER BY nom_dest DESC";
				$res=mysql_query($req) or die("erreur dans la requête $req");
				while ($tab=mysql_fetch_assoc($res)){
				
			    echo "<option value='deuxième'>".$tab[nom_dest]."</option>";
                 }
				?>
              </select>
            </p>
            <div id="paragrapheSupplementaire">

             </div>
            <p>
              <input type="submit" value="-- OK --"/>
             </p>
          </form>
<script>
  function anneeChange(){
     var paragraphe = document.getElementById("paragrapheSupplementaire");
     paragraphe.innerHTML=document.getElementById("annee").value+" année.";
     if (document.getElementById("annee").value == "deuxième"){
        paragraphe.innerHTML+="<label>Orientation prévue pour l'année prochaine :</label>"
        +'<select name="orientation" id="orientation">'
        +'<option value="LP">LP</option>'
        +'<option value="master">master</option>'
        +"<option value=\"inge\">Ecole d'ingé</option>"
        +'<option value="boulot">Boulot</option>'
        +'<option value="autre">Autre</option>'
        +'</select>';
    
     }
  }
  anneeChange();
</script>
        </body>
</html>

9 réponses

Messages postés
1313
Date d'inscription
jeudi 16 juillet 2009
Statut
Membre
Dernière intervention
20 juin 2014
6
Hello,

Tu peux procéder ainsi sans trop te prendre la tête :

- Tout d'abors tu récupères les résultats de ta requête et tu les stockes dans un tableau (en amont de ton code HTML) :

$req = $pdo->prepare("SELECT * FROM destinateurs ORDER BY nom_dest DESC");
$req->execute();
$destinataires = array();
while($d = $req->fetch()){
$id = $d['id_dest'];
$destinataire = $d['nom_dest'];
$email = $d['email'];
$tab = array("id" => $id,"destinataire" => $destinataire,"email" => $email);
array_push($destinataires,$tab);
}


- Ensuite tu affiches les résultats dans ton code HTML :

<select name="annee" id="annee">
<option value="Choisissez">Choisissez</option>
<?php
for($i = 0; $i < count($destinataires); $i++){
echo '
<option name="'.$destinataires[$i]["email"].'" value="'.$destinataires[$i]["destinataire"].'">'.$destinataires[$i]["destinataire"].'</option>
';
}
?>
</select>


- Puis tu crées une fonction qui analyse l'option choisie sur le select, et ce avec Jquery par exemple, en nommant ton paragraphe "emails" :

<script type="text/javascript">
        $(document).ready(function(){
           $('#annee').change(function(){
              
              var Email = $("option:selected",this).attr('name');
              var Emails = $('#emails').html();
              if(Emails == ""){
                  $('#emails').html(Email);
              }else{
                  $('#emails').html(Emails+"<br>"+Email);
              }       
           });
        });
</script>


Et normalement ça devrait le faire ;-).

A+
Messages postés
498
Date d'inscription
lundi 24 août 2009
Statut
Membre
Dernière intervention
1 mars 2020

bonjour merci de bien vouloir m'aider. j'ai essayé ce que vous m'avez conseillé mais ça marche pas . voici ce qui s'affiche comme erreur.
Notice: Undefined variable: pdo in C:\wamp\www\TUTO LISTE LIEE 2\index.php on line 3

Fatal error: Call to a member function prepare() on a non-object in C:\wamp\www\TUTO LISTE LIEE 2\index.php on line 3

et voici comment j'ai procedé :
<?php
include("connect.php");
$req = $pdo->prepare("SELECT * FROM destinateurs ORDER BY nom_dest DESC");
$req->execute();
$destinataires = array();
while($d = $req->fetch()){
$id = $d['id_dest'];
$destinataire = $d['nom_dest'];
$email = $d['email'];
$tab = array("id" => $id,"destinataire" => $destinataire,"email" => $email);
array_push($destinataires,$tab);
}
?>
<!doctype html>
<html lang="fr">
        <head>
                <meta charset="UTF-8"/>
                <title>Formulaire dynamique</title>
        </head>
        <body>
          <form method="post" action="reception.php">
          
            <p>
                <select name="annee" id="annee">
                <option value="Choisissez">Choisissez</option>
                <?php
                for($i = 0; $i < count($destinataires); $i++){
                echo '
                <option name="'.$destinataires[$i]["email"].'" value="'.$destinataires[$i]["destinataire"].'">'.$destinataires[$i]["destinataire"].'</option>
                ';
                }
                ?>
                </select>
            </p>
            <div id="paragrapheSupplementaire">

             </div>
            <p>
              <input type="submit" value="-- OK --"/>
             </p>
          </form>
<script type="text/javascript">
        $(document).ready(function(){
           $('#annee').change(function(){
              
              var Email = $("option:selected",this).attr('name');
              var Emails = $('#emails').html();
              if(Emails == ""){
                  $('#emails').html(Email);
              }else{
                  $('#emails').html(Emails+"<br>"+Email);
              }       
           });
        });
</script>
        </body>
</html>
Messages postés
1313
Date d'inscription
jeudi 16 juillet 2009
Statut
Membre
Dernière intervention
20 juin 2014
6
Hello,

C'est parce qu'il faut que tu te connectes à ta base de données avec PDO, gères la connexion à ta base de données dans ton fichier "connect.php" comme ceci :

class PDO2 extends PDO {

	private static $_instance;

	public function __construct( ) {
	
	}

	public static function getInstance() {
	
		if (!isset(self::$_instance)) {
			
			try {
			
				self::$_instance = new PDO(SQL_DSN, SQL_USERNAME, SQL_PASSWORD, array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES utf8"));
			
			} catch (PDOException $e) {
			
				echo $e;
			}
		} 
		return self::$_instance; 
	}
}
// remplace ici les variables par tes identifiants de connexion à ta base
// si tu travailles en local comme cela semble être le cas,
// tu mets "root" en utilisateur et "root" en mot de passe si tu es sur mac ou "" (soit rien) si tu es sur PC
define('SQL_DSN', 'mysql:dbname=nom-de-ta-base;host=localhost');
define('SQL_USERNAME', 'utilisateur-de-ta-base');
define('SQL_PASSWORD', 'mot-de-passe-utilisateur');

Messages postés
1313
Date d'inscription
jeudi 16 juillet 2009
Statut
Membre
Dernière intervention
20 juin 2014
6
Penses également à inclure le script .js de Jquery pour que la fonction d'analyse du select fonctionne :
http://jquery.com/download/

A+
Messages postés
498
Date d'inscription
lundi 24 août 2009
Statut
Membre
Dernière intervention
1 mars 2020

j'arrive toujours pas . voici la structure de ma table :
-- phpMyAdmin SQL Dump
-- version 4.0.4
-- http://www.phpmyadmin.net
Messages postés
498
Date d'inscription
lundi 24 août 2009
Statut
Membre
Dernière intervention
1 mars 2020

personne pour m'aider ? jee bloque depuis . voici ou j'en suis :
<?php
include("connect.php");
?>
<!doctype html>
<html lang="fr">
   <head>
      <meta charset="UTF-8"/>
      <title>Formulaire dynamique</title>
      <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
      <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
      <script type="text/javascript" src="jquery.js"></script>
   </head>
   <body>
      <form method="post" action="reception.php">
         <p>
           <select name="annee" id="annee" onchange='anneeChange();'>
            <option value="choisissez" selected disabled>-- choisissez --</option>             
            <option value="premiere">AUTRE</option>
             <?php
               $req="SELECT id_dest,nom_dest,dest_Mail  FROM destinateurs ORDER BY nom_dest DESC";
               $res=mysql_query($req) or die("erreur dans la requête $req");
               $dataarray = array();
               while ($tab=mysql_fetch_assoc($res)){
                  $dataarray[$tab['nom_dest']]=$tab['dest_Mail'];
               echo "<option value='".$tab['nom_dest']."'>".$tab['nom_dest']."</option>";
               }
            ?>
         </select>
         </p>
         <div id="paragrapheSupplementaire">
            <input type="text" name="fieldsemail" id="fieldsemail" value="" />
         </div>
         <p>
           <input type="submit" value="-- OK --"/>
         </p>
      </form>
<script>
   var dataarray = <?php echo json_encode($dataarray);?>
  function anneeChange(){
     document.getElementById("fieldsemail").value=dataarray[document.getElementById("annee").value];
  }
</script>

<a href="test1.php">TEST</a>
<a href="test2.php">TEST2</a>
   </body>
</html>
Messages postés
1313
Date d'inscription
jeudi 16 juillet 2009
Statut
Membre
Dernière intervention
20 juin 2014
6
Hello,

As-tu essayé la méthode que je t'ai indiquée ?

Au passage : tu charges 2 scripts de Jquery entre tes balises <head></head>, n'en charge qu'un seul ;-).

A+
Messages postés
498
Date d'inscription
lundi 24 août 2009
Statut
Membre
Dernière intervention
1 mars 2020

bonsoir a tous . merci @BBFUNK01 . j étais malade c'est pourquoi je répondais plus. mon problème n'est toujours pas résolue.
j'ai effacé l'un des scripts de jquery.
voici l'erreur qui s'affiche :
Fatal error: Call to a member function prepare() on a non-object in C:\wamp\www\TUTO LISTE LIEE 2\test1.php on line 3

voici ma page connect.php
<?php
class PDO2 extends PDO {

 private static $_instance;

 public function __construct( ) {
 
 }

 public static function getInstance() {
 
  if (!isset(self::$_instance)) {
   
   try {
   
    self::$_instance = new PDO(SQL_DSN, SQL_USERNAME, SQL_PASSWORD, array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES utf8"));
   
   } catch (PDOException $e) {
   
    echo $e;
   }
  } 
  return self::$_instance; 
 }
}
// remplace ici les variables par tes identifiants de connexion à ta base
// si tu travailles en local comme cela semble être le cas,
// tu mets "root" en utilisateur et "root" en mot de passe si tu es sur mac ou "" (soit rien) si tu es sur PC
define('SQL_DSN', 'mysql:dbname=bddgescour;host=localhost');
define('SQL_USERNAME', 'root');
define('SQL_PASSWORD', '');
?>


et ma page test.php
<?php
include("connect2.php");
$req = $pdo->prepare("SELECT * FROM destinateurs ORDER BY nom_dest DESC");
$req->execute();
$destinataires = array();
while($d = $req->fetch()){
$id = $d['id_dest'];
$destinataire = $d['nom_dest'];
$email = $d['dest_Mail'];
$tab = array("id" => $id,"destinataire" => $destinataire,"email" => $email);
array_push($destinataires,$tab);
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript">
        $(document).ready(function(){
           $('#annee').change(function(){
              
              var Email = $("option:selected",this).attr('name');
              var Emails = $('#emails').html();
              if(Emails == ""){
                  $('#emails').html(Email);
              }else{
                  $('#emails').html(Emails+"<br>"+Email);
              }       
           });
        });
</script>
</head>

<body>
      <form method="post" action="reception.php">
         <p>
            <select name="annee" id="annee">
            <option value="Choisissez">Choisissez</option>
            <?php
            for($i = 0; $i < count($destinataires); $i++){
            echo '
            <option name="'.$destinataires[$i]["email"].'" value="'.$destinataires[$i]["destinataire"].'">'.$destinataires[$i]["destinataire"].'</option>
            ';
            }
            ?>
            </select>
         </p>
         <div id="paragrapheSupplementaire">
            <input type="text" name="fieldsemail" id="fieldsemail" value="" />
         </div>
         <p>
           <input type="submit" value="-- OK --"/>
         </p>
      </form>
</body>
</html>
personne pour m 'aider ???