Montrer, cacher un div avec clic sur un lien

Résolu
philip51 Messages postés 50 Statut Membre -  
philip51 Messages postés 50 Statut Membre -
bonjour,
Je tourne en rond sur un truc qui me semble simple.
Sur ma page j'ai 2 div une div id="divconsulter" et une div id="divchange"
Dans la div id="divconsulter" j'ai un lien avec un clic qui doit qui doit cacher cette div et afficher la div id="divchange"
<div id="divconsulter">
	<p>
	<FORM name="research" ACTION = "index.php?page=comodmember" METHOD="POST">
affichage d'un tableau 
<ital>la ligne qui me pose problème</ital>
<td class="trtdChangePass"><span class="marginText"><a href="index.php?page=comodmember&id=<?php echo $M['id'];?>" onclick="cacher('divconsulter'),montrer('divchange')";><?php echo $M['nom'];?>  </a></span></td>
	</FORM>
	<br />
</div>
<?php
	echo '<div id="divchange">';
	echo $id;
echo '</div>';
?>

le fichier javascript
function montrer(id){
	document.getElementById(id).style.display = "inline";
}
function cacher(id){
	document.getElementById(id).style.display = "none";
}

Les fonctions javascript fonctionnent sur d'autres scripts.
Mon lien récupère bien l'id du nom cliqué.
Merci d'avance

5 réponses

  1. jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention   4 831
     
    Bonjour,

    Tu poses ta question dans le forum PHP ... mais ça semble d'avantage concerner le Javascript....
    Je déplace donc dans le bon forum.

    Ensuite... tu as mis onclick sur un lien.... sauf qu'un lien redirige sur une autre page... et donc le onclick ne s'applique pas.
    Il faut,
    -Soit retirer le href de ton lien
    -Soit ajouter du preventDefault() dans tes fonctions JS

    0
  2. philip51 Messages postés 50 Statut Membre
     
    Merci pour la réponse.
    J'ai donc supprimer le lien
    le code HTML
    <div id="divconsulter">
    	<p>
    	<FORM name="research" ACTION = "index.php?page=comodmember" METHOD="POST">
    <td class="trtdChangePass"><span class="marginText" <?php $var= $M['id'];?> onclick="cacher('divconsulter'),voirdiv('divchange')";><?php echo $M['nom'];?></span></td>
    </div>
    	
    <div id="divchange">
    	<input type="text" name="iddunom" value = "toto" >et du texte
    </div>
    

    function montrer(id){
    /*alert(id);*/
    	document.getElementById(id).style.display = "inline";
    }
    function cacher(id){
    	document.getElementById(id).style.display = "none";
    }
    function voirdiv(id){
    var lid = '<?php echo $id;?>';
    	document.getElementById.elements['iddunom'].value = lid;
    	document.getElementById(id).style.display = "inline";
    }
    

    "divconsulter" est bien cachée
    mais "divchange" ne s'affiche pas !!
    Si je remplace la function voirdiv() par la function montrer() ça fonctionne. Mais je ne veux pas me servir de cette fonction car elle me sert ailleurs tel qu'elle est.
    Du coup je ne vois pas si la variable est bien passée !!
    0
    1. jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention   4 831
       
      function voirdiv(lid){
       document.getElementById.elements['iddunom'].value = lid;
       document.getElementById(lid).style.display = "inline";
      }
      
      0
  3. philip51 Messages postés 50 Statut Membre
     
    bonjour,
    j'ai essayé mais ça ne marche pas. donc j'ai tout repris
    function voirdiv(lid){
     document.getElementById.elements['iddunom'].value = lid;
     document.getElementById(lid).style.display = "inline";
    }
    

    la page avec le code html
    <?php
    if (empty($id)){
    ?>
        <div id="divconsulter">
    	<p>
    	<FORM name="research" ACTION = "index.php?page=comodmember" METHOD="POST">
    <td class="trtdChangePass"><span class="marginText" onclick="javascript:cacher('divconsulter'),montrer('divchange'),passerval('<?php $M["id"];?>');"><?php echo $M['nom'];?></span></td>
    
    }
    	?>
    
    	<br />
    	</FORM>
    	<br />
    </div>
    <div id="divchange">
    	<input type="text" name="iddunom" value = "" >
    	<input type="button" name="bouton" value="Retour" onclick="javascript:cacher('divchange'),montrer('divconsulter');" >
    </div>
    
    

    les 2 premières fonctions sont ok. la 3è ne récupère pas la valeur de l'id
    function montrer(id){
    /*alert(id);*/
    	document.getElementById(id).style.display = "inline";
    }
    function cacher(id){
    	document.getElementById(id).style.display = "none";
    }
    function passerval(lid){
    alert(lid);
    var lid = '<?php echo $id;?>';
    	document.getElementById.elements['iddunom'].value = lid;
    }
    

    Merci
    0
    1. jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention   4 831
       
      Que vient faire ce bout de code php au milieu de ton js ???
      var lid = '<?php echo $id;?>';
      

      lid est envoyé en paramètre de ta fonction !
      function passerval(lid){
          alert(lid); // doit t'afficher la valeur de ton $M['id'] .. ce n'est pas le cas ???
           // var lid = '<?php echo $id;?>'; // NE SERT A RIEN !!!
          document.getElementById.elements['iddunom'].value = lid;
      }
      
      0
      1. philip51 Messages postés 50 Statut Membre > jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention  
         
        j'ai modifié la fonction
        alert(lid) est bien affiché mais pas de valeur affichée!!

        Pourquoi on ne pas récupérer directement la valeur de l'id dans l'input type="text" ?
        je remets tout le code de la page php
        <?php
        require_once "connect.php";
        
        $sessionChoix = !empty($_SESSION['choix']) ? $_SESSION['choix'] : NULL; //prendre la valeur de session si remplie
        $choix = !empty($_POST['choix']) ? $_POST['choix'] : $sessionChoix; // prendra la valeur de post si elle est remplie, sinon celle de session
        $_SESSION['choix'] = $choix;
        
        $lapage = !empty($_GET['lapage']) ? $_GET['lapage'] : 1; // prend la valeur de la page
        $_SESSION['lapage'] = $lapage;
        
        $id = !empty($_GET['id']) ? $_GET['id'] : ""; // prend l'id de la valeur cliquée sur le tableau : 
        
        $nom = !empty($_GET['nom']) ? $_GET['nom'] : "";;
        $prenom = !empty($_GET['prenom']) ? $_GET['prenom'] : "";
        
        $TotalMembres = '';
        $membresParPage = 15;
        $pageActuelle = 1;
        $nombreDePages = '';
        $premiereEntree = 0;
        $message = '';
        $nationalite = '';
        $strWhere = '';
        
        // choix de l'affichage
        switch($choix){ //teste quel choix est sélectionné
          case "A":
           	$strWhere = "WHERE nationalite = 'Allemande'";
        	$nationalite = "'Allemande'";
          	break;
          case "F":
            	$strWhere = "WHERE nationalite = 'Française'";
        	$nationalite = "'Française'";
          	break;
        //  default:
          case "T":
        	$nationalite = "'Allemande' OR nationalite = 'Française'";
            	break;
        }
        //---------------------------
        //comptage des membres selon le choix effectué
        $sql = "SELECT COUNT(*) AS nb FROM membres " . $strWhere; //compte le nombre de personnes en fonction du choix effectué
         try{
            	$req = $cnx->query($sql);
            	$data = $req->fetch(); 
            	$TotalMembres = $data['nb']; // récupère le nombre d'enregistrements
        	$nombreDePages = ceil($TotalMembres/$membresParPage); // compte le nombre de pages
         }catch(Exception $e){
           	echo "Erreur : " . $e->getMessage();
         }
        //---------------------------
        //calcul du nombre de pages et définition de la page actuelle
        if (isset($_POST['envoyer']) && $choix){ //teste si le bouton envoyer et le choix de la nationalité sont cliqués
        	if (isset($_GET['lapage'])) { // teste si le numéro de la page est cliqué
        		$pageActuelle = intval($_GET['lapage']); // affecte le numéro de la page à la page actuelle
        		if ($pageActuelle > $nombreDePages) {	// teste si la page actuelle est supérieure aux nombre de pages
        			$pageActuelle = $nombreDePages; // si oui la page actuelle est égale aux nombre de pages
        		}
        	}
        	else {
        		$pageActuelle = 1; // si le numéro de page n'est pas sélectionné,la page actuelle est la n°1
        	}
        	$premiereEntree = ($pageActuelle - 1) * $membresParPage; // on calcule la première entrée à lire
        }
        else if (isset($_GET['lapage'])) { // teste si la un numéro de page est sélectionné
        	$pageActuelle = intval($_GET['lapage']);
        	if ($pageActuelle > $nombreDePages) {
        		$pageActuelle = $nombreDePages;
        	}
        	$premiereEntree = ($pageActuelle - 1) * $membresParPage; // on calcule la première entrée à lire
        }
        //----------------------------
        //sélection des membres selon le choix effectué et en fonction de la page actuelle (LIMIT) 
        		if (!empty($_SESSION['choix'])){
        			error_reporting(E_ALL);
        			ini_set('display_errors', TRUE);
        			ini_set('display_startup_errors', TRUE);
        			//préparation de la requête et des variables
        			$sql = "SELECT * FROM membres WHERE nationalite = ".$nationalite." ORDER BY nom, prenom LIMIT ".$premiereEntree.", $membresParPage"; 
        			try {
        				$requete = $cnx->prepare($sql);
        				$requete->execute();
        				$arr_membres = $requete->fetchAll();// on stocke le resultat de la requete dans un array
        			}
        			catch(Exception $e){
          				// en cas d'erreur dans la requete:
           				echo " Erreur ! ".$e->getMessage();
        			}
        
        		}
        ?>
        
        <link rel="stylesheet" type="text/css" href="css/style_connexion.css" /> <!---liaison avec la feuille se style --->
        <?php
        if (empty($id)){
        ?>
            <div id="divconsulter">
        	<p>
        	<FORM name="research" ACTION = "index.php?page=comodmember" METHOD="POST">
        		<br />
        		<p class="pal">  <b> Sélectionner la liste des membres à afficher :</b><br />
        		<input type="radio" name="choix" Value="T" <?php if($_SESSION["choix"] == "T"){ echo 'checked = "checked"';} ?> class="inputr">Tous * 
        		<input type="radio" name="choix" Value="A" <?php if($_SESSION["choix"] == "A"){ echo 'checked = "checked"';} ?> class="inputr">Allemand.e.s
        		<input type="radio" name="choix" Value="F" <?php if($_SESSION["choix"] == "F"){ echo 'checked = "checked"';} ?> class="inputr">Français.e.s
        		<input type="submit" name="envoyer" Value="Afficher" style="cursor:pointer;margin-left:2em;"">
        		<br/>
        		<span class="text1">  * Affichage par défaut</span></p>
        		<!---<b>Pour modifier les données d'un membre, cliquez sur son nom</b><br />--->
        		<?php 
        		if(!empty($arr_membres)){ // on s'assure que la variable n'est pas vide puis on écrit la table avec son contenu
        			echo "<b>Pour modifier les données d'un membre, cliquez sur son nom</b><br />";
        			echo 'Nombre total de membres : '. $TotalMembres .'<br />';
        			echo '<table class="tableChangePass">';
        			echo '<tr class="trChangePass">	
        				<td style="width:13em;">NOM</td>
        				<td style="width:9em;border:1px solid;">PRENOM</td>
        				<td style="width:9em;border:1px solid;">TELEPHONE</td>
        				<td style="width:20em;border:1px solid;">ADRESSE INTERNET</td>
        				<td style="width:6em;border:1px solid;">Entrée</td>
        			      </TR>';
        			foreach($arr_membres as $M){ // on boucle dessus à l'aide d'un foreach
        				echo '<tr>';?>
        
        				<td class="trtdChangePass"><span class="marginText" onclick="javascript:cacher('divconsulter'),montrer('divchange'),passerval('<?php $M["id"];?>');"><?php echo $M['nom'];?></span></td>
        								
        				<td class="trtdChangePass"><span class="marginText"><?php echo $M['prenom'];?></span></td>
        				<td class="trtdChangePass"><span class="marginText"><?php echo $M['telephone'];?></span></td>
        				<td class="trtdChangePass"><span class="marginText"><a href="mailto:<?php echo $M['mail'];?>"><?php echo $M['mail'];?></a></span></td>
        				<td class="trtdChangePass"><span class="marginText"><?php echo $M['entree'];?></span></td></tr> 
        				<?php
        			}
        			echo '</table>';
        		}
        		echo '</p>';
        		if (!empty($message)){
        			echo $message; echo '<br />';
        		}
        		if (empty($message)){
        			if (!empty($choix)){
        			for ($i = 1; $i <= $nombreDePages; $i++) {
        				if ($i == $pageActuelle) {
        					echo ' [ '.$i.' ] ';
        				}
        				else {
        					echo '<a href= "index.php?page=comodmember&lapage='.$i.'">'.' '.$i.'</a>';
        				}
        			}
        			}
        		}
        }
        
        	?>
        
        	<br />
        	</FORM>
        	<br />
        </div>
        
        <div id="divchange">
        	<input type="text" name="iddunom" value = "" >
        	<input type="button" name="bouton" value="Retour" onclick="javascript:cacher('divchange'),montrer('divconsulter');" >
        </div>
        


        et les 3 fonctions
        function montrer(id){
        /*alert(id);*/
        	document.getElementById(id).style.display = "inline";
        }
        function cacher(id){
        	document.getElementById(id).style.display = "none";
        }
        
        function passerval(lid){
        alert(lid);
        
        	document.getElementById.elements['iddunom'].value = lid;
        }
        
        0
      2. jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention   4 831 > philip51 Messages postés 50 Statut Membre
         
        Et ça... tu le sors d'où ?
        document.getElementById.elements['iddunom']
        

        Déjà, mets un ID à ton champ input
        <input type="text" name="iddunom" id="iddunom" value = "toto" >et du texte
        

        Ensuite,
        document.getElementById('iddunom').value = lid;
        


        NB: A savoir que dans la console de ton navigateur, tu dois voir les erreurs de code.....
        Tu aurais donc du t'apercevoir que ton code avait un souci...
        0
  4. philip51 Messages postés 50 Statut Membre
     
    faute d'inattention !!
    document.getElementById.elements['iddunom']
    

    voilà ce qu'indique la console que je comprends pas du tout

    "scripts.js:17 Uncaught TypeError: document.getElementById.elements is not
    a function

    at passerval (scripts.js:17)

    at HTMLSpanElement.onclick (index.php?page=comodmember:166)

    passerval @ scripts.js:17

    onclick @ index.php?page=comodmember:166
    0
  5. Vous n’avez pas trouvé la réponse que vous recherchez ?

    Posez votre question
  6. philip51 Messages postés 50 Statut Membre
     
    en cherchant sur la console voilà ce que j'ai trouvé
    le problème est sur toujours sur cette ligne
    <td class="trtdChangePass"><span class="marginText" onclick="javascript:cacher('divconsulter'),montrer('divchange'),passerval('<?php $M["id"];?>');"><?php echo $M['nom'];?></span></td>
    


    ce qui figure sur la console
    <td class="trtdChangePass"><span class="marginText" onclick="javascript:cacher('divconsulter'),montrer('divchange'),passerval();"><?php echo $M['nom'];?></span></td>
    


    donc <?php $M['id'];?> est vide
    j'ai modifié cette ligne
    <td class="trtdChangePass"><span class="marginText" onclick="javascript:cacher('divconsulter'),montrer('divchange'),passerval('<?php echo $M["id"];?>');"><?php echo $M['nom'];?></span></td>
    

    je récupère bien la valeur dans alert(lid) de la fonction mais elle ne passe dans l'élément. je cherche
    0
    1. philip51 Messages postés 50 Statut Membre
       
      Ouf ! ça y est !!
      Merci pour l'aide et la patience !!
      0