In another quest of mine regarding dependent fields, I was looking for a way to hide a field and only display it if another field is 'Yes'. Below is a sample of what I have working for me:
$myJavaScript = <<<CODE
<script type="text/javascript">
function checkEyeProblem(){
var v_text = document.getElementById('EyeProblem').value;
if (v_text == 'Yes'){
document.getElementById('EyeProblemD').style.display = 'table-row';
} else{
document.getElementById('EyeProblemD').style.display = 'none';
}
}
window.onload = function() {
checkEyeProblem() ;
document.getElementById("EyeProblem").onclick = checkEyeProblem ;
document.getElementById('form1').onclick = checkEyeProblem ;
}
// -->
</script>
CODE;
$aForm = array(
'form_attrs' => array(
'name' => 'form_review_of_systems',
'method' => 'post',
),
'params' => array (
'db' => array(
'table' => 'cf_review_of_systems', // table name
'key' => 'review_of_systems_id', // key field name
'uri' => '', // uri field name
'uri_title' => '', // title field to generate uri from
'submit_name' => 'submit_form', // some filed name with non empty value to determine if the for was submitted, in most cases it is submit button name
),
'csrf' => array(
'disable' => true, /*if it wasn't set or has some other value then CSRF checking is enabled for current form, take a look at sys_security_form_token_enable to disable CSRF checking completely. */
)
),
'inputs' => array(
'EyeProblem' => array(
'type' => 'select',
'name' => 'EyeProblem', // the same as key and database field name
'caption' => _t('_cf_complete_review_of_systems_eye'),
'required' => true,
'values' => array(
'' => '',
'Yes' => 'Yes',
'No' => 'No',
),
'attrs' => array(
'id' => 'EyeProblem',
'onclick' => '',
),
// checker params
'checker' => array (
'func' => 'length', // see BxDolFormCheckerHelper class for all check* functions
'params' => array(2,3),
'error' => _t('_cf_complete_review_of_systems_eye_err'),
),
// database params
'db' => array (
'pass' => 'Xss', // do XSS clear before getting this value, see BxDolFormCheckerHelper class for all pass* functions
),
),
'EyeProblemD' => array(
'type' => 'textarea',
'html' => 2,
'tr_attrs' => array(
'id' => 'EyeProblemD',
'style' => 'display:none;',
),
'name' => 'EyeProblemD', // the same as key and database field name
'caption' => _t('_cf_complete_review_of_systems_eye_description'),
'db' => array (
'pass' => 'Xss', // do XSS clear, but keep HTML before getting this value
),
),
In my sample code, the 'EyeProblemD' field is not visible unless the 'EyeProblem' field is 'Yes'. Attached is a screenshot of what the whole form looks like before first selection (before selection.png) and after selection (after selection.png). The no selection.png image is what it looks like if 'No' is selected. Even if selecting 'Yes' first, then selecting 'No' will make the textarea disappear.
