Page 1 sur 2
Afficher onclick juste en dessous bouton
Posté : 26 juil. 2016, 12:04
par momo33
Bonjour,
Je cherche un moyen d'afficher après un click, deux boutons radios. J'y arrive déja mais en plaçant bien ces boutons grâce à une manipulation CSS d'un div(id="radio"). Malheureusement j'ai plusieurs lignes à mon tableau, et j'aimerai plutôt que de rentrer manuellement la position de chaque bloc de boutons(radio) qu'ils apparaissent directement en dessous de l'image sur laquelle je viens de cliquer.
Voici le code :
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
</head>
<body>
<table>
<tr>
<td>Matri.</td>
<td>Actif</td>
<td>Nom</td>
<td>Prenom</td>
<td>Qualification</td>
</tr>
<tr>
<td>0</td>
<td>OUI</td>
<td>DUBEDAT</td>
<td>Bastien</td>
<td align="center"><img src="settings.png" width="20" heigth="20" a href="" onclick="javascript:visibilite('radio'); return false;" ></a>
<div id="radio" style="display:none;">
<form method="post">
<input type="radio" name="radio" value="etam" onchange="submit(this.form)"/><span>Etam</span><br />
<input type="radio" name="radio" value="ouvrier" onchange="submit(this.form)"/><span>Ouvrier</span></br>
</form>
<?php
if($_SERVER['REQUEST_METHOD'] == 'POST') {
$commande_valide = true; // Valeur de départ
if($commande_valide) {
if(isset($_POST['radio'])) {
try {
$db = new PDO('mysql:host=localhost;dbname=test', 'root', '');
$req = $db->prepare('UPDATE jeux_video SET nom = :nvnom where id = 1');
$req->execute(array(
'nvnom' => $_POST['radio'],
));
}
catch(Exception $e) {
echo 'Une erreur est survenue !';
die();
}
}
}
} else
echo "Aucune qualification !\n";
?>
</div></td>
</tr>
</table>
<script type="text/javascript">
function visibilite(thingId) {
var targetElement;
targetElement = document.getElementById(thingId) ;
if (targetElement.style.display == "none") {
targetElement.style.display = "" ;
} else {
targetElement.style.display = "none" ;
}
}
</script>
</body>
Re: Afficher onclick juste en dessous bouton
Posté : 26 juil. 2016, 12:15
par moogli
Modération :
Afin d'obtenir plus de réponses, le sujet a été déplacé dans un forum plus approprié.
Re: Afficher onclick juste en dessous bouton
Posté : 26 juil. 2016, 12:33
par moogli
salut,
change ton id pour qu'il soit dynamique, par exemple en utilisant l'id de la ligne. => radio1, radio2 ... radio42
Il faut mettre la même info dans l'id du div et dans la fonction js du bouton
@+
Re: Afficher onclick juste en dessous bouton
Posté : 26 juil. 2016, 13:39
par momo33
Merci pour la réponse, désolé si j'ai posté au mauvais endroit, je suis noob sur les forums je ferai plus attention à l'avenir, d'ailleurs j'ai tenté de m'inscrire cela a marché mais je ne vois pas ou me connecter
Re: Afficher onclick juste en dessous bouton
Posté : 26 juil. 2016, 14:17
par moogli
Pour la connexion
phpf_cnx.png
Re: Afficher onclick juste en dessous bouton
Posté : 01 août 2016, 11:24
par momo33
Bonjour Moogli,
J'ai tenté de multiples recherche à propos d'un id dynamique, et je suis un peu perdu, je ne vois pas comment le mettre en place. Faut il que je set une variable à 0 que j'incrémente à chaque nouvelle ligne du tableau (exemple : id="radio+i"), ou faut il passer par une aute méthode ? Car pour l'instant (sur mon site pas sur l'extrait de code donné ci dessus) j'ai l'impression que quand je fais apparaitre les deux boutons radios, quelque soit la position du bouton qui les fait apparaitre, ce sont toujours les mêmes c'est à dire ce de l'id radio.
J'espere que c'est assez clair comme explication sinon je peux préciser
Re: Afficher onclick juste en dessous bouton
Posté : 01 août 2016, 12:17
par moogli
<div id="radio-<?php echo $idDeLaLigneQueTuAffiche; ?>" style="display:none;">
ensuite tu affiche le formulaire dans radio-42 ou radio-666.
sachant que de toute façon ton code js c'est une fonction qui prend en paramètre l'id le corps de celle ci sera toujours le même.
Attention quand même a mettre dans le formulaire une information te permettant d'identifier la ligne sur laquelle tu travails (dans mon exemple tu prends tous ce qui est après le - pour avoir l'id
).
@+
Re: Afficher onclick juste en dessous bouton
Posté : 01 août 2016, 13:46
par momo33
Je vais employer cette méthode alors, juste pour précision, le code javascript me permettant de récupérer l'id de la ligne à chaque ligne ressemblera à ca tu penses ?
var ide = document.getElementsByTagName('table')[0].getElementsByTagName('tr')[1].cells[0].innerHTML;
je pourrai ainsi mettre une variable i entre les [] afin de récupérer à chaque tour un élément différent.
Merci pour ta réponse en tout cas
Re: Afficher onclick juste en dessous bouton
Posté : 01 août 2016, 14:00
par momo33
PS : j'ai essayé de set une variable i à 0 et de l'inclure à la suite du id ="radio<?php echo $i;?>" mais cela ne fonctionne pas je suis confronté à l'erreur :
Uncaught TypeError : cannont read property 'style' of null.
Comme si dès que j'essayer d'inclure la variable au nom de l'id, la fonction d'affichage ne marche plus.
Re: Afficher onclick juste en dessous bouton
Posté : 01 août 2016, 15:58
par moogli
je suppose que tu affiches des données issue d'une base de données ?
Elle doivent avoir une clef primaire ?
Cette clef primaire est par essence unique donc pas la peine de chercher autre chose ça fera l'affaire
ensuite tu "calcules" l'id html : $id = 'radio-'.$data['id']; (je suppose que la clef primaire s'appelle id et que les données sont dans $data, c'est totalement arbitraire).
il faut ensuite indiquer cette variables dans l'id html et dans le paramètre de la fonction JS
$id = 'radio-'.$data['id'];
echo 'onclick="javascript:visibilite(',$id,'); return false;' ></a>
// ...
echo <div id="radio-',$id,'">'; //....
ensuite avec le code JS précédent ça roule
si je n'ai pas compris ce que tu souhaite faire c'est le moment de le dire
~
@+
Re: Afficher onclick juste en dessous bouton
Posté : 01 août 2016, 16:43
par momo33
Oui effectivement, je travaille avec une base de données
Je travaille ce soir dessus, je te dirai demain matin ce qu'il en est du résultat.
Tu as tout à fait ciblé ma demande ne t'en fais pas.
Encore merci, je m'y met avec ces informations en priant que ca passe
!
Bonne fin de journée
Re: Afficher onclick juste en dessous bouton
Posté : 02 août 2016, 09:04
par momo33
Bonjour,
Je n'arrive pas à déterminer clairement ce qu'est data ! Dois-je faire une requête SQL qui récupère tous les id présents sur la base de données et les mettre dans cette variable pour ensuite les ressortir un à un en associant directement l'id récupéré à chacune de mes nouvelles balises div ?
Je travaille sur un fichier JS avec des html += (''), cette méthode marche t'elle quand même ?
Pardon pour ce flot de questions
Je suis le seul programmeur de l'entreprise je galère un peu
Re: Afficher onclick juste en dessous bouton
Posté : 02 août 2016, 09:42
par momo33
J'ai réussi à récupérer la liste de mes id dans la variable id, donc en fait pas besoin de radio+id, l'id seul suffit (1, 2, 3, 4, 5).
Maintenant je n'arrive pas à l'intégrer au code pour que ca marche, j'ai essayé la méthode des '\,id,\' conseillée mais ca ne marche pas ! Voici le code de la partie dont je parle
Code : Tout sélectionner
console.log(id);
html += ('<td align="center" class="hideHoraires"><img src="settings.png" width="20" heigth="20" a href="" onclick="javascript:visibilite(\',id,\'); return false;" >');
html += ('</a> <div id=",id," align="center" style="display:none;position:absolute;background-color:#b4aba1"><form method="post"><input id="1" type="radio" name="radio" value="etam"/>Etam<br />');
html += ('<input id="1" type="radio" name="radio" value="ouvrier" />Ouvrier<br /><div align="center">');
html += ('<input type="submit" value="valider" name="ok"/></div></form></div></td>');
Re: Afficher onclick juste en dessous bouton
Posté : 02 août 2016, 11:43
par tlalaguedulac
Il faudrait juste que je sache quelle syntaxe utiliser pour les 'id' à remplir !
Re: Afficher onclick juste en dessous bouton
Posté : 02 août 2016, 12:39
par moogli
la concaténation en javascript c'est le plus (+ "chaine 1 " + "chaine 2 "+ int )
J'ai bien l'impression que ton truc se complique pour pas grand chose.
La concaténation de radio + id c'est juste pour être certain de l'unicité de la chose dans la page, c'est pas exclus que tu veuilles un autre id="42" un jour et ce sera la merde
@+