2nd SELECTBOX visible when SELECTBOX is "Ja"

I have seen a complex discussion with mutiple radio's etc, but I would like to be selectbox (name: Pers_Diner) only visible when for selectbox (name:Diner)"Ja" is selected

<div class="form_item">
<div class="form_element cf_dropdown">
<label class="cf_label" style="width: 150px;">Gebruik Diner</label>
<select class="cf_inputbox validate-selection" id="select_1" size="1" title="U bent vergeten of u het diner wenst te bruiken!"  name="Diner">
<option value="">Diner</option>
<option value="Ja">Ja</option>
<option value="Nee">Nee</option>
</select>
<a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" alt="" src="components/com_chronocontact/css/images/tooltip.png"/></a>
<div class="tooltipdiv">Diner :: Vul hier in of u gebruik wilt maken van het diner</div>
</div>
<div class="cfclear"> </div>
///
<div class="form_item">
<div class="form_element cf_dropdown">
<label class="cf_label" style="width: 150px;">Aantal diner</label>
<select class="cf_inputbox validate-selection" id="select_1" size="1" title="U bent vergeten met hoeveel personen u van het diner gebruik willen maken!"  name="Pers_Diner">
<option value="">Aantal</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" alt="" src="components/com_chronocontact/css/images/tooltip.png"/></a>
<div class="tooltipdiv">Pers_Diner :: Vul hier het aantal personen in die gebruik willen maken van het diner</div>
</div>
<div class="cfclear"> </div>

Hi,
I think this was covered some time ago. Roughly though, you need to add an javascript event to the first dropdown, test if it's "Ja" or not, and change the display-property of the containing div of the dropdown.

<?
$doc =& JFactory::getDocument();
$script = "window.addEvent('domReady', function() {
  $('select_1').addEvent('change', function(event) {
    var e = new Event(event);
    if (e.target.value == 'Ja') {
      $('select_2').getParent().getParent().setStyle('display', 'block');
    } else {
      $('select_2').getParent().getParent().setStyle('display', 'none');
    }
  }
});";
$doc->addScriptDeclaration($script);
?>

The above code should do the trick, though you'll have to make sure the second dropdown has a unique id; you can't use 'select_1' for both inputs. It does rely on MooTools, so you should make sure this is loaded (if you havn't done so already).

/Fredrik

Hi Fredrik
I installed MooTools plugin and activated this
I changed the id-nbrs (select_2 and select_3)
I put thsi code on top of the HTML code

<?php
$doc =& JFactory::getDocument();
$script = "window.addEvent('domReady', function() {
  $('select_2').addEvent('change', function(event) {
    var e = new Event(event);
    if (e.target.value == 'Ja') {
      $('select_3').getParent().getParent().setStyle('display', 'block');
    } else {
      $('select_3').getParent().getParent().setStyle('display', 'none');
    }
  }
});";
$doc->addScriptDeclaration($script);
?>

This does not work, you mention
you need to add an javascript event to the first dropdown

Not sure where I should have this in

Hi Fredrik, it's not my style to "bumb", but pls could you give me a push in teh right direction.

Hi,
Sorry, been somewhat occupied last week or so, along with a blistering heat, so forum attendance have been at a minimum.

Now, to the issue..
The first few lines of the code I posted should add the events needed, though I found a few typos:
"domReady" should really be "domready", and the second last } should really be });

Updated code:

<?
$doc =& JFactory::getDocument();
$script = "window.addEvent('domready', function() {
  $('select_1').addEvent('change', function(event) {
    var e = new Event(event);
    if (e.target.value == 'Ja') {
      $('select_2').getParent().getParent().setStyle('display', 'block');
    } else {
      $('select_2').getParent().getParent().setStyle('display', 'none');
    }
  });
});";
$doc->addScriptDeclaration($script);
?>

/Fredrik

No problem Fredrik,
It goes in the right direction now!!

But when select_1 is set on Nee, also the last codes in the HTML code disappear!
This part:

<input type='hidden' name='verstuurd' value='<?php echo date('d-m-Y'); ?>' />
<input type='hidden' name='tijd' value='<?php echo date('H:i:s'); ?>' />

<div class="form_item">
  <div class="form_element cf_button">
    <input value="Verstuur" name="button_11" type="submit" /><input type="reset" name="reset" value="Herstel"/>
  </div>
  <div class="cfclear"> </div>
</div>

Hi,
This is most likely due to wo missing </div> tags in the html-code you posted earlier (you don't close either of the "form_item" class-divs). The corrected code should look like this:

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 150px;">Gebruik Diner</label>
    <select class="cf_inputbox validate-selection" id="select_1" size="1" title="U bent vergeten of u het diner wenst te bruiken!"  name="Diner">
      <option value="">Diner</option>
      <option value="Ja">Ja</option>
      <option value="Nee">Nee</option>
    </select>
    <a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" alt="" src="components/com_chronocontact/css/images/tooltip.png"/></a>
    <div class="tooltipdiv">Diner :: Vul hier in of u gebruik wilt maken van het diner</div>
  </div>
  <div class="cfclear"> </div>
</div>
///
<div class="form_item" style="display: none;">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 150px;">Aantal diner</label>
    <select class="cf_inputbox validate-selection" id="select_1" size="1" title="U bent vergeten met hoeveel personen u van het diner gebruik willen maken!"  name="Pers_Diner">
      <option value="">Aantal</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
    </select>
    <a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" alt="" src="components/com_chronocontact/css/images/tooltip.png"/></a>
    <div class="tooltipdiv">Pers_Diner :: Vul hier het aantal personen in die gebruik willen maken van het diner</div>
  </div>
  <div class="cfclear"> </div>
</div>

/Fredrik

Edit: Added inline CSS to keep the second input hidden by default.

Hi Fredrik
Appreciate all yopu efforts, the HTML code works almost fine, but
When selected Nee, the form doews not send.
Would this have to do with the validation of the selectbox?

Evedn when Nee is selected it seems to validate in the background as well

Hi Fredrik, I have solved it with a work around (indeed it had to with validation required)

In selct_3 I have put this now

<option value="None">Number</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>

In thsi way, when select_2 "Nee" is selected, the email replies with
Number of attendees : None

This will do for me !

Again, many thanks for your help😀

Best regards
K