Forums

Required field depending on another

tonythetiger 15 Nov, 2010
Hi!
In a form that I am building, I ask first if you are attending to the celebration with two radio buttons. If you answer YES I need people to also introduce "number of people" in a text field (so it has to be required). But I need to make NOT required the text field "number of people" if they check the radio button NO.
How can I do it?

Thanks in advance.
SPABO 16 Nov, 2010
I have the sane scenario, but as a SELECT
This should be in the HTML Code
<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_2" 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>


Sorry, but it's in Dutch

To open the following HTML select
</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_3" size="1" title="U bent vergeten met hoeveel personen u van het diner gebruik willen maken!"  name="Pers_Diner">
      <option value="Geen">Aantal</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</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>  <div class="cfclear"> </div>


To get this visible when JA is selceted You have to put in teh following code in JS!!
<?
$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 topic is locked and no more replies can be posted.