Question

我已经在Bootstrap模式下创建了一个表单，我的目标是在该模式下提交表单并关闭该模式，然后使用确认消息显示第二个模式。

当前，该表单正在提交，数据正被发布到数据库中的正确表中，并且其中包含该表单的模式正在关闭，但是在第一个模式关闭后第二个模式没有出现，我无法弄清楚为什么。

我正在使用Python Flask和Jinja2和Bootstrap版本4.3.1和一个SQLite数据库。

这是我的模态代码，其中包含表单：

{% for section in sections %}
  <div class="modal fade" id="classInfoModal{{ section.crn }}" tabindex="-1" role="dialog" aria- 
   hidden="true">
      <div class="modal-dialog" role="document">
        <div id="class-sections-modal-content" class="modal-content">
          <form action="#" method="POST" role="form" id="addCourseForm">
            <div id="class-sections-modal-body" class="modal-body">
              <p id="class-sections-modal-text">
                Course: {{ section.course_id }}<br>
                Title: {{ section.course_title }}<br>
                <input type="hidden" name="course_crn" value= "{{ section.crn }}" />
                CRN: {{ section.crn }}<br>
                Sect: {{ section.section_num }}<br>
                Instructor: {{ section.professor_name }}<br>
                <input type="hidden" name="course_semester" value= "{{ section.semester }}" />
                Semester: {{ section.semester }}<br>
                Days: {{ section.day }}<br>
                Time: {{ section.start_time }} - {{ section.end_time }}<br>
              </p>
            </div>
            <div id="class-sections-modal-footer" class="modal-footer">
              <input type="submit" id="class-info-modal-button-add" class="btn class-sections-modal-button" data-toggle="modal" data-target="#classAddedModal" value="ADD">
              <button type="button" id="class-info-modal-button-cancel" class="btn class-sections-modal-button" data-dismiss="modal">CANCEL</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  <!--modal end-->
{% endfor %}

这是第二种模式的代码：

  <div class="modal fade" id="classAddedModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div id="class-sections-modal-content" class="modal-content">
        <div id="class-sections-modal-body" class="modal-body">
          <p id="class-sections-modal-text">
          Course successfully added!
          </p>
        </div>
        <div id="class-sections-modal-footer" class="modal-footer">
          <button type="button" id="class-added-modal-button-close" class="btn class-sections-modal-button" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

应该在用户单击第一个模式窗口中的“提交”按钮后显示classAddedModal。我也尝试过将“提交”按钮从输入字段更改为按钮，但这也不起作用。

有人知道为什么classAddedModal无法打开吗？

谢谢。

在Bootstrap模式下提交表单不会打开第二个模式

0 个答案: