Django for循环模板中如何实现按钮点击打开联系表单弹窗

你当前代码已经使用了Bootstrap组件类，优先用Bootstrap自带的模态框实现弹出效果，不需要额外引入第三方库，步骤如下：

步骤1：修改循环内的Contact按钮 #

给每个按钮绑定唯一对应的模态框标识，用遍历数据的主键ID区分不同卡片的模态框，避免冲突：

{% for dat in placeddata %}
  <div class="col-sm">
<div class="card" style="width: 18rem;">
  <img src="{{dat.student.profileimg}}" width="250px" height="250px" class="card-img-top">
  <div class="card-body">
    <h5 class="card-title">{{dat.student.user.get_full_name}}</h5>
    <p class="card-text">Has been placed in {{dat.company.Comp_name}} Company.</p>
    <img width="50px" class="img-fluid" src="{{dat.company.profileimg}}">

    <!-- 修改后的Contact按钮，Bootstrap5用data-bs前缀，Bootstrap4去掉bs即可 -->
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#contactModal{{ dat.id }}">
      Contact
    </button>
  </div>
</div>
    </div>
<!-- 每个卡片对应一个独立模态框，放在循环内即可 -->
<div class="modal fade" id="contactModal{{ dat.id }}" tabindex="-1" aria-labelledby="contactModalLabel{{ dat.id }}" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="contactModalLabel{{ dat.id }}">联系 {{ dat.student.user.get_full_name }}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form method="post" action="{% url 'submit_contact' %}">
        {% csrf_token %}
        <div class="modal-body">
          <!-- 隐藏域传递当前联系的学生ID，后端可以直接获取 -->
          <input type="hidden" name="student_id" value="{{ dat.student.id }}">
          <div class="mb-3">
            <label for="your_name{{ dat.id }}" class="form-label">你的姓名</label>
            <input type="text" class="form-control" id="your_name{{ dat.id }}" name="your_name" required>
          </div>
          <div class="mb-3">
            <label for="your_contact{{ dat.id }}" class="form-label">你的联系方式</label>
            <input type="text" class="form-control" id="your_contact{{ dat.id }}" name="your_contact" required>
          </div>
          <div class="mb-3">
            <label for="message{{ dat.id }}" class="form-label">留言内容</label>
            <textarea class="form-control" id="message{{ dat.id }}" name="message" rows="3" required></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
          <button type="submit" class="btn btn-primary">提交</button>
        </div>
      </form>
    </div>
  </div>
</div>
{% endfor %}

步骤2：配置Django后端处理表单提交 #

新增路由（urls.py） #

urlpatterns = [
    # 其他原有路由
    path('submit-contact/', views.submit_contact, name='submit_contact'),
]

新增视图处理函数（views.py） #

from django.shortcuts import redirect, get_object_or_404
from django.contrib import messages
from .models import Student

def submit_contact(request):
    if request.method == 'POST':
        student_id = request.POST.get('student_id')
        student = get_object_or_404(Student, id=student_id)
        your_name = request.POST.get('your_name')
        your_contact = request.POST.get('your_contact')
        message = request.POST.get('message')
        
        # 这里添加你的业务逻辑：比如存数据库、给学生发邮件、发短信通知等
        # 示例：打印日志，实际开发替换为自己的逻辑即可
        print(f"收到对{student.user.get_full_name()}的联系请求：姓名{your_name}，联系方式{your_contact}，留言{message}")
        
        messages.success(request, '联系请求已提交，对方会尽快回复你')
    return redirect(request.META.get('HTTP_REFERER', '/'))

如果你用的是Bootstrap4版本，只需要把代码里所有data-bs-前缀替换为data-，btn-close替换为对应版本的关闭按钮类即可生效。

内容的提问来源于stack exchange，提问作者Pramath Naik