How to Show/Hide fields based on dropdown selection

Hi

Here is how my JS code looks:

<?php
$script = "window.addEvent('domready', function() {
   $('recipe').addEvent('change', function(event) {
      if ( $('recipe')document.getElementById('hide_it').selected === true ) {
         $('hide_me1').setStyle('opacity', '1');
         $('hide_me2').setStyle('opacity', '1');
      }
   });
   $('recipe').addEvent('change', function(event) {
      if ( $('recipe')document.getElementById('hide_it').selected !== true ) {
         $('hide_me1').setStyle('opacity', '0');
         $('hide_me2').setStyle('opacity', '0');
      }
   });
});
";
$doc =&JFactory::getDocument();
$doc->addScriptDeclaration( $script );
?>

"recipe" is the name and ID of the dropdown < select >

What I want to achieve is to show a field when some options are selected, and to hide the field when other options are selected.

Could somebody please help me with this?

PS. I control the select options, I entered them manually.

Anyone?

Hi Blacksun,

A drop down isn't 'selected'; one or more of it's options is 'selected' so you have to get the options array and check the values of each option.

If you post the options list from the select box and say what you want to happen I can take a better look.

Bob

Hi

Thank you for your reply.

Here is the actual form: http://goo.gl/6DZja

Here is the select box: http://awesomescreenshot.com/0d8oy4wff

It is a double dropdown select box, what I'm trying to achieve is to HIDE the "Serial Number" inputbox when some of the options are selected (from the second drop down select "Select a product" ), and to SHOW the "Serial Number" inputbox for the other options.

I will HIDE the "Serial number" inputbox by default.

And the JS code for the Double Dropdown is :

window.addEvent('load', function() {
  var num_groups = 5
  var groups = new Array;
  for ( var i = 1; i <= num_groups; i++ ) {
   groups[i] = $('ch_'+i);
   $('ch_'+i).remove();
  }
  $('chapter').value = '';
  $('chapter').addEvent('change', function() {
    var group_no = $('chapter').value;
    if ( !group_no ) {
      return;
    }
   $$('#recipe optgroup').each(function(el) {el.remove()});
   $('recipe').appendChild(groups[group_no]);
  });
});

I can also give you back-end login info if you need to. Please give me a hand I tried everything already.
Thank you

Hi BlackSun,

That's helpful thank you . . . I still don't see what decides if the serial number box is shown? How do you know which options to show it for?

Bob

Hi

I control the select options, I entered them manually, I can give each select option an ID or a class... then I was thinking to hide it somehow like this:

 if ( $('recipe')document.getElementById('hide_it').selected === true ) {
         $('hide_me1').setStyle('opacity', '0');
         $('hide_me2').setStyle('opacity', '0');
      }

....
this code is giving error... Can you help me please?

Hi BlackSun,

I got this working I think. See the demo here.

I added data-serial attributes to the options with serial numbers like this

<option id="hide_none3" value="BRILLIANT SPA® - #0361" data-serial='12345' >

Then added a Load JS action with this code

window.addEvent('domready', function() {
  $('serial_no_container_div').hide();
  $('recipe').addEvent('change', function() {
    var opt;
    opt = this.getSelected().getProperty('data-serial').toString();
    if ( opt.length > 0 ) {
      $('serial_no').value = opt;
      $('serial_no_container_div').show();
    } else {
      $('serial_no').value = '';
      $('serial_no_container_div').hide();
    }
  });
});

where 'serial_no_container_div' is the container for the serial number input.

This hides the serial number input when the page loads, then looks for a data-serial value when the drop-down changes. if it finds a value then it sets the value and displays the input, otherwise it clears any set value and hides the input.

Bob

Hi Mr.Bob

Thank you soooo much, it works great, just like I wanted!!!!!! Thank you thank you thank you