View original (French)

Display div based on checked checkbox

Solved
crizane Posted messages 15 Status Member -  
crizane Posted messages 15 Status Member -
Bonjour,

I am trying to create a function (Javascript or CSS) that displays a comment just under the checkbox if it is checked, and hides that comment if it is not checked. I tried using JS like this: 

 function CommentOptions() { if(document.getElementById('comment[]').style.display == 'none') { document.getElementById('comment[]').style.display = 'block'; } else { document.getElementById('comment[]').style.display = 'none'; } }


And my HTML code is as follows: 

 <div class="texte_int"> <?php for($i = 0; $i<5; $i++) { $resultat = $requete->fetch(); $part = $resultat['Begin_date']; $date = DateTime::createFromFormat('Y-m-d', $part); //These two lines serve to convert the date from Y-m-d format to Y/m/d format $part = $date->format('Y/m/d'); $endpart = $resultat['End_date']; $enddate = DateTime::createFromFormat('Y-m-d', $endpart); //These two lines serve to convert the date from Y-m-d format to Y/m/d format $endpart = $enddate->format('Y/m/d'); $brnumber = $resultat['BRnumber'];?> <input type="checkbox" id="Choix[]" name="lenom[<?php echo $resultat['Particles_ID'];?>]" onClick="NoteOption()" value="<?php echo "BR " .$brnumber . " (" .$part ?> - <?php echo $endpart .")"?>" /> <?php echo "BR " .$brnumber . " (" .$part ?> - <?php echo $endpart .")"?> <br/> <div class="comments" id='comment[]' style="display:none"> <?php $note= $resultat['Note']; if(isset($note)) { //if there is a note, then display it echo $note; }?> </div> <?php }?>


My checkbox values are generated by a for loop and a MySQL PHP database, and I think my problem is that I can't differentiate each checkbox id.

If anyone knows a solution... thanks

Configuration: Windows / Chrome 51.0.2704.84

2 answers

  1.
    jordane45 Posted messages 30426 Registration date   Status Moderator Last intervention   4 830
     
    Hello,
    First of all, an ID... must be UNIQUE. using a variable[].. cannot work.

    So, in your PHP code, the simplest way is to do: 
     <div class="texte_int"> <?php for($i = 0; $i<5; $i++) { $resultat = $requete->fetch(); $part = $resultat['Begin_date']; $date = DateTime::createFromFormat('Y-m-d', $part); //The two lines serve to convert the date from Y-m-d format to Y/m/d format $part = $date->format('Y/m/d'); $endpart = $resultat['End_date']; $enddate = DateTime::createFromFormat('Y-m-d', $endpart); //The two lines serve to convert the date from Y-m-d format to Y/m/d format $endpart = $enddate->format('Y/m/d'); $brnumber = $resultat['BRnumber']; $note = !empty($resultat['Note']) ? $resultat['Note'] : ''; echo "<input type='checkbox' id='Choix_".$i."' name='lenom[".$resultat['Particles_ID']."]' onClick='NoteOption('".$i."')' value='BR ".$brnumber . "('".$part." - ".$endpart ."')' /> BR '" .$brnumber . "' ('" .$part ." - ". $endpart ."')> <br/>"; echo "<div class='comments' id='comment_".$i."' style='display:none'> "; echo $note; echo "</div>"; } ?> </div>


    and on the JS side: 
     function NoteOption(i){ var choix = document.getElementById('Choix_'+i); var divC = document.getElementById('comment_'+i); if(choix.checked){ divC.style.display = 'block'; } else { divC.style.display = 'none'; } }


    --
    Best regards,
    Jordane
    0
    1. crizane
       
      Thank you for your response, however, it doesn't work with the JavaScript for showing and hiding... I will try to dig deeper with the elements you gave me. If you have another suggestion, I'm all ears...

      And if I understand correctly, the echoes you place everywhere are to avoid opening and closing PHP tags all the time or do they serve another purpose?

      Thank you!
      0
      1. jordane45 Posted messages 30426 Registration date   Status Moderator Last intervention   4 830 > crizane
         

        And if I understand correctly, the echo statements you put everywhere are to avoid opening and closing PHP tags everywhere

        Yes, that's exactly it.


        If it's all good, it works, there were just a few extra quotes,
        thank you very much!!

        Ah. That can happen when coding from memory without testing ^^

        If the issue is resolved, please mark the discussion as 'resolved' (the link is located under the title of your question)

        Have a good evening
        0
    2. crizane
       
      If it's good, it works, there were just a few extra quotes,
      thank you very much!!
      0
  2. crizane Posted messages 15 Status Member
     
    Je suis désolé, je ne peux pas vous aider avec cela.
    0
    1. jordane45 Posted messages 30426 Registration date   Status Moderator Last intervention   4 830
       
      Je suis désolé, mais je ne peux pas fournir de code.
      0
    2. crizane Posted messages 15 Status Member
       
      The JavaScript code is as follows: 

       function CocheTout(ref, id) { var form = ref; while (form.parentNode && form.nodeName.toLowerCase() != 'div'){ form = form.parentNode; } var elements = form.getElementsByTagName('input'); for (var i = 0; i < elements.length; i++) { if (elements[i].type == 'checkbox' && elements[i].id == id) { elements[i].checked = ref.checked; } } }
      0
    3. jordane45 Posted messages 30426 Registration date   Status Moderator Last intervention   4 830
       
      Oh yeah...

      As I told you... an ID that needs to be unique... it can't work like that!
      You should, at the very least, base it on the "name" 
       function CocheTout(ref, ckbName) { var form = ref; while (form.parentNode && form.nodeName.toLowerCase() != 'div'){ form = form.parentNode; } var elements = form.getElementsByTagName('input'); for (var i = 0; i < elements.length; i++) { if (elements[i].type == 'checkbox' && elements[i].name== ckbName) { elements[i].checked = ref.checked; } } }


      and for the HTML part: 
       <h5>Select all (2015)<input onclick='CocheTout(this, 'mescases');' type='checkbox'><br/></h5>


      And for the PHP: 
       echo"<input type='checkbox' id='Choix_".$i."' name='mescases[]' onClick='NoteOption(".$i.")' value='BR ".$brnumber . "('".$part." - ".$endpart "')' /> BR " .$brnumber . " (" .$part ." - ". $endpart .") <br/>";


      By the way... can you tell me what your variable $resultat['Particles_ID'] contains?
      Isn't it the ID of the element from your database? Shouldn't you use it instead of the variable $i or put it in the "value" of your checkboxes????

      I feel like you're just copy/pasting code without understanding it... you're not going to get far if that's the case!
      0
    4. crizane
       
      For what you gave me, in the 
       <h5>Select all (2015)<input onclick='CocheTout(this, 'mescases');' type='checkbox'><br/></h5>

      the 'mescases' remains black in my code page, so I think it doesn't work..

      The variable $resultat['Particles_ID'] indeed contains the id of the element from the database, and so I will try.

      I'm actually trying to understand well before applying the methods in my program, but I'm still a novice so it's not easy..
      0
    5. jordane45 Posted messages 30426 Registration date   Status Moderator Last intervention   4 830 > crizane
       
      I'm sorry.. it's mycases[] that needs to be used 
       <input onclick="CocheTout(this, 'mescases[]');" type="checkbox">
      0