Montrer, cacher un div avec clic sur un lien [Résolu]

Signaler
Messages postés
49
Date d'inscription
vendredi 6 janvier 2017
Statut
Membre
Dernière intervention
25 février 2020
-
Messages postés
49
Date d'inscription
vendredi 6 janvier 2017
Statut
Membre
Dernière intervention
25 février 2020
-
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

Messages postés
28957
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
15 juillet 2020
2 617
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

Messages postés
49
Date d'inscription
vendredi 6 janvier 2017
Statut
Membre
Dernière intervention
25 février 2020

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 !!
Messages postés
28957
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
15 juillet 2020
2 617
function voirdiv(lid){
 document.getElementById.elements['iddunom'].value = lid;
 document.getElementById(lid).style.display = "inline";
}
Messages postés
49
Date d'inscription
vendredi 6 janvier 2017
Statut
Membre
Dernière intervention
25 février 2020

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
Messages postés
28957
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
15 juillet 2020
2 617
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;
}
Messages postés
49
Date d'inscription
vendredi 6 janvier 2017
Statut
Membre
Dernière intervention
25 février 2020
>
Messages postés
28957
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
15 juillet 2020

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;
}
Messages postés
28957
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
15 juillet 2020
2 617 >
Messages postés
49
Date d'inscription
vendredi 6 janvier 2017
Statut
Membre
Dernière intervention
25 février 2020

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...
Messages postés
49
Date d'inscription
vendredi 6 janvier 2017
Statut
Membre
Dernière intervention
25 février 2020

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
Messages postés
49
Date d'inscription
vendredi 6 janvier 2017
Statut
Membre
Dernière intervention
25 février 2020

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
Messages postés
49
Date d'inscription
vendredi 6 janvier 2017
Statut
Membre
Dernière intervention
25 février 2020

Ouf ! ça y est !!
Merci pour l'aide et la patience !!