Montrer, cacher un div avec clic sur un lien

Résolu/Fermé
philip51 Messages postés 49 Date d'inscription vendredi 6 janvier 2017 Statut Membre Dernière intervention 25 février 2020 - 13 févr. 2020 à 15:43
philip51 Messages postés 49 Date d'inscription vendredi 6 janvier 2017 Statut Membre Dernière intervention 25 février 2020 - 14 févr. 2020 à 15:09
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

jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
13 févr. 2020 à 15:46
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
philip51 Messages postés 49 Date d'inscription vendredi 6 janvier 2017 Statut Membre Dernière intervention 25 février 2020
13 févr. 2020 à 17:40
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
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
Modifié le 13 févr. 2020 à 17:53
function voirdiv(lid){
 document.getElementById.elements['iddunom'].value = lid;
 document.getElementById(lid).style.display = "inline";
}
0
philip51 Messages postés 49 Date d'inscription vendredi 6 janvier 2017 Statut Membre Dernière intervention 25 février 2020
14 févr. 2020 à 10:49
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
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649
14 févr. 2020 à 10:53
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
philip51 Messages postés 49 Date d'inscription vendredi 6 janvier 2017 Statut Membre Dernière intervention 25 février 2020 > jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024
Modifié le 14 févr. 2020 à 11:21
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
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 4 649 > philip51 Messages postés 49 Date d'inscription vendredi 6 janvier 2017 Statut Membre Dernière intervention 25 février 2020
14 févr. 2020 à 11:16
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
philip51 Messages postés 49 Date d'inscription vendredi 6 janvier 2017 Statut Membre Dernière intervention 25 février 2020
Modifié le 14 févr. 2020 à 11:50
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

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

Posez votre question
philip51 Messages postés 49 Date d'inscription vendredi 6 janvier 2017 Statut Membre Dernière intervention 25 février 2020
14 févr. 2020 à 12:14
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
philip51 Messages postés 49 Date d'inscription vendredi 6 janvier 2017 Statut Membre Dernière intervention 25 février 2020
14 févr. 2020 à 15:09
Ouf ! ça y est !!
Merci pour l'aide et la patience !!
0