I have a login page with the login form in place. This works awesome.
The client requested to have the Registration form open in a model, so I used fancybox to display the form in the modal.
The client also requested that the registration form to be completed in 2 steps, so I added another fancybox which should be activated once the user completes the first step of the registration. For future reference there are: login form, registration form stage1, and stage2.
The problem and questions are:
-
The stage 1 ajax validation works, but the Submit button of the stage1 doesn’t trigger nothing at all. How can I get the submit button to work, and to submit the registration form only?
-
How can I detect that if stage1 validation is ok, to activate the second fancybox, so to display stage 2 of the registration?
As you will see in the view, there is a submit button id=next that is the cause of the problems, as when I hit that, it doesn’t submit the form.
When that is pressed I need to validate the form, and if true, to move forward to the next fancybox.
public function actionLogin() {
$model = new LoginForm; // instance of CFormModel
$modelReg = new RegistrationForm; // instance of CFormModel
$modelReg->scenario="stage1";
// if it is ajax validation request
if (isset($_POST['ajax']) && $_POST['ajax'] === 'login-form') {
echo CActiveForm::validate($model);
Yii::app()->end();
}
// if it is ajax validation request
if (isset($_POST['ajax']) && $_POST['ajax'] === 'registration-form') {
echo CActiveForm::validate($modelReg);
Yii::app()->end();
}
// collect user input data
if (isset($_POST['LoginForm'])) {
$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);
}
// collect user input data
if (isset($_POST['RegistrationForm'])) {
$model->attributes = $_POST['RegistrationForm'];
// validate user input and redirect to the previous page if valid
if ($model->validate() && $model->register())
$this->redirect(Yii::app()->user->returnUrl);
}
// display the login form
$this->render('login', array('model' => $model, 'modelReg'=>$modelReg));
}
The view:
<?php
$this->pageTitle = Yii::app()->name . ' - ' . Yii::t('user', 'Login');
$this->breadcrumbs = array(
Yii::t('user', 'Login'),
);
?>
<div class="content-inner">
<h1><?= Yii::t('user', 'Login'); ?></h1>
<p><?= Yii::t('user', "Welcome back to the {appname}'s residential water efficiency program. Please login to continue.", array('{appname}' => Yii::app()->name)); ?></p>
<?php
$form = $this->beginWidget('CActiveForm', array(
'id' => 'login-form',
'enableAjaxValidation' => true,
));
?>
<div id="loginbox">
<div class="loginbox_content">
<div class="form_row">
<?= $form->labelEx($model, 'email'); ?>
<?= $form->textField($model, 'email'); ?>
<?= $form->error($model, 'email'); ?>
</div>
<div class="form_row">
<?= $form->labelEx($model, 'password'); ?>
<?= $form->passwordField($model, 'password'); ?>
<?= $form->error($model, 'password'); ?>
</div>
<div class="form_row rememberMe">
<?php echo $form->checkBox($model, 'rememberMe'); ?>
<?php echo $form->label($model, 'rememberMe'); ?>
<?php echo $form->error($model, 'rememberMe'); ?>
</div>
<div class="button_hldr">
<input type="submit" id="loginbutton" value="" />
<a style="text-decoration: none;" href="#inline1" id="various1">
<font size="4" color="#726e6d"><b>Register</b></font></a>
</div>
</div>
</div>
<?php $this->endWidget(); ?>
<p><?= Yii::t('user', "You must have registered to login. If you haven't registered, {clickhere} to register.", array('{clickhere}' => CHtml::link('click here', array('/authorize/registration')))); ?></p>
<p><?= Yii::t('user', "Forgotten your password? {clickhere} to retrieve it.", array('{clickhere}' => CHtml::link('Click here', array('/authorize/forgottenpassword')))); ?></p>
</div>
<?php
$this->widget('application.extensions.fancybox.EFancyBox', array(
'target' => '#various1',
'name' => 'various1',
'config' => array(
'scrolling' => 'yes',
'titleShow' => true,
),
)
);
?>
<?php
$this->widget('application.extensions.fancybox.EFancyBox', array(
'target' => '#various2',
'name' => 'various2',
'config' => array(
'scrolling' => 'yes',
'titleShow' => true,
),
)
);
?>
<?php
$form2 = $this->beginWidget('CActiveForm', array(
'id' => 'registration-form',
//'name' => 'nd',
'htmlOptions'=> array('onSubmit' => 'return true;','name'=>'b23'),
'enableAjaxValidation' => true,
));
?>
<div style="display:none ;">
<div id="inline1" style="width:400px;height:450px;overflow:auto;">
<img src="title.png" width="400" /> <br/>
<br/>
<table>
<tr>
<td width= "7%"> </td>
<td width="83%"><font color="#C24641" size="4"><b>Welcome to City of Cotati's</b></font><br/>
<font color="#747170" size="2pt"><br/>
Residential Water Efficiency Program.
Please enter the registration code and the zipcode of the service address in the boxes below.</font><br/>
<br/>
<div style="background-image: url('inputbox.PNG'); background-repeat: no-repeat;min-height:300px; min-width:100px;">
<div style="min-height:15px"></div>
<font color="#C24641" size="3"><b><?= $form2->labelEx($modelReg, 'registration_code'); ?></b></font> <br/>
<?= $form2->textField($modelReg, 'registration_code'); ?> <?= $form2->error($modelReg, 'registration_code'); ?>
<div style="min-height:10px"></div>
<font color="#C24641" size="3"><b><?= $form2->labelEx($modelReg, 'zipcode'); ?></b></font> <br/>
<?= $form2->textField($modelReg, 'zipcode'); ?> <?= $form2->error($modelReg, 'zipcode'); ?>
<br/>
<br/>
<table>
<tr>
<td></td>
<td width="20%"> </td>
<td><input id="next" type="submit" value="Next" /></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div></div>
<div style="display: none;">
<div id="inline2" style="width:400px;height:900px;overflow:auto;">
<img src="title.png" width="400" /> <br/>
<br/>
<table>
<tr>
<td width= "7%"> </td>
<td width="83%"><font color="#C24641" size="4"><b>Registration Process</b></font><br/>
<font color="#000000" size="2pt"><br/>
<b>Please enter your email address and password.</b></font><font color="#747170" size="2pt"> You will use this next time you log in. We will never sell or give away your email address to a third party.</font><br/>
<br/>
<div style="background-image: url('inputbox.PNG'); background-repeat: no-repeat;min-height:250px; min-width:100px;">
<div style="min-height:15px"></div>
<font color="#C24641" size="2"><b><?= $form2->labelEx($modelReg, 'email'); ?></b></font> <br/>
<?= $form2->textField($modelReg, 'email'); ?> <?= $form2->error($modelReg, 'email'); ?>
<div style="min-height:10px"></div>
<font color="#C24641" size="2"><b><?= $form2->labelEx($modelReg, 'password'); ?></b></font> <br/>
<?= $form2->passwordField($modelReg, 'password'); ?> <?= $form2->error($modelReg, 'password'); ?>
<div style="min-height:9px"></div>
<font color="#C24641" size="2"><b><?= $form2->labelEx($modelReg, 'password2'); ?></b></font> <br/><?= $form2->passwordField($modelReg, 'password2'); ?> <?= $form2->error($modelReg, 'password2'); ?>
<br/>
<br/>
<font color="#000000" size="2pt"><br/>
<b>Please confirm the following details about where you live.</b></font><br/>
<font color="#747170" size="2pt"> You will use this next time you log in. We will never sell or give away your email address to a third party.</font><br/>
<br/>
<div style="background-image: url('inputbox4.PNG'); background-repeat: no-repeat;min-height:136px; min-width:100px;">
<div style="min-height:15px"></div>
<font color="#C24641" size="2"><b><?= $form2->labelEx($modelReg, 'residence_address'); ?></b></font><br/>
<?= $form2->textField($modelReg, 'residence_address'); ?> <?= $form2->error($modelReg, 'residence_address'); ?>
<div style="min-height:15px"></div>
<table border="0" width="100%">
<tr>
<td width="1%"> </td>
<td width="64%"><font color="#C24641" size="2"><b><?= $form2->labelEx($modelReg, 'residence_occupant_no'); ?></b></font></td>
<td width="35%">
<?php
$fa = array('1' => '1', '2' => '2', '3' => '3', '4' => '4', '5' => '5', '6' => '6', '7' => '7', '8' => '8', '9' => '9', '10' => '10', '11' => '11+');
$ld = CHtml::listData($fa, 'grp_residents', 'grp_residents');
echo $form2->DropDownList($modelReg, 'residence_occupant_no', $fa);
?>
<?php echo $form2->error($modelReg, 'residence_occupant_no'); ?>
</td>
</tr>
</table>
</div>
<font color="#000000" size="2pt"><br/>
<b>Terms and Conditions </b></font><br/>
<textarea cols="40" rows="4"></textarea>
<br/>
<br/>
<div style="background-image: url('inputbox5.PNG'); background-repeat: no-repeat;min-height:112px; min-width:100px;">
<br/>
<font color="#C24641" size="2"><b><?php echo $form2->checkBox($modelReg, 'accepted_terms'); ?><?= $form2->labelEx($modelReg, 'accepted_terms'); ?><?php echo $form2->error($modelReg, 'accepted_terms'); ?></b></font><br/>
<br/>
<center>
<a href="complete.html"><img src="nextbutton.png" style="text-decoration:none;border:none;" height="30" width="80"/></a>
</center>
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
<?php $this->endWidget(); ?>
Don’t worry, everyone does that 
Screwed up the formatting :|[/color][/color][/size][/color][/color][/size][/color][/color][/size]