如何构建一个用户类型下拉列表框并将其输入到不同的表中

2024-03-19 09:05:35

在 Laravel 中构建用户类型下拉列表框并将其输入到不同的表中

概述

在 Laravel 中构建用户类型下拉列表框并将其输入到不同的表中是一个常见的任务。本文将一步步指导你完成这个过程，优化你的代码，提高性能。

创建下拉列表框

首先，在你的视图中创建一个下拉列表框，允许用户选择他们的类型：

<div>
    <label for="user_type">用户类型：</label>
    <select name="user_type" id="user_type" required>
        <option value="">选择用户类型</option>
        <option value="lecturer">讲师</option>
        <option value="student">学生</option>
    </select>
</div>

创建隐藏字段

根据选定的用户类型动态显示和隐藏特定的字段。为此，创建一些隐藏字段，每个字段对应于不同类型的附加信息：

<div id="lecturerFields" style="display: none;">
    <label for="name">姓名：</label>
    <input type="text" name="name" required>

    <label for="email">邮箱：</label>
    <input type="email" name="email" required>

    <label for="department">部门：</label>
    <input type="text" name="department" required>

    <label for="faculty">学院：</label>
    <input type="text" name="faculty" required>
</div>

<div id="studentFields" style="display: none;">
    <label for="name">姓名：</label>
    <input type="text" name="name" required>

    <label for="email">邮箱：</label>
    <input type="email" name="email" required>

    <label for="id">学号：</label>
    <input type="text" name="id" required>

    <label for="level">年级：</label>
    <input type="text" name="level" required>

    <label for="department">部门：</label>
    <input type="text" name="department" required>
</div>

添加 JavaScript

使用 JavaScript 根据选定的用户类型动态显示和隐藏相应字段：

<script>
document.getElementById('user_type').addEventListener('change', function() {
    var userType = this.value;
    if (userType === 'lecturer') {
        document.getElementById('lecturerFields').style.display = 'block';
        document.getElementById('studentFields').style.display = 'none';
    } else if (userType === 'student') {
        document.getElementById('lecturerFields').style.display = 'none';
        document.getElementById('studentFields').style.display = 'block';
    } else {
        document.getElementById('lecturerFields').style.display = 'none';
        document.getElementById('studentFields').style.display = 'none';
    }
});
</script>

优化控制器

在控制器中，处理表单提交并根据选定的用户类型将数据插入到相应的表中：

public function store(Request $request)
{
    $userType = $request->input('user_type');

    if ($userType === 'lecturer') {
        Lecturer::create([
            'name' => $request->input('name'),
            'email' => $request->input('email'),
            'department' => $request->input('department'),
            'faculty' => $request->input('faculty'),
        ]);
    } elseif ($userType === 'student') {
        Student::create([
            'name' => $request->input('name'),
            'email' => $request->input('email'),
            'id' => $request->input('id'),
            'level' => $request->input('level'),
            'department' => $request->input('department'),
        ]);
    }

    return redirect()->route('home')->with('success', '用户类型添加成功！');
}