I try to dynamically hide and show a text field based on the option chosen in the dropdownlist, but nothing happens when the dropdownlist is changed. What am I missing?
Below is the _form view (all unnecessary fields removed for clarity):
<div class="form">
<?php $form=$this->beginWidget('CActiveForm', array(
'id'=>'book-form',
'enableAjaxValidation'=>false,
)); ?>
<p class="note">Fields with <span class="required">*</span> are required.</p>
<?php echo $form->errorSummary($model); ?>
<div class="row">
<?php echo $form->labelEx($model,'title'); ?>
<?php
$selections = array(
'A' => '1',
'B' => '2',
);
?>
<?php echo $form->dropDownList($model, 'title', $selections); ?>
<?php echo $form->error($model,'title'); ?>
</div>
<div class="row" id="book-signed">
<?php echo $form->labelEx($model,'signed'); ?>
<?php echo $form->textField($model,'signed'); ?>
<?php echo $form->error($model,'signed'); ?>
</div>
<div class="row buttons">
<?php echo CHtml::submitButton($model->isNewRecord ? 'Create' : 'Save'); ?>
</div>
<?php $this->endWidget(); ?>
</div><!-- form -->
<?php
Yii::app()->clientScript->registerScript('book-form-functions', "
$('#Book_title').on('change', function(event){
showHideSignedInput();
event.preventDefault();
}
function showHideSignedInput() {
if ($('#Book_title').val() == '1') {
$('#book-signed').show();
} else {
$('#book-signed').hide();
}
}
showHideSignedInput();
");