Hello,
I am trying to apply the code I found in Chronoform book for "Other" field where the text input field is hidden until other is selected in dropbox.
I want to use a Yes/No radio button to show a group of addition input fields.
So far I can make it show when Yes is selected but I can't make it disappear when No is selected.
Here is my HTML code:
Here is my Javascript code:
What am I missing?????
I am trying to apply the code I found in Chronoform book for "Other" field where the text input field is hidden until other is selected in dropbox.
I want to use a Yes/No radio button to show a group of addition input fields.
So far I can make it show when Yes is selected but I can't make it disappear when No is selected.
Here is my HTML code:
<div class="form_item">
<div class="form_element cf_radiobutton">
<label class="cf_label" style="width: 150px;">Boolean</label>
<div class="float_left">
<input value="Yes" title="" class="radio" id="dependent_controller" name="dependent_controller" type="radio" />
<label for="radio10" class="radio_label">Yes</label>
<input value="No" title="" class="radio" id="dependent_controller" name="dependent_controller" type="radio" />
<label for="radio10" class="radio_label">No</label>
<br />
</div>
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item" id="dependent_group">
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 150px;">Dependent Input1</label>
<input class="cf_inputbox" maxlength="150" size="30" title="" id="dependent_input1" name="dependent_input1" type="text" />
</div>
<div class="form_element cf_textbox">
<label class="cf_label" style="width: 150px;">Dependent Input2</label>
<input class="cf_inputbox" maxlength="150" size="30" title="" id="dependent_input2" name="dependent_input2" type="text" />
</div>
<div class="form_element cf_dropdown">
<label class="cf_label" style="width: 150px;">Dependent dropdown</label>
<select class="cf_inputbox" id="dependent_dropdown" size="1" title="" name="dependent_dropdown">
<option value="">Choose Option</option>
<option value="option 1">option 1</option>
<option value="option 2">option 2</option>
<option value="option 3">option 3</option>
</select>
</div>
<div class="form_element cf_checkbox">
<label class="cf_label" style="width: 150px;">Dependent Checkbox</label>
<div class="float_left">
<input value="check 1" title="" class="radio" id="check20" name="check2[]" type="checkbox" />
<label for="check20" class="check_label">check 1</label>
<br />
<input value="check 2" title="" class="radio" id="check21" name="check2[]" type="checkbox" />
<label for="check21" class="check_label">check 2</label>
<br />
<input value="check 3" title="" class="radio" id="check22" name="check2[]" type="checkbox" />
<label for="check22" class="check_label">check 3</label>
<br />
</div>
</div>
<div class="form_element cf_radiobutton">
<label class="cf_label" style="width: 150px;">Dependent Radio</label>
<div class="float_left">
<input value="radio 1" title="" class="radio" id="radio30" name="radio3" type="radio" />
<label for="radio30" class="radio_label">radio 1</label>
<br />
<input value="radio 2" title="" class="radio" id="radio31" name="radio3" type="radio" />
<label for="radio31" class="radio_label">radio 2</label>
<br />
<input value="radio 3" title="" class="radio" id="radio32" name="radio3" type="radio" />
<label for="radio32" class="radio_label">radio 3</label>
<br />
</div>
</div>
<div class="cfclear"> </div>
</div>
Here is my Javascript code:
window.addEvent('domready', function() {
$('dependent_controller').addEvent('change', function() {
if ($('dependent_controller').checked) {
$('dependent_group').setStyle('display', 'block');
} else {
$('dependent_group').setStyle('display', 'none');
}
});
// initialise the display
if ($('dependent_controller').checked) {
$('dependent_group').setStyle('display', 'block');
} else {
$('dependent_group').setStyle('display', 'none');
}
});
What am I missing?????