One form for 3 model, where each model can have multiple rows

I’m creating a simple survey application where there is just one form for a survey model, question model and options model.

Each survey can have multiple questions and each question can have multiple options.

Here’s the view file I’m trying to create:

<div class="form">


<?php $form=$this->beginWidget('CActiveForm', array(

	'id'=>'surveys-form',

	'enableAjaxValidation'=>true,

)); ?>


	<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 echo $form->textField($model,'title',array('size'=>60,'maxlength'=>500)); ?>

		<?php echo $form->error($model,'title'); ?>

	</div>

	<div id="questions-options">

		<div id="questions-boxes">

			<?php echo $form->labelEx($qmodel, 'Question');?>

			<?php echo $form->textArea($qmodel,'text[]',array('rows'=>6, 'cols'=>50)); ?>

			<!--

			<div id="options-box">

				<?php echo $form->labelEx($omodel, 'Options');?>

				<?php echo $form->textArea($omodel,'[0]text[options][]',array('rows'=>6, 'cols'=>50)); ?>

			</div>

			-->

		</div>

	</div>

<!--Autogenerate the URL, so commented

	<div class="row">

		<?php echo $form->labelEx($model,'url'); ?>

		<?php echo $form->textField($model,'url',array('size'=>60,'maxlength'=>250)); ?>

		<?php echo $form->error($model,'url'); ?>

	</div>admin/login

-->

	<a href="" onclick="addoption(); return false;">Add Question</a>

	<div class="row buttons">

		<?php echo CHtml::submitButton($model->isNewRecord ? 'Create' : 'Save'); ?>

	</div>


<?php $this->endWidget(); ?>


</div><!-- form -->


<script>

var i=2

function addoption(){


	var el = document.createElement('textarea');

	el.setAttribute('rows','6');

	el.setAttribute('cols','50');

	el.setAttribute('name','Questions[text][]');

	el.setAttribute('class','Questions_text');

	document.getElementById('questions-boxes').appendChild(el);

	//var el2 = el.cloneNode(true);

	//document.getElementById('questions-boxes').appendChild(el2);


	/*

	var a = document.getElementById("questions-boxes").cloneNode(true);

	document.getElementById('questions-options').appendChild(a);

	*/

}

</script>

I’ve successfully implemented the multiple questions part, but was unable to do the multiple options for each question part.

I dont know how to link each option to a question in HTML form. I can ofcourse use arrayed parameters similar to following:

<textarea name="question[1][text]></textarea>

<textarea name="question[1][options][]></textarea>

<textarea name="question[1][options][]></textarea>

But then I can’t use validation features etc.

I think model and controller wouldn’t be necessary as I’m trying to figure out how to create a form with such a relation. But if you guys need it, let me know. I’ll be glad to post it.