Menu
I am populating a list of checkboxes from a foreach loop, and giving each an ID. I have added a set of divs below that would appear, depending on which checkbox is created. I was thinking I could load the id variable into a jQuery if statement, and then use a .toggle to show or hide the corresponding div.
<?php
//Call Programs
$getPrograms = Doctrine::getTable('Program')->createQuery()->where('subsection=?', 'mfa')->orWhere('subsection=?', 'mps')->orWhere('subsection=?', 'mat')->orWhere('subsection=?', 'ma')->orderBy('title ASC')->execute(); ?>
<div class="form_row">
<label>
<span><sup class="required_form_item">*</sup>Select Program</span>
</label>
<div class="buttonColumn" style="margin-left:170px;">
//loop the records in with checkboxes
<?php foreach ($getPrograms as $prog): ?>
<?php
$subsection = $prog->getSubsection();
$subsection = strtoupper($subsection);
$trimProg = trim($prog->getTitle(), ' ');
$removeChars = array(" ", "&");
$trimProg = str_replace( $removeChars, '', $trimProg );
$trimProg = preg_replace('/\s\s+/', '_', $trimProg);
?>
//custin id matches record title
<input type="checkbox" name="program" class="isChecked" id="<?php echo $trimProg; ?>" value="<?php echo $subsection . " " . $prog->getTitle() ?>" /><?php echo $subsection . " " . $prog->getTitle() ?><br />
<?php endforeach ?>
</div>
</div>
The following divs would be set to display:none until the matching checkbox is checked.
<div class="form_row sessionTime" id="Program1" style="display:none;">
Please choose an session time:
<input type="checkbox" name="schedule" value="5:00 pm" />5:00 pm<br />
</div>
<div class="form_row sessionTime" id="program2" style="display:none;">
Please choose an session time:
<input type="checkbox" name="schedule" value="10:00 pm" />10:00 pm<br />
</div>
...
And this is what I thought would work...but alas...it doesn't
$('.isChecked').click( function() {
if ( $(this).is(':checked') ) {
$thisID = $(this).attr("id");
$('.'+ $thisID).show();
}
else {
$('.'+ $thisID).hide();
}
}
);
514
You should be using "Program1" as class name instead of id like this
<div class="form_row sessionTime Program1" style="display:none;">
Please choose an session time:
<input type="checkbox" name="schedule" value="5:00 pm" />5:00 pm<br />
</div>
And your jQuery code should work, which you can simplify as follows:
$('.isChecked').click( function() {
if ( $(this).is(':checked') ) {
$('.'+ this.id).show();
}
else {
$('.'+ this.id).hide();
}
});
I tested this code @ home and it works as you might want
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(
function()
{
$('.isChecked').click(
function()
{
if ( $(this).is(':checked') )
{
$(this).show();
}
else
{
$(this).hide();
}
}
);
}
);
</script>
</head>
<body>
<form>
<input type="checkbox" name="program" class="isChecked"/>
<input type="checkbox" name="program" class="isChecked"/>
<input type="checkbox" name="program" class="isChecked"/>
<input type="checkbox" name="program" class="isChecked"/>
</form>
</body>
I think the problem in your code can come from the $(document).ready() handler that waits for the entire DOM to be loaded before binding action listener to it. What's more, your jquery code wasn't working for me. My version seems to work, but once checked box hidden, the user cannot handle them anymore.
Otherwise, I think doing some Doctrine requests in your template is a very bad idea.
Good bye !
44
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
