Need help with Show/Hide Script for my form

Hi. I don't know a lot about Javascript in general, but I'm working on a registration form for my site. I have a selection of radio buttons, and when someone selects a specific radio button, I want my hidden div (religion-adv) to become visible. Here's my code. For some reason, I can't get the div to unhide itself. I've tried all the scripts I can find. I hope that it is not a problem with my site.

<?php
$script = "window.addEvent('domready', function() {
        $('radio06').addEvent('click', function(event) {
      if ( $('radio06').checked === true ) {
         $('#religion-adv').setStyle('display', 'block');
}
});
$doc =& JFactory::getDocument();
$doc->addScriptDeclaration( $script );
?>

Here's the html:

<div class="form_item">
  <div class="form_element cf_radiobutton">
    <label class="cf_label" style="width: 150px;">Religion</label>
    <div class="float_left">
      <input value="Christian" title="" class="radio validate-one-required" id="radio00" name="radio0" type="radio" />
      <label for="radio00" class="radio_label">Christian</label>
      <br />
      
<input value="Muslim" title="" class="radio validate-one-required" id="radio01" name="radio0" type="radio" />
      <label for="radio01" class="radio_label">Muslim</label>
      <br />
      
<input value="Judaism" title="" class="radio validate-one-required" id="radio02" name="radio0" type="radio" />
      <label for="radio02" class="radio_label">Judaism</label>
      <br />
      
<input value="Hinduism" title="" class="radio validate-one-required" id="radio03" name="radio0" type="radio" />
      <label for="radio03" class="radio_label">Hinduism</label>
      <br />
      
<input value="Buddhism" title="" class="radio validate-one-required" id="radio04" name="radio0" type="radio" />
      <label for="radio04" class="radio_label">Buddhism</label>
      <br />
      
<input value="Mormon" title="" class="radio validate-one-required" id="radio05" name="radio0" type="radio" />
      <label for="radio05" class="radio_label">Mormon</label>
      <br />
      
<input value="Unificationist" title="" class="radio validate-one-required" id="radio06" name="radio0" type="radio" />
      <label for="radio06" class="radio_label">Unificationist</label>
      <br />
      
<input value="Other" title="" class="radio validate-one-required" id="radio07" name="radio0" type="radio" />
      <label for="radio07" class="radio_label">Other</label>
      <br />
      

    </div>
    
  </div>
  <div class="cfclear"> </div>
</div>

<div id="religion-adv">Test</div>

Hi mchmaster,

I think that this line may be the problem

$('#religion-adv').setStyle('display', 'block');

JQuery uses the # prefix, MooTools assumes that the string is an id.

You are also missing the "; at the end of the script (and some other brackets too).

Try this in the Form JavaScript box (I added an extra line to re-hide if the box is unchecked again):

window.addEvent('domready', function() {
  $('radio06').addEvent('click', function() {
    if ( $('radio06').checked === true ) {
      $('religion-adv').setStyle('display', 'block');
    } else {
      $('religion-adv').setStyle('display', 'none');
    }
  });
});

Bob

Hi!

Thank you for your quick response. The code you suggested worked very well, except for the part that hides the div if the selection is changed. The div doesn't change to display:none like it's supposed to. Any ideas as to why this is.

Also, I'm trying to now add in a slide effect. I've researched some mootools slide.fx code, but it seems that to use this, I would have to change my whole setup. I've tried searching through threads as well, looking for a similar solution, but haven't been successful. I know you are busy, but maybe you can point me in the right direction. Thank you.

Hi mchmaster,

I don't see any obvious reason why the div doens't re-hide :-( JavaScript is rarely obvious to me . . .

You could try changing the event from 'click' to 'change'.

Bob