Cactiveform Dropdownlist Dynamically Hide Text Field

Yii 1.1 General Discussion
1

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();

");
2

Congratulations on your first post! :) Did you also try:




function showHideSignedInput() {

   if ($('#Book_title').val() == 'A') {

      $('#book-signed').show();

   } else {

      $('#book-signed').hide();

   }

}
3

Thanks I got it working now. To check against ‘A’ was part of the solution, but the script also had a mistake in.

The javascript that worked:


<?php

Yii::app()->clientScript->registerScript('book-form-functions', "

$('#Book_title').change(function(){

        showHideSignedInput();

});

function showHideSignedInput() {

        if ($('#Book_title').val() == 'A') {

                $('#book-signed').show();

        } else {

                $('#book-signed').hide();

        }

}

showHideSignedInput();

");

I saw the error in the javascript coding by selecting “inspect element” in the Chrome browser (on my page I’m debugging), and it gave me an “unexpected token function” error. The error disappeared when I deleted the javascript code. When I fixed the error in the code the whole page (hide/show) behaved as expected.

It feels like the way I’m debugging is very elementary (as explained above). Could anyone tell me what is the best way to debug such pages to find the error, Netbeans or anything else?