This is the first real problem that I encountered using Yii, trying to make a Model input repeatable in the form, validate and save them.

First of all you have to know that Yii don't support this scenario by default so we have to change manually our code :)

Let's view an example. We have two tables: Event and PhotoEvent. When we want to create an Event we want to add some photos to it. This is the database tables example:

How can we add N photos input field in the form dinalmically?

This is how is made the html page to collect the inputs:

[html]
<div class="yiiForm">

   <p>
   Fields with <span class="required">*</span> are required.
   </p>
   <?php echo CHtml::form('','post',array('enctype'=>'multipart/form-data')); ?>
   
   <?php echo CHtml::errorSummary(array_merge( array($event), $photosEvent)); ?>

   <div class="simple">
   <?php echo CHtml::activeLabelEx($event,'name'); ?>
   <?php echo CHtml::activeTextField($event,'name'); ?>
   </div>
   <div class="simple">
   <?php echo CHtml::activeLabelEx($event,'description'); ?>
   <?php echo CHtml::activeTextField($event,'description'); ?>
   </div>
   <div class="simple">
   <?php echo CHtml::activeLabelEx($event,'expireDate'); ?>
   <?php echo CHtml::activeTextField($event,'expireDate'); ?>
   </div>
   

   <?php echo CHtml::button('add Period', array('name'=>'addPeriod', 'id'=>'addPeriod')); ?>
   
   <?php foreach($photosEvent as $i => $photo): ?>
   <div id="photo-<?php echo $i ?>">
       <div class="simple">   
	   <?php echo CHtml::activeLabelEx($photo,'photoUrl'); ?>
	   <?php echo CHtml::activeFileField($photo, 'photoUrl'); ?>
	   </div>
      <br />
   </div>
   <?php endforeach; ?>

   
   <div class="row action">
   <?php echo CHtml::submitButton($update ? 'Save' : 'Create', array('name'=>'submitDatas')); ?>
   
   </div>


   </form>
</div>


<script type="text/javascript">

   /*<![CDATA[*/
   // I need to know how many photos I've already added when the validate return FALSE
   var photosAdded = <?php echo $photosNumber; ?>;

   // Add the event to the period's add button
   $('#addPhotos').click(function () {
      // I'm going to clone the first div containing the Model input couse I don't want to create a new div and add every single structure
      var divCloned = $('#photo-0').clone();      
      // I'm attaching the div to the last input created
      $('#photo-'+(photosAdded++)).after(divCloned);
      // Changin the div id
      divCloned.attr('id', 'photo-'+photosAdded);
      // Initializing the div contents
      initNewInputs(divCloned.children('.simple'), photosAdded);
   });
   
   function initNewInputs( divs, idNumber ) {
      // Taking the div labels and resetting them. If you send wrong information,
      // Yii will show the errors. If you than clone that div, the css will be cloned too, so we have to reset it
      var labels = divs.children('label').get();
      for ( var i in labels )
         labels[i].setAttribute('class', 'required');      
      
      // Taking all inputs and resetting them.
      // We have to set value to null, set the class attribute to null and change their id and name with the right id.
      var inputs = divs.children('input').get();      
      
      for ( var i in inputs  ) {
         inputs[i].value = "";
         inputs[i].setAttribute('class', '');
         inputs[i].id = inputs[i].id.replace(/\d+/, idNumber);
         inputs[i].name = inputs[i].name.replace(/\d+/, idNumber);
      }
   }
   
   /*]]>*/
      
</script>

And this is how is made the actionCreat to handle the datas and to manage it.

<?php
public function actionCreate()
   {
      // Adding jQuery to the view page.
      Yii::app()->getClientScript()->registerCoreScript('jquery');
      
      $event = new Event;
      
      // Adding an empty PhotoEvent to the form
      $photosEvent = array( new PhotoEvent, );
      
      
      
      // If everything is setted I will check and process the inputs
      if( isset( $_POST['submitDatas'] ) && isset( $_POST['PhotoEvent'], $_POST['Event'] ) )
      {
         $event->attributes=$_POST['Event'];
         // DB date layout
         $event->expireDate = date_format(date_create($event->expireDate), 'Y-m-d');   
         $valid = $event->validate();
         
         // This is the crappy part of the script that I need to improve and make it more elegance
         // I've to add to the photoEvent array a new PhotoEvent for every istance in $_POST['PhotoEvent']
         foreach ( $_POST['PhotoEvent'] as $i => $photo ) {
            $photosEvent[$i] = new PhotoEvent;   
            if ( isset( $_POST['PhotoEvent'][$i] ) )
               $photosEvent[$i]->photoUrl = CUploadedFile::getIstance($photosEvent[$i], "photoUrl[$i]" );
            $valid = $valid && $photosEvent[$i]->validate();               
         }
            
         if( $valid && $event->save(false) ) {
            Yii::import('application.extensions.image.Image');
            // Saving each period ( i've to change the date format couse in Italy we use dd/mm/yyyy
            foreach ( $photosEvent as $i => $photo ) {
               $photo->eventId = $event->id;
               // Taking and saving the image in the filesystem in the DIR_PATH directory path.
			   $photo->photoUrl->saveAs('DIR_PATH/'.$photo->photoUrl->getName());
			   /* If you need to resize the image use this path of code
			   $image = new Image('DIR_PATH/'.$photo->photoUrl->getName());
			   $image->resize(200, 200);
			   $image->save();
			   */
               $photo->save(false);
            }
            
            
            $this->redirect(array('show','id'=>$lastminute->id));
            
         }
      }
      $this->render('create', array(
         'event' => $event,
         'photosEvent' => $photosEvent,
          'photosNumber' => isset($_POST['PhotoEvent']) ? count($_POST['PhotoEvent'])-1 : 0, //How many PhotoEvent the user added
          'update' => false,
      ));
   }
?>

I wish you will enjoy my guide :) Please gimme some feedback to improve it :)

See ya! Emanuele "StErMi" Ricci.