Champ dependant d'une liste deroulante

msi79 394 Messages postés lundi 24 août 2009Date d'inscription 26 décembre 2017 Dernière intervention - 21 août 2013 à 00:02 - Dernière réponse :  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>
Afficher la suite 

10 réponses

Répondre au sujet
BBFUNK01 1313 Messages postés jeudi 16 juillet 2009Date d'inscription 20 juin 2014 Dernière intervention - 21 août 2013 à 08:25
0
Utile
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+
Commenter la réponse de BBFUNK01
msi79 394 Messages postés lundi 24 août 2009Date d'inscription 26 décembre 2017 Dernière intervention - 21 août 2013 à 09:46
0
Utile
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>
Commenter la réponse de msi79
BBFUNK01 1313 Messages postés jeudi 16 juillet 2009Date d'inscription 20 juin 2014 Dernière intervention - 21 août 2013 à 09:51
0
Utile
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');

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

A+
Commenter la réponse de BBFUNK01
msi79 394 Messages postés lundi 24 août 2009Date d'inscription 26 décembre 2017 Dernière intervention - 21 août 2013 à 13:23
0
Utile
j'arrive toujours pas . voici la structure de ma table :
-- phpMyAdmin SQL Dump
-- version 4.0.4
-- http://www.phpmyadmin.net
Commenter la réponse de msi79
msi79 394 Messages postés lundi 24 août 2009Date d'inscription 26 décembre 2017 Dernière intervention - 21 août 2013 à 18:10
0
Utile
1
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>
Commenter la réponse de msi79
BBFUNK01 1313 Messages postés jeudi 16 juillet 2009Date d'inscription 20 juin 2014 Dernière intervention - 22 août 2013 à 12:49
0
Utile
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+
Commenter la réponse de BBFUNK01
msi79 394 Messages postés lundi 24 août 2009Date d'inscription 26 décembre 2017 Dernière intervention - Modifié par msi79 le 7/09/2013 à 23:11
0
Utile
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>
Commenter la réponse de msi79
0
Utile
personne pour m 'aider ???
Commenter la réponse de msi79

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.