Forums Développement Multimédia

Aller au contenu

- - - - -

onclick fait apparaitre bouton radio juste en dessous image

javascript php

1 réponse à ce sujet

#1 momo33

  • Guests

Posté 26 July 2016 - 14:12 PM

Bonjour,

Je suis actuellement en train de réaliser un tableau dans lequel il y aura plusieurs individus et donc plusieurs lignes. Il y aura possibilité pour chaque individu de choisir la catégorie de son travail en cliquant sur une mini image (reglages) qui affichera un choix de deux boutons radios en dessous. Je n'ai aucun souci avec cela pour l'instant et l'affichage marche.

Le problème est que j'ai fixé la position de ma première ligne avec du CSS (position:relative, top, left etc) et donc sur les autres lignes du tableau, les deux boutons apparaissent au meme endroit que pour la première ligne. J'aimerai savoir s'il est possible d'employer une méthode qui permettrait aux deux boutons d'apparaitre pour chaque ligne (chaque individu) juste en dessous de la mini-image cliquée.
Et ce sans avoir a rentrer les coordonnées de chaque dessous de case en CSS.

J'espère que vous m'avez compris, c'est un peu long comme explication mais il fallait que ce soit clair. Si vous avez des précisions à me demander n'hésitez pas.

Mon fichier php qui déclare le tableau et les boutons (avec la fonction javascript permettant d'afficher/cacher):


<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 id="1" type="radio" name="radio" value="etam"/>Etam

   <input id="2" type="radio" name="radio" value="ouvrier" />Ouvrier

   <div align="center"><input type="submit" value="valider" name="ok"/></div>
</form>
<?php include('incl.php'); ?>
</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>
</html>
 

La fonction qui récupère la valeur du choix sélectionné :


<?php
   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();
          }
   }
?>
 

Si quelqu'un peut me répondre :)

#2 dcz.switcher

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 2532 messages

Posté 26 August 2016 - 17:46 PM

Salut,

J'espère ne pas répondre à côté de la plaque ...

Vu que tu n'utilises pas jQuery, le code est peu plus lourd, mais tu peux pour chaque ligne, poser un écouteur de l'event click sur l'image settings.png

Lorsque l'image est cliquée, tu cherches le noeud parent (qui contient l'image et le bloc des radio)

A l'intérieur de ce noeud parent, tu cherches le bloc des radio et l'affiche ou le masque

ça devrait donner quelque chose comme ça (code non testé) :


<tr>
    <td>0</td>
    <td>OUI</td>
    <td>DUBEDAT</td>
    <td>Bastien</td>
    <td align="center">
    <img class="settings-button" src="settings.png" width="20" heigth="20">
    <div class="settings-radios" style="display:none;">
        <form method="post">
            <input id="1" type="radio" name="radio" value="etam"/>Etam
            <input id="2" type="radio" name="radio" value="ouvrier" />Ouvrier
            <div align="center"><input type="submit" value="valider" name="ok"/></div>
        </form>
        <?php include('incl.php'); ?>
    </div>
    </td>
</tr>
 

et le JS

<script>
    [].forEach.call(document.querySelectorAll('.settings-button'), function(el) {
        el.addEventListener('click', function(e) {
            var $settingsRadio = e.parentNode.querySelector('.settings-radios');
            $settingsRadio.style.display = ($settingsRadio.style.display === 'none') ? 'block' : 'none';
        })
    })
</script>
 

"Ce que l'on conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément"

embryon de site




Répondre à ce sujet



  

1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP