Display div based on checked checkbox
Solved
crizane
Posted messages
15
Status
Member
-
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:
And my HTML code is as follows:
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
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
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:
and on the JS side:
--
Best regards,
Jordane
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
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; } } }
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"
and for the HTML part:
And for the PHP:
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!
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!
For what you gave me, in the
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..
<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..
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!
Yes, that's exactly it.
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
thank you very much!!