Django编辑数据时表单无法显示数据库已有数据求助

AI 小北

2026-8-19

Django Bootstrap Modal编辑表单无法显示用户数据问题

我用Django搭建网站，Bootstrap Modal组件的新增、删除功能都正常，但执行编辑操作时，Django表单无法显示数据库中存储的用户数据。附上相关代码，恳请帮忙解决。

HTML代码

<!-- Table Header  -->
<thead>
    <tr>
        <th>User ID</th>
        <th>Username</th>
        <th>First Name</th>
        <th>Middle Name</th>
        <th>Last Name</th>
        <th>Role</th>
        <th>Created Date</th>
        <th>Modified Date</th>
        <th>Status</th>
        <th>Settings</th>
    </tr>
</thead>

<!-- Table Body  -->
<tbody>
    {% for members in member %}

    <tr>
        <td>{{members.id}}</td>
        <td>{{members.username}}</td>
        <td>{{members.first_name}}</td>
        <td>{{members.middle_name}}</td>
        <td>{{members.last_name}}</td>
        <td>{% if members.role %}{{members.get_role}}{% endif %}</td>
        <td>{{members.created_date}}</td>
        <td>{{members.modified_date}}</td>
        <td>
            {% if members.status == 1 %}
            <button type="button"
                class="btn btn-success rounded-pill">{{members.get_status}}</button>
            {% elif members.status == 2 %}
            <button type="button"
                class="btn btn-danger rounded-pill">{{members.get_status}}</button>
            {% elif members.status == 3 %}
            <button type="button"
                class="btn btn-secondary rounded-pill">{{members.get_status}}</button>
            {% endif %}
        </td>
        <td>
            <a href="#" data-toggle="modal" data-target="#viewUserModal{{ members.id }}"><i class='bx bxs-folder-open'
                data-toggle="tooltip" title="View"></i></a>
            <a href="#" data-toggle="modal" data-target="#editUserModal{{ members.id }}"><i class='bx bxs-edit'
                    data-toggle="tooltip" title="Edit"></i></a>
            
            <a href="#" data-toggle="modal" data-target="#deleteModal{{ members.id }}"><i class='bx bx-trash'
                    data-toggle="tooltip" title="Delete" ></i></a>
                    
        </td>
    </tr>

    {% include 'includes/modals.html' %}  

   {% endfor %}
</tbody>
<!-- End of Table Body  -->

</table>
</div>

编辑Modal代码

<div class="modal fade" id="editUserModal{{ members.id }}" role="dialog">
<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
        <h4 class="modal-title">Edit User Account</h4>
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
            <i class="fa-solid fa-xmark"></i>
        </button>
    </div>
    <div class="modal-body">
      <form action="" method="POST">
        {% csrf_token %}
        <div class="form-group ">
            <label>First Name</label>
            {{form.first_name}}
        </div>
        <div class="form-group">
            <label>Middle Name</label>
            {{form.middle_name}}
        </div>
        <div class="form-group">
            <label>Last Name</label>
            {{form.last_name}}
        </div>
        <div class="form-group">
            <label>Email</label>
            {{form.email}}
        </div>
        <div class="form-group">
            <label>Mobile Number</label>
            {{form.mobile_number}}
        </div>
        <div class="form-group">
            <label>Username</label>
            {{form.username}}
        </div>
        <div class="form-group">
            <label>Role</label>
            <select class="form-control" id="inputGroupSelect01" name="role" value="{% if members.role %}{{members.get_role}}{% endif %}" required>
                <option>Select Role</option>
                <option value="2" {% if members.role == 1 %}{{members.get_role}} selected {% endif %} >Member</option>
                <option value="2" {% if members.role == 2 %}{{members.get_role}} selected {% endif %} >Admin</option>
                <option value="3" {% if members.role == 3 %}{{members.get_role}} selected {% endif %}>Super Admin</option>
            </select>
          </div>
          <div class="form-group">
            <label>Status</label>
            <select class="form-control" id="inputGroupSelect01" name="role" value="{% if members.status %}{{members.get_status}}{% endif %}" required>
                <option>Select Status</option>
                <option value="1" {% if members.status == 1 %}{{members.get_status}} selected {% endif %} >Active</option>
                <option value="2" {% if members.status == 2 %}{{members.get_status}} selected {% endif %}>Deactive</option>
            </select>
          </div>
          <hr>
          <input type="button" class="btn btn-secondary" data-dismiss="modal" value="Cancel">
        <input type="submit" class="btn btn-primary" href="{% url 'edit_user' members.id %}" value="Save">
      </form>
    </div>
  </div>
</div>
</div>

urls.py代码

urlpatterns = [
    path('userAccounts/edit_user/<user_id>', views.edit_user, name='edit_user'),
]

forms.py代码

class UserFormAdmin(forms.ModelForm):
    class Meta:
        model = User
        fields = ['first_name', 'middle_name', 'last_name', 'username', 'email', 'mobile_number', 'password']
        labels = {
            'first_name': '',
            'middle_name': '',
            'last_name': '',
            'mobile_number': '',
            'email': '',
            'username': '',
            'password': '',
            'confirm_password': '',
        }

    first_name = forms.CharField(widget=forms.TextInput(attrs={'placeholder': 'Jones', 'class': 'form-control', }))
    middle_name = forms.CharField(widget=forms.TextInput(attrs={'placeholder': 'A', 'class': 'form-control', }))
    last_name = forms.CharField(widget=forms.TextInput(attrs={'placeholder': 'Smith', 'class': 'form-control',}))
    mobile_number = forms.CharField(max_length=15, validators=[RegexValidator(
        '^\+[0-9]{1,3}\.?\s?\d{8,13}', message="Phone number must not consist of space and requires country code. eg : +639171234567")],widget=forms.TextInput(attrs={'placeholder': '09123456789', 'class': 'form-control',}),
                                    error_messages={'unique': ("Mobile Number already exists.")})

    email = forms.CharField(widget=forms.TextInput(attrs={'placeholder': 'jonesmith@gmail.com', 'class': 'form-control',}),
                            error_messages={'unique': ("Email already exists.")},)
    username = forms.CharField(widget=forms.TextInput(attrs={'placeholder': 'Jones_Smith31', 'class': 'form-control',}),
                               error_messages={'unique': ("Username already exists.")},)
    password = forms.CharField(widget=forms.PasswordInput(attrs={'placeholder': '********', 'class': 'form-control',}))
    #password = forms.CharField(validators=[MinLengthValidator(8),RegexValidator('^(?=.*[A-Z])(?=.*[!@#$&*])(?=.*[0-9])(?=.*[a-z])$', message="Password should be a combination of Alphabets and Numbers")], widget=forms.PasswordInput(attrs={'placeholder': '********', 'style': 'width: 460px; '}))
    confirm_password = forms.CharField(widget=forms.PasswordInput(attrs={'placeholder': '********', 'class': 'form-control', }))

views.py代码

def sa_userAccount_admin(request):
    member = User.objects.filter(role = 2)
    form = UserFormAdmin(request.POST)
    context = {
        'form': form,
        'member': member,
    }
    print(context)
    return render(request, 'pages/sa_userAccount.html', context)

def edit_user(request, user_id):
    member = User.objects.get(pk=user_id)
    form = UserFormAdmin(request.POST or None, instance=member)
    if form.is_valid():
        form.save()
        return redirect('sa_userAccount')
    return render(request, 'pages/sa_userAccount.html', 
        {'members': member,
        'form':form})

问题修复方案

1. 视图层错误修复

列表页视图：sa_userAccount_admin中，form = UserFormAdmin(request.POST)会在GET请求时创建空表单，导致所有编辑Modal共用这个空表单。修改为为每个用户创建绑定实例的表单：

def sa_userAccount_admin(request):
    members = User.objects.filter(role=2)
    # 为每个用户生成绑定实例的表单
    member_forms = [(member, UserFormAdmin(instance=member)) for member in members]
    context = {
        'member_forms': member_forms,
    }
    return render(request, 'pages/sa_userAccount.html', context)

模板循环改为{% for member, form in member_forms %}，确保每个Modal使用对应用户的表单。

2. Modal表单action与提交按钮修复

编辑Modal的form添加action属性：<form action="{% url 'edit_user' member.id %}" method="POST">
移除提交按钮的href属性，改为：<input type="submit" class="btn btn-primary" value="Save">

3. 下拉框错误修复

角色下拉框：修正value值和selected逻辑，比如：

<select class="form-control" id="inputGroupSelect01" name="role" required>
    <option>Select Role</option>
    <option value="1" {% if member.role == 1 %}selected{% endif %}>Member</option>
    <option value="2" {% if member.role == 2 %}selected{% endif %}>Admin</option>
    <option value="3" {% if member.role == 3 %}selected{% endif %}>Super Admin</option>
</select>

状态下拉框：修正name属性为status，修正selected逻辑：

<select class="form-control" id="inputGroupSelect01" name="status" required>
    <option>Select Status</option>
    <option value="1" {% if member.status == 1 %}selected{% endif %}>Active</option>
    <option value="2" {% if member.status == 2 %}selected{% endif %}>Deactive</option>
</select>

4. 表单字段修复

UserFormAdmin中，confirm_password未加入Meta的fields列表，要么将其加入fields，要么在clean方法中处理密码确认逻辑，避免验证错误。

5. 编辑视图优化

edit_user视图提交成功后，确保重定向的sa_userAccount是正确的URL名称；如果需要在编辑后停留在列表页，当前逻辑没问题，但要确保模板能正确渲染。

内容的提问来源于stack exchange，提问作者KIM CHAN

Django编辑数据时表单无法显示数据库已有数据求助

HTML代码 #

编辑Modal代码 #

urls.py代码 #

forms.py代码 #

views.py代码 #

问题修复方案 #