Working with radiobutton list

You are viewing revision #4 of this wiki article.
This is the latest version of this article.
You may want to see the changes made in this revision.

« previous (#3)

  1. Scenario:
  2. Form elements:
  3. How validation works?

This is a tutorial to work with radioButtonList which will handle enum datatype. Form design and validation both are detailed here.

Try this and let me know if here is any issue or any other better way to do this.

Scenario:

Let we have enum for table field menuType as shown below.

  • menuType : enum('Page','PhpPage','External')

  • pageId: int (If menuType is 'Page')

  • phpPageId: int (If menuType is 'PhpPage')

  • externalLink: varchar (If menuType is 'External')

Form elements:

Now in form, based on menu type selection i want to show or hide other 3 fields. The below code will take care of it. I have called 'menuTypeChange' function on change of any radio selection. This function will show/hide respected elements.

<script language="javascript">
function menuTypeChange(menyType)
{	
	$('.menuType').hide();
	if(menyType!="")
		$('#'+menyType+'Div').show();
}
</script>
<div class="row">
		<?php echo $form->labelEx($model,'menuType'); ?>
        <?php echo $form->radioButtonList($model,'menuType',array('Page'=>'Page','PhpPage'=>'PHP Page', 'External'=>'External'), array('onchange' => 'menuTypeChange(this.value);')); ?>
        <?php echo $form->error($model,'menuType'); ?>
    </div>
    
	<div id="PageDiv" class="row menuType">
		<?php echo $form->labelEx($model,'pageId'); ?>
        <?php echo $form->dropDownList($model, 'pageId', CHtml::listData(Page::model()->findAll(array('condition'=>'isDeleted=:isDeleted', 'params'=>array(':isDeleted'=>0))), 'pageId', 'pageName'), array('empty'=>'- - Select - -')); ?>      
		<?php echo $form->error($model,'pageId'); ?>
	</div>
    
    <div id="PhpPageDiv" class="row menuType">
		<?php echo $form->labelEx($model,'phpPageId'); ?>
        <?php echo $form->dropDownList($model, 'phpPageId', CHtml::listData(PhpPage::model()->findAll(), 'phpPageId', 'phpPageName'), array('empty'=>'- - Select - -')); ?>      
		<?php echo $form->error($model,'phpPageId'); ?>
	</div>

	<div id="ExternalDiv" class="row menuType">
		<?php echo $form->labelEx($model,'externalLink'); ?>
		<?php echo $form->textField($model,'externalLink',array('size'=>60,'maxlength'=>255)); ?>
		<?php echo $form->error($model,'externalLink'); ?>
	</div>
<script language="javascript">
    menuTypeChange('<?php echo $model->menuType;?>');
	</script>

I have done with form. Now the problem is validation.

How validation works?

With default rules when i submit form it is asking me all 3 fields validation even i have selected only one menu type. For this let me create one new custom validation function as shown below.

public function rules()
  return array(
  ....
  ....
   array('menuType', 'required'),
    array('pageId','radioValidate','menuType','Page'),
    array('phpPageId','radioValidate','menuType','PhpPage'),
    array('externalLink','radioValidate','menuType','External'),
    array('externalLink', 'url'),
  ....
  );
}
public function radioValidate($attribute,$params)
{
	$field = $params[0];
	$value = $params[1];
	
	if($this->$field == $value && $this->$attribute == '')
	{
		$this->addError($attribute,$this->getAttributeLabel($attribute).' cannot be blank.');
	}
}

Let me explain more on this rule:

array('pageId','radioValidate','menuType','Page'),

Above rule means: If menuType's value is Page then only pageId is compulsory.

Same goes with other too,

array('phpPageId','radioValidate','menuType','PhpPage'),
array('externalLink','radioValidate','menuType','External'),