Forums

Radio Button Selector Interface in Block Form

Permalink
I have been tinkering around with this for a while now, and I'm stumped. I am working on a new add-on, and here's what I'm trying to do in the block form:

- One of the options is that the user can choose one "mode" that the block will display - there are 3 choices in the form of a radio button selector.

- When any of the 3 radio buttons are selected, corresponding input is displayed beneath it.

Now, I have had success with 2 options, but not 3. That is where I need help. Below is my code for the form.php file for the section I'm working on.

For the radio button selector, I have: 

<div class="ccm-block-field-group">
   <p>
   <?php   echo $form->radio('lptype', 'time', $lptype, array('checked'=>'checked'))?>
   <?php   echo $form->label('lptypeT', t('Time'))?>
     
   <?php   echo $form->radio('lptype', 'countdown', $lptype)?>
   <?php   echo $form->label('lptypeC', t('Countdown'))?>
     
   <?php   echo $form->radio('lptype', 'random', $lptype)?>
   <?php   echo $form->label('lptypeR', t('Random Number'))?>
   </p>
</div>


And, for the 'wrapper' for each of the corresponding options: 
<div class="ccm-block-field-group">
   <div class="time-format"<?php  if (($lptype == 2) || ($lptype == 3))  {echo " style=\"display:none\"";} ?>>
CONTENT HERE
</div>
<div class="countdown-format"<?php  if (($lptype == 1) || ($lptype == 3)) {echo " style=\"display:none\"";} ?>>
CONTENT HERE
</div>
<div class="random-format"<?php  if (($lptype == 1) || ($lptype == 2)) {echo " style=\"display:none\"";} ?>>
CONTENT HERE
</div>
</div>


Is it possible to do this? If so, how do I make it work?
PineCreativeLabs
 
12345j replied on at Permalink Reply
12345j
Hi, maybe I'm misunderstanding you. but why couldn't you do this?
switch($lptype){
    case 1:
        $code='Content 1 HERE';
        break;
    case 2:
        $code='Content 2 HERE</div>';
        break;
    case 3:
        $code='Content 3 HERE';
        break;
}
echo '<div class="countdown-format">'.$code.'</div>;

if you want unique divs, maybe 
switch($lptype){
    case 1:
        $code='<div id="cf1" class="countdown-format">Content 1 HERE</div>';
        break;
    case 2:
        $code='<div id="cf2" class="countdown-format">Content 2 HERE</div>';
        break;
    case 3:
        $code='<div id="cf3" class="countdown-format">Content 3 HERE</div>';
        break;
}
echo $code;

or something like that?
Alternatively, you could do this more elegantly with jquery:
<script type="text/javascript">
$('#lptype').change(function() {
  $("div.countdown-format").hide("fast");
  $("#countdown-format-"+$(this).val()).show('fast');
}).change();</script>

and have the divs be like 
<div class="countdown-format" id="countdown-format-1"></div>
<div class="countdown-format" id="countdown-format-2"></div>
<div class="countdown-format" id="countdown-format-3"></div>

type out in this forum window, so might not be accurate.

EDIT: woops, just realized countdown format was only one of the div classes. I used it for everything. you should get the idea though.