在开发过程中,有时我们希望表单能够在不破坏页面布局的情况下,能够被用户在需要时轻松触发。例如,一个弹出式的登录表单或者联系表单。在Yii2框架中,我们可以通过CSS和JavaScript来实现这一功能。以下,我将通过一个实战案例,详细讲解如何在Yii2中巧妙隐藏表单并成功提交。
前言
在开始之前,我们先来了解一下本次实战案例的需求:
- 我们需要创建一个登录表单,该表单默认是隐藏的。
- 用户点击登录按钮时,表单将显示。
- 表单提交后,进行验证,并将结果反馈给用户。
准备工作
首先,我们需要在Yii2项目中创建一个控制器(Controller),用于处理登录请求。接着,创建一个视图(View),用于显示登录表单。
创建控制器
- 在控制器目录下,创建一个名为
LoginController.php的文件。
namespace app\controllers;
use Yii;
use app\models\LoginForm;
class LoginController extends \yii\web\Controller
{
public function actionIndex()
{
if (!Yii::$app->user->isGuest) {
return $this->goHome();
}
$model = new LoginForm();
if ($model->load(Yii::$app->request->post()) && $model->login()) {
return $this->goBack();
}
return $this->render('index', [
'model' => $model,
]);
}
}
创建视图
- 在
views/login目录下,创建一个名为index.php的文件。
<?php
use yii\widgets\ActiveForm;
use app\models\LoginForm;
/* @var $this yii\web\View */
/* @var $model LoginForm */
?>
<div class="login-form">
<?php $form = ActiveForm::begin(['id' => 'login-form']); ?>
<h2>登录</h2>
<?= $form->field($model, 'username')->textInput() ?>
<?= $form->field($model, 'password')->passwordInput() ?>
<?= $form->field($model, 'rememberMe')->checkbox() ?>
<div class="form-group">
<button type="submit" class="login-btn">登录</button>
</div>
<?php ActiveForm::end(); ?>
</div>
实现隐藏表单
现在,我们已经创建了一个基本的登录表单。接下来,我们将通过CSS和JavaScript来隐藏和显示表单。
- 在
views/login目录下,创建一个名为login.css的文件。
.login-form {
display: none;
}
- 在
views/login目录下,创建一个名为login.js的文件。
document.addEventListener('DOMContentLoaded', function() {
var loginBtn = document.querySelector('.login-btn');
var loginForm = document.querySelector('.login-form');
loginBtn.addEventListener('click', function() {
loginForm.style.display = 'block';
});
});
- 修改
index.php文件,引入CSS和JavaScript文件。
<?php $this->head() ?>
<link rel="stylesheet" href="<?= Yii::$app->assetManager->getBundle('app\assets\LoginAsset')->baseUrl; ?>/css/login.css">
<script src="<?= Yii::$app->assetManager->getBundle('app\assets\LoginAsset')->baseUrl; ?>/js/login.js"></script>
<?php $this->end() ?>
测试效果
现在,我们可以在浏览器中访问登录页面,点击登录按钮后,登录表单将会显示。
总结
通过本篇文章,我们学习了如何在Yii2框架中巧妙隐藏表单并成功提交。在实际开发过程中,我们可以根据需求,灵活运用CSS和JavaScript来实现更多有趣的功能。希望这篇文章能够对您有所帮助。
