Populate a cf_textbox based on selection

Hi, I wish to populate a cf_textbox, once "JA" has been selected in a selectbox (id=select_2)

Tis is the HTML code for the cf_textbox

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Voornaam</label>
    <input class="cf_inputbox required" maxlength="30" size="25" 
title="Vul hier de voornaam van uw introducée in" id="Voornaam" name="Voornaam" type="text" /

I tried the following JS, but when "NEE" is selected all the field, buttons etc AFTER teh selectbox disappear!

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

Hope you have the answer

Hi, it seemed some </div> not correctly in the HTMl
It;s almost working now, however, when selected : Nee, the form will not be send !

I assume it has to do with the validation in the 3 textboxes?
Pls find the last part of the HTML code

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 150px;">Introducée</label>
    <select class="cf_inputbox validate-selection" id="select_2" size="1" title="U bent vergeten aan te geven of u een introducée meebrengt!"  name="Diner">
      <option value="">Introducée</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">Introducee :: Vul hier in of u een introducée mee brengt</div>
<div class="cfclear"> </div>
</div>

<div class="form_item" style="display: none;">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Voornaam</label>
    <input class="cf_inputbox required" maxlength="30" size="25" 
title="Vul hier de voornaam van uw introducée in" id="Voornaam" name="Voornaam" type="text" />
<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">VOORNAAM :: Vul hier de voornaam van uw introducée in!</div>
<div class="cfclear"> </div>
</div>  <div class="cfclear"> </div>
</div>
 

<div class="form_item" style="display: none;">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">Achternaam</label>
    <input class="cf_inputbox required" maxlength="30" size="25" 
title="Vul hier de achternaam van uw introducée in" id="Achternaam" name="Achternaam" type="text" />
<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">ACHTERNAAM :: Vul hier de achternaam van uw introducée in!
</div>
</div>
  <div class="cfclear"> </div>
</div>  <div class="cfclear"> </div>

</div>
 


<div class="form_item" style="display: none;">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">EGA-HCP</label>
    <input class="cf_inputbox required" maxlength="7" size="7" 
title="Vul hier de EGA-HCP van uw introducée in" id="EGAHCP" name="EGAHCP" type="text" />  
<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">EGA HCP :: Vul hier de EGA-HCP van uw introducée in!
  </div>
</div>
  <div class="cfclear"> </div>
</div>  <div class="cfclear"> </div>

</div>
  

<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>

Indeed it had to do with the option "required"in teh boxes.

Any tips how to "avoid" the required option, when NEE is selected, and thus the form will be submitted?

Hi SPABO,

There have been a couple of other threads on removing validation when inputs are hidden. I don't remember the answers now but I think that at least one solution was posted.

Bob

Bob, I could have given this answer myself. The problem is : I can't find it!!

Hi SPABO,

I couldn't find it either - but it's there somewhere.

Bob

Thanks...........