Champ dependant d'une liste deroulante

msi79 Messages postés 509 Date d'inscription lundi 24 août 2009 Statut Membre Dernière intervention 2 mai 2023 - 21 août 2013 à 00:02
 msi79 - 13 sept. 2013 à 18:57
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

BBFUNK01 Messages postés 1310 Date d'inscription jeudi 16 juillet 2009 Statut Membre Dernière intervention 20 juin 2014 6
21 août 2013 à 08:25
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+
0
msi79 Messages postés 509 Date d'inscription lundi 24 août 2009 Statut Membre Dernière intervention 2 mai 2023 1
21 août 2013 à 09:46
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>
0
BBFUNK01 Messages postés 1310 Date d'inscription jeudi 16 juillet 2009 Statut Membre Dernière intervention 20 juin 2014 6
21 août 2013 à 09:51
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');

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

A+
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
msi79 Messages postés 509 Date d'inscription lundi 24 août 2009 Statut Membre Dernière intervention 2 mai 2023 1
21 août 2013 à 13:23
j'arrive toujours pas . voici la structure de ma table :
-- phpMyAdmin SQL Dump
-- version 4.0.4
-- http://www.phpmyadmin.net
0
msi79 Messages postés 509 Date d'inscription lundi 24 août 2009 Statut Membre Dernière intervention 2 mai 2023 1
21 août 2013 à 18:10
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>
0
BBFUNK01 Messages postés 1310 Date d'inscription jeudi 16 juillet 2009 Statut Membre Dernière intervention 20 juin 2014 6
22 août 2013 à 12:49
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+
0
msi79 Messages postés 509 Date d'inscription lundi 24 août 2009 Statut Membre Dernière intervention 2 mai 2023 1
Modifié par msi79 le 7/09/2013 à 23:11
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>
0
personne pour m 'aider ???
0
Rejoignez-nous