Form problem - joining CActiveForm with table data

I got some form problem I hope you can help me with:

I have an order CActiveForm for which I made an ajax function which delivers extra article data after the article number was inserted.

The form starts with one article row. I added some javascript to create more article rows if needed by the user. My problem: I did only get this to work when building some article-table outside the CActiveForm. Now the ajax function to get the article data no longer works as the data is no longer availiable on the CHtml model.

Any suggestions how I can get both things to work together? I’m totally stuck right now…

The form:


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

	'id'=>'orders-form',

	'enableAjaxValidation'=>false,

)); ?>


	<p class="note">Felder mit einem <span class="required">*</span> sind Pflichtfelder.</p>


	<?php echo $form->errorSummary($model); ?>


	<?php echo $form->hiddenField($model,'consultantId',$this->getConsultantOptions()); ?>


	<div class="row">

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

		<?php echo $form->dropDownList($model,'customerId',$this->getCustomerOptions()); ?>

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

	</div>


	<div class="row">

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

		<?php echo $form->dropDownList($model,'deliveryId',$this->getDeliveryOptions()); ?>

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

	</div>


	<div class="row">

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

		<?php echo $form->dropDownList($model,'paymentId',$this->getPaymentOptions()); ?>

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

	</div>

	

	<div class="row">

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

		<table id="orders-table">

			<tr>

			<!--

				<td><?php echo CHtml::textField('art_no','',array('size'=>15,'maxlength'=>32)); ?></td>

				<td><?php echo CHtml::textField('art_name','',array('size'=>40,'maxlength'=>255,'readonly'=>1)); ?></td>

				<td><?php echo CHtml::textField('art_amount','',array('size'=>5,'maxlength'=>5)); ?></td>

				<td><?php echo CHtml::textField('art_price','',array('size'=>8,'maxlength'=>10,'readonly'=>1)); ?> €</td>

				<td><?php echo CHtml::button('bestellen', array( 'onclick'=>"{getArticleData();}" ) ); ?></td>

			-->

				<td><Input type="checkbox" name="chk"/></td>

				<td> 1 </td>

				<td> <input name="art_no" type="text" size="15" maxlength="32"> </td>

				<td> <input name="art_amount" type="text" size="5" maxlength="5"> </td>

				<td> <input name="art_name" type="text" size="40" maxlength="255" readonly="1"> </td>

				<td> <input name="art_price" type="text" size="8" maxlength="10" readonly="1"> </td>

				<td> <input type="button" value="bestellen" onclick="getArticleData()"></td>

			</tr>

		</table>

	</div>

	<div id='articleStatus'></div>

	<div class="row buttons">

		<INPUT type="button" value="Weiterer Artikel" onclick="addRow('orders-table')" />

		<INPUT type="button" value="Artikel löschen" onclick="deleteRow('orders-table')" />

	</div>	

	<div class="row buttons">

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

	</div>



The ajax function:


    function getArticleData()

    {

		<?php echo CHtml::ajax(array(

                'url'=>CController::createUrl('orders/getArticleData'), 


                'data'=>array('articleNumber'=>'js:$(\'#art_no\').val()', 

                              'articleAmount'=>'js:$(\'#art_amount\').val()',

                                ),

                'type'=>'post',

                'dataType'=>'json',

                'success'=>"function(data)

                {

                    // data will contain the json data passed by the hpicheck action in the controller

                    // Update the status

                    $('#articleStatus').html(data.status);

                    if (data.error=='false')

                    {

                        $('#art_name').val(data.art_name);

                        $('#art_price').val(data.art_price);

                        //$('#art_price_all').val(data.art_price_all);

                    }

 

                } ",

            ))?>;

        return false;  

    }

The javascript function:


	function addRow(tableID) {

		var table = document.getElementById(tableID);


		var rowCount = table.rows.length;

		var row = table.insertRow(rowCount);


		var cell1 = row.insertCell(0);

		var element1 = document.createElement("input");

		element1.type = "checkbox";

		cell1.appendChild(element1);


		var cell2 = row.insertCell(1);

		cell2.innerHTML = rowCount + 1;


		var cell3 = row.insertCell(2);

		var element3 = document.createElement("input");

		element3.type = "text";

		element3.name = "art_no";

		element3.value = "";

		element3.size = "15";

		element3.maxlength = "32";		

		cell3.appendChild(element3);

		

		var cell4 = row.insertCell(3);

		var element4 = document.createElement("input");

		element4.type = "text";

		element4.name = "art_amount";

		element4.value = "";

		element4.size = "5";

		element4.maxlength = "5";	

		cell4.appendChild(element4);


		var cell5 = row.insertCell(4);

		var element5 = document.createElement("input");

		element5.type = "text";

		element5.readOnly = "true";

		element5.name = "art_name";

		element5.value = "";

		element5.size = "40";

		element5.maxlength = "255";	

		cell5.appendChild(element5);


		var cell6 = row.insertCell(5);

		var element6 = document.createElement("input");

		element6.type = "text";

		element6.readOnly = "true";

		element6.name = "art_price";

		element6.value = "";

		element6.size = "8";

		element6.maxlength = "10";

		cell6.appendChild(element6);

		

		var cell7 = row.insertCell(6);

		var element7 = document.createElement("input");

		element7.type = "button";

		element7.onClick = "getArticleData()";

		element7.name = "orderButton";

		element7.value = "bestellen";

		cell7.appendChild(element7);		

		

	}


	function deleteRow(tableID) {

		try {

			var table = document.getElementById(tableID);

			var rowCount = table.rows.length;


			for(var i=0; i<rowCount; i++) {

				var row = table.rows[i];

				var chkbox = row.cells[0].childNodes[0];

				if(null != chkbox && true == chkbox.checked) {

					table.deleteRow(i);

					rowCount--;

					i--;

				}

			}

		}catch(e) {

			alert(e);

		}

	}

    </script> 

Nobody with an idea how I could include my article table into my CActiveForm? I would really appreciate any kind of help here…

Thx!