Manage multiple forms on one page using renderPartial

Yii 1.1 General Discussion
1

Hello everybody,

I want to show multi forms on one page,like first show log in form, after validation/Authentication hide login form and show another form which will take user’s billing/shipping info, and if new customer show sign up form on same page and after successful sign up, make it log in and hide sign up form and render billing/shipping form. and same with other forms like credit card information, want to use ajax based validation and rendering.

This is my code which is not working fine.

View file(index.php)


<?php

echo CHtml::image(Yii::app()->request->baseUrl."/images/partners/corp_logo.gif", "logo");

?>

<p>

<br />

Welcome to International Checkout!<br /><br />

Coupon codes for this store do not apply to International Orders.<br /><br />

Your 3 Wishes order has been forwarded to International Checkout for billing, shipping and customer service. Once you have completed your order, an email confirmation will be sent to you. International Checkout will place the order with 3 Wishes on your behalf, receive it at their depot, and then ship it to your doorstep. 

<br />

<br />

Questions? <?php echo CHtml::link('Contact International Checkout', array('../site/contact'));?>

<br />

<br />

Discount Applied on your order: 5 %

</p>

<?php

	

	/*echo CHtml::ajaxLink(

	'Delete Items',          // the link body (it will NOT be HTML-encoded.)

	array(''), // the URL for the AJAX request. If empty, it is assumed to be the current URL.

	array(

		'update'=>'#grid-view-table'

	)

);*/


    //$ourscript = "alert('hello');";

	

    Yii::app()->clientScript->registerScript('helloscript',

	'

	$("#newCustomer").click(function () {

		$("#signup-div").show();

			$("#login-div").hide();

		});

		

	$("#returningCustomer").click(function () {

		$("#login-div").show();

			$("#signup-div").hide();

		});	

	

	function showBillingShippingDiv(){

		$("#new-returning").hide();

		$("#signup-div").hide();

		$("#billing-shipping-div").show();

	}

	

	function formSend(form, data, hasError)

	{

		if(!hasError){

			alert(data);

		}

	}


	

	

	'


	//"alert('jjjjjjjj');"

	,CClientScript::POS_READY);

?>

<div id="cart-view-table" class="grid-view">

<?php echo $cartStr;?>

</div>





<div id="new-returning" style="text-align:center">

<div class="heading">Login / Signup</div>

<div style="padding-top:10px; padding-bottom:10px;">

	<input type="radio" name="customerType[]" id="newCustomer" />&nbsp;I am a new customer

	<input type="radio" name="customerType[]" id="returningCustomer" />&nbsp;I am a returning customer

</div>

</div>




<div id="login-div" style="display:none">

	<div class="form wide">

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

		'id'=>'login-form',

		'enableAjaxValidation'=>true,

		'clientOptions' => array('validateOnSubmit' => true),


		//'enableClientValidation'=>true,

		//'focus'=>array($model,'email'),

		//'action'=>array('cart/login'),

	)); ?>

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

		<div class="row" style="padding-left:400px;">

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

			<?php echo $form->textField($model,'email'); ?>

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

		</div>

	

		<div class="row" style="padding-left:400px;">

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

			<?php echo $form->passwordField($model,'password'); ?>

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

		</div>

		

		<div class="row submit" style="padding-left:510px;">

			<?php //echo CHtml::submitButton('Login'); 

				echo CHtml::ajaxSubmitButton(

					'Login',

					array(''),

					array(

						//'success'=>'function(msg) { showBillingShippingDiv(msg) }',

						'update'=>'#billing-shipping-div',

						//'beforeSend' => 'function(){$("#billing-shipping-div").addClass("loading");}',

						//'complete' => 'function(){$("#billing-shipping-div").removeClass("loading");}',


					)

				);

			?>

		</div>

	

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

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


</div>


<div id="signup-div" style="display:none" >

	<div class="form wide">

	<?php 

	

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

		'id'=>'signup-form',

		'enableAjaxValidation'=>true,

		//'enableClientValidation'=>true,

		//'clientOptions' => array('validateOnSubmit' => true, 'validateOnChange'=>false, 'afterValidate'=>'js:formSend'),

		'clientOptions' => array('validateOnSubmit' => true, 'validateOnChange'=>false),

		)); 

	?>

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

		<div class="row" style="padding-left:400px;">

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

			<?php echo $form->textField($model,'email'); ?>

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

		</div>

	

		<div class="row" style="padding-left:400px;">

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

			<?php echo $form->passwordField($model,'password'); ?>

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

			<p class="hint" style="padding-left:120px;">

				(7-16 letters).

			</p>

		</div>

		<div class="row" style="padding-left:400px;">

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

			<?php echo $form->passwordField($model,'verifyPassword'); ?>

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

		</div>

		<!--<div class="row">

			<?php echo $form->labelEx($model,'sub_newsletter', array('style'=>'float:left;padding-left:50px; width:450px;')); ?>

			<?php echo $form->radioButtonList($model, 'sub_newsletter',

                    array(  0 => 'Yes',

                            1 => 'No'),

                    array( 'separator' => " " ,

					'labelOptions'=>array('style'=>'float:left;padding-left:10px; width:15px'), 'style'=>'float:left;padding-left:10px; width:15px')

					); 

			?>

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

		</div> -->

		<div class="row">

			<?php echo $form->labelEx($model,'sub_newsletter', array('style'=>'float:left;padding-left:50px; width:450px;')); ?>

			<?php echo $form->checkBox($model, 'sub_newsletter', array('style'=>'float:left;padding-left:5px; width:10px;')); ?>

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

		</div>

		<div class="row">

			<?php echo $form->labelEx($model,'sub_country', array('style'=>'float:left;padding-left:50px; width:450px;')); ?>

			<?php echo $form->dropDownList($model, 'sub_country', CHtml::listData(Countries::model()->findAll(), 'ID', 'Country'),array('prompt' => '- Select Your Country -','style'=>'float:left; width:205px;')); ?>

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

		</div>

		<div class="row submit" style="padding-left:510px;">

			<?php //echo CHtml::submitButton('Signup and Login'); 

				echo CHtml::ajaxSubmitButton(

					'Signup and Login',

					array(''),

					array(

						//'success'=>'function(msg) { showBillingShippingDiv(msg) }',

						'update'=>'#billing-shipping-div',

						//'beforeSend' => 'function(){$("#billing-shipping-div").addClass("loading");}',

						//'complete' => 'function(){$("#billing-shipping-div").removeClass("loading");}',


					)

				);

			?>

		</div>

	

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

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

</div>


<div id="billing-shipping-div" style="background: #E5F1F4;"></div>

Controller (cart.php)


<?php


class CartController extends Controller

{

	

	public function actionIndex()

	{

		$model = new Customers;

		//$modelSignup = new SignupForm;

		

		

		// ajax validator

		if(Yii::app()->request->isAjaxRequest)

		{

			if(isset($_POST['Customers']))

			{

				if(isset($_POST['ajax']) && $_POST['ajax']==='login-form')

				{

					if(!$model->validate())

					{

						echo CActiveForm::validate($model);

						Yii::app()->end();

					}else{

						$this->renderBillingShippingForm();

					}


				}

				

				if(isset($_POST['ajax']) && $_POST['ajax']==='signup-form')

				{

					if(!$model->validate())

					{

						echo CActiveForm::validate($model);

						Yii::app()->end();

					}else{

						$this->customerSignup($model);

					}

		

					

				}

				

				

			}

			

			$data = Yii::app()->session->get('cartInfo');

			//print_r($_POST['cartItems']);die;

			foreach($_POST['cartItems'] as $itemId){

				unset($data['cartItems'][$itemId]);

			}

			Yii::app()->session->add('cartInfo',$data); // save cart info in session

			

			$cartStr = $this->showCart();

			echo $cartStr;

			Yii::app()->end();


		}else{

			$data = array();

			$cartItems = array(

				0=>	array('HARNESS-CUPCAKES(WEE ONE)', 'BEL-HAR-C/C', 'L(22_32B)', 'PINK', '10', '$1.00','$'.number_format((10*1.00), 2, '.', '')),

				1=>	array('BOWL, ERGONOMIC FEEDING', 'CON-EAT-BTR', '--', 'WHITE', '10', '$1.00','$'.number_format((10*1.00), 2, '.', '')),

				2=>	array('BOWL-EAT, ERGONOMIC FEEDING', 'CON-EAT-BTR', '--', 'WHITE', '10', '$1.00','$'.number_format((10*1.00), 2, '.', '')),

				3=>	array('BOWL-EAT BETTER, ERGONOMIC FEEDING', 'CON-EAT-BTR', '--', 'WHITE', '10', '$1.00','$'.number_format((10*1.00), 2, '.', '')),

				4=>	array('BETTER, ERGONOMIC FEEDING', 'CON-EAT-BTR', '--', 'WHITE', '10', '$1.00','$'.number_format((10*1.00), 2, '.', '')),

				5=>	array('EAT BETTER, ERGONOMIC FEEDING', 'CON-EAT-BTR', '--', 'WHITE', '10', '$1.00','$'.number_format((10*1.00), 2, '.', '')),

			);

			$data['params'] = array('discount'=>'5%');

			$data['cartItems'] = $cartItems;

			

			Yii::app()->session->add('cartInfo',$data); // save cart info in session

			$cartStr = $this->showCart();

		}

		

		

		$this->render('index',array(

			'cartStr'=>$cartStr,

			'model'=>$model,

			//'billingShipping'=>$billingShipping,

			//'modelSignup'=>$modelSignup,

			//'customers'=>$customers

		));

		

	}

	

	function renderBillingShippingForm()

	{

		$billingShippingInfo = new CustomerBillingShippingInfo;

		$this->renderPartial('billing_shipping_form', array("billingShippingInfo"=>$billingShippingInfo));

		Yii::app()->end();

	}

	

	public function showCart()

	{

		$data = Yii::app()->session->get('cartInfo');

		$outPutStr = CHtml::beginForm();

		$outPutStr .= '<table class="items">

						<thead>

							<th>DELETE</th>

							<th>ITEM</th>

							<th>STYLE#</th>

							<th>SIZE</th>

							<th>COLOR</th>

							<th>QUANTITY</th>

							<th>PRICE</th>

							<th>TOTAL</th>

						</thead>

						<tbody>';

			$class = 'odd';

			$counter=0;			

			foreach($data["cartItems"] as $itemKey=>$itemVal){

				$class = ($counter%2==0)?'odd':'even';

				$counter++;

				$outPutStr .= "<tr class='$class'>";

				$outPutStr .= "<td><input name='cartItems[]' value='$itemKey' type='checkbox'></td>";

				for($i=0; $i<count($itemVal); $i++){

					if($i>4){

						$outPutStr .= "<td style='text-align:right;'>".$itemVal[$i]."</td>";

					}else{

						$outPutStr .= "<td>".$itemVal[$i]."</td>";

					}

				}

				$outPutStr .= "</tr>";

			}

			$outPutStr .= "<tr>";

			$outPutStr .= "<td colspan='8'>";

			$outPutStr .= CHtml::ajaxSubmitButton(

					'Delete Items',

					array(''),

					array(

						'update'=>'#cart-view-table',

					)

			);

			$outPutStr .= "</td>";

			$outPutStr .= "</tr>";

			

		$outPutStr .= "</tbody>

			</table>";

		$outPutStr .= CHtml::endForm();	

		return $outPutStr;

	}

	

	/**

	 * Customer signup

	 */

	public function customerSignup($model)

	{

		$model->attributes=$_POST['Customers'];

		if($model->validate())

		{

			$model->password=encrypting($model->password);

			$model->email=$model->email;

			

			if ($model->save())

			{

				$this->renderBillingShippingForm();

			}

		}

	}

	

	

	

	

	public function actionLogin()

	{

		$model = new Customers;

		//$this->performAjaxValidation($model);		


		// if it is ajax validation request

		if(isset($_POST['ajax']) && $_POST['ajax']==='login-form')

		{

			echo CActiveForm::validate($model);

			Yii::app()->end();

		}


		// collect user input data

		if(isset($_POST['Login']))

		{

			/*$model->attributes=$_POST['LoginForm'];

			// validate user input and redirect to the previous page if valid

			if($model->validate() && $model->login())

				$this->redirect(Yii::app()->user->returnUrl);*/

		}

		// display the login form

		$this->render('login',array('model'=>$model));

	}

	

}

billing_shipping_form.php


<script>

$("#new-returning").hide();

$("#login-div").hide();

$("#signup-div").hide();

$("#toggle_b_s_f").click(function () {

		$("#formcontainer_b_s").toggle('slide');

	});

</script>


<div class="heading">Billing / Shipping Information

<div id="toggle_b_s_f" style=" float:right; cursor:pointer">Collapse</div>

</div>

<div id="formcontainer_b_s" class="formcontainer" style="height:450px;">

	<div class="wide form" style="padding-left:160px; float:left; width:450px;">

<h2>Billing Information</h2>

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

		'id'=>'bill-shipp-form',

	)); ?>

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

		<div class="row">

			<?php echo $form->labelEx($billingShippingInfo,'first_name_b'); ?>

			<?php echo $form->textField($billingShippingInfo,'first_name_b'); ?>

			<?php echo $form->error($billingShippingInfo,'first_name_b'); ?>

		</div>

		<div class="row">

			<?php echo $form->labelEx($billingShippingInfo,'last_name_b'); ?>

			<?php echo $form->textField($billingShippingInfo,'last_name_b'); ?>

			<?php echo $form->error($billingShippingInfo,'last_name_b'); ?>

		</div>

		<div class="row">

			<?php echo $form->labelEx($billingShippingInfo,'phone'); ?>

			<?php echo $form->textField($billingShippingInfo,'phone'); ?>

			<?php echo $form->error($billingShippingInfo,'phone'); ?>

		</div>

		<div class="row">

			<?php echo $form->labelEx($billingShippingInfo,'mobile'); ?>

			<?php echo $form->textField($billingShippingInfo,'mobile'); ?>

			<?php echo $form->error($billingShippingInfo,'mobile'); ?>

		</div>

		<div class="row">

			<?php echo $form->labelEx($billingShippingInfo,'company_b'); ?>

			<?php echo $form->textField($billingShippingInfo,'company_b'); ?>

			<?php echo $form->error($billingShippingInfo,'company_b'); ?>

		</div>

		<div class="row">

			<?php echo $form->labelEx($billingShippingInfo,'address1_b'); ?>

			<?php echo $form->textField($billingShippingInfo,'address1_b'); ?>

			<?php echo $form->error($billingShippingInfo,'address1_b'); ?>

		</div>

		<div class="row">

			<?php echo $form->labelEx($billingShippingInfo,'address2_b'); ?>

			<?php echo $form->textField($billingShippingInfo,'address2_b'); ?>

			<?php echo $form->error($billingShippingInfo,'address2_b'); ?>

		</div>

		<div class="row">

			<?php echo $form->labelEx($billingShippingInfo,'city_b'); ?>

			<?php echo $form->textField($billingShippingInfo,'city_b'); ?>

			<?php echo $form->error($billingShippingInfo,'city_b'); ?>

		</div>

		<div class="row">

			<?php echo $form->labelEx($billingShippingInfo,'country_b'); ?>

			<?php echo $form->dropDownList($billingShippingInfo, 'country_b', CHtml::listData(Countries::model()->findAll(), 'ID', 'Country'),array('prompt' => '- Select Billing Country -','style'=>'width:205px;')); ?>

			<?php echo $form->error($billingShippingInfo,'country_b'); ?>

		</div>

		<div class="row">

			<?php echo $form->labelEx($billingShippingInfo,'state_b'); ?>

			<?php echo $form->textField($billingShippingInfo,'state_b'); ?>

			<?php echo $form->error($billingShippingInfo,'state_b'); ?>

		</div>

		<div class="row">

			<?php echo $form->labelEx($billingShippingInfo,'zip_b'); ?>

			<?php echo $form->textField($billingShippingInfo,'zip_b'); ?>

			<?php echo $form->error($billingShippingInfo,'zip_b'); ?>

		</div>

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

	</div>

	

	<div class="wide form" style=" float:left;">

	<h2>Shipping Information</h2>

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

		'id'=>'bill-shipp-form',

	)); ?>

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

		<div class="row">

			<?php echo $form->labelEx($billingShippingInfo,'first_name_s'); ?>

			<?php echo $form->textField($billingShippingInfo,'first_name_s'); ?>

			<?php echo $form->error($billingShippingInfo,'first_name_s'); ?>

		</div>

		<div class="row">

			<?php echo $form->labelEx($billingShippingInfo,'last_name_s'); ?>

			<?php echo $form->textField($billingShippingInfo,'last_name_s'); ?>

			<?php echo $form->error($billingShippingInfo,'last_name_s'); ?>

		</div>

		<div class="row">

			<?php echo $form->labelEx($billingShippingInfo,'company_s'); ?>

			<?php echo $form->textField($billingShippingInfo,'company_s'); ?>

			<?php echo $form->error($billingShippingInfo,'company_s'); ?>

		</div>

		<div class="row">

			<?php echo $form->labelEx($billingShippingInfo,'address1_s'); ?>

			<?php echo $form->textField($billingShippingInfo,'address1_s'); ?>

			<?php echo $form->error($billingShippingInfo,'address1_s'); ?>

		</div>

		<div class="row">

			<?php echo $form->labelEx($billingShippingInfo,'address2_s'); ?>

			<?php echo $form->textField($billingShippingInfo,'address2_s'); ?>

			<?php echo $form->error($billingShippingInfo,'address2_s'); ?>

		</div>

		<div class="row">

			<?php echo $form->labelEx($billingShippingInfo,'city_s'); ?>

			<?php echo $form->textField($billingShippingInfo,'city_s'); ?>

			<?php echo $form->error($billingShippingInfo,'city_s'); ?>

		</div>

		<div class="row" >

			<?php echo $form->labelEx($billingShippingInfo,'country_s'); ?>

			<?php echo $form->dropDownList($billingShippingInfo, 'country_s', CHtml::listData(Countries::model()->findAll(), 'ID', 'Country'),array('prompt' => '- Select Shipping Country -','style'=>'width:205px;')); ?>

			<?php echo $form->error($billingShippingInfo,'country_s'); ?>

		</div>

		<div class="row">

			<?php echo $form->labelEx($billingShippingInfo,'state_s'); ?>

			<?php echo $form->textField($billingShippingInfo,'state_s'); ?>

			<?php echo $form->error($billingShippingInfo,'state_s'); ?>

		</div>

		<div class="row">

			<?php echo $form->labelEx($billingShippingInfo,'zip_s'); ?>

			<?php echo $form->textField($billingShippingInfo,'zip_s'); ?>

			<?php echo $form->error($billingShippingInfo,'zip_s'); ?>

		</div>

	

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

</div>

</div>

Any idea…

2

How about use CJuiTabs to render mutiple views/models?

controller:




 $model1 = Model1::model()->findByPk(1);

 $model2 = Model2::model()->findByPk(2);

view:




$this->widget('zii.widgets.jui.CJuiTabs', array(

	'tabs'=>array(

		'type1'=>$this->renderPartial('_partial1',array('data' => $model1 ), True ),

		'type2'=>$this->renderPartial('_partial2',array('data' => $model2 ), True ),

	),

	'options'=>array(

		'collapsible'=>true,

	),

));

With JS you can simulate a wizard like view…

Hope it helps,

cbi

3

Thanks for reply,

Yes, that was first thing I thought to go with but, I am somehow bound to follow it this way.

Now I am stuck up with validating a form that was rendered using renderPartial.

4

Have you aleady solved the validation of the form, rendered using renderPartial? Because I’ve got the same problem at the moment ;-).

5

Basic use validation. I work for basic things.




En el Controlador:

-----------------


public  function actionSalvar(){

                

                $model= new Tbone;

                if(isset($_POST['Tbone'])){

                  $model->attributes=$_POST['Tbone'];

                  CActiveForm::validate($model);

                  echo 'hacer lo que os parece';

                 

                }

                

        }







En la vista:

------------


<div class="form">

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

    'id'=>'main-form',

    'enableAjaxValidation'=>false,

    'enableClientValidation'=>true,

    'clientOptions'=>array(

                'validateOnSubmit'=>true,

     ),

)); ?> 




    <?php

       $division1 = array(

       '0'=>$form->labelEx($model,'descCorta'), 

       '1'=>$form->textField($model,'descCorta',array('size'=>45,'maxlength'=>45)),

       '2'=>$form->error($model,'descCorta'),

       );

       $division2 = array(

       '0'=>$form->labelEx($model,'descLarga'), 

       '1'=>$form->textField($model,'descLarga',array('size'=>45,'maxlength'=>45)),

       '2'=>$form->error($model,'descLarga'),

       );

           

       $this->widget('zii.widgets.jui.CJuiTabs', array(

            'tabs'=>array(

                'Division 1' =>'<div class="row">'.$division1[0].$division1[1].$division1[2].'</div>',

                'Division 2' =>'<div class="row">'.$division2[0].$division2[1].$division2[2].'</div>',

            ),

            

            'options'=>array(

                'collapsible'=>true,

            ),

            ));

    ?>

    <?php echo CHtml::submitButton('Enviar',array('submit'=>array('EjPe/salvar'))); ?>

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

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