Html 表单（弹出）与 javascript 和烧瓶

Question

我正在尝试创建一个简单的 todo flask 应用程序。它与包含列 id、内容（任务）和状态（待办事项、进度、完成）的数据库链接。我添加了添加新任务、删除任务以及使用按钮更新其状态等功能。

我正在尝试通过弹出窗体添加“编辑任务”按钮。我混合使用了 html/css/javascript 来显示这个弹出窗口，它运行良好，但我遇到了 Jinja 调用的问题（见下文）。

在html中有一个for循环来显示所有的任务，每个任务旁边都有更新任务状态、编辑任务和删除它们的按钮（见下图）

这是html

{% for task in tasks %}
            <div class="flex-row">
                <p class="task">{{ task.content }}</p>

                <!--Update task status option-->
                <form action="{{ url_for('update_task_status', task_id=task.id) }}" method="POST">
                    <button type="submit" class="btn-{{ task.status }}">{{ task.status }}</button>
                </form>

                <!-- Edit task option-->
                <button class="btn-edit" onclick="openForm()"><i class="fa fa-edit"></i></button>
                <div class="form-popup" id="myForm">
                    <form action="{{ url_for('edit_task', task_id=task.id) }}" class="form-container" method="POST">
                        <label for="Task_edit"><b>Edit task</b></label>
                        <input type="text" value="{{ task.content }}" name="Task_edit" required>
                        <button type="submit" class="btn">Edit</button>
                        <button type="button" class="btn cancel" onclick="closeForm()">Close</button>
                    </form>
                </div>

                <!-- Delete task option-->
                <form action="{{ url_for('delete_task', task_id=task.id) }}" method="POST" onsubmit="return confirmDelete()">
                    <button type="submit" class="btn-delete"><i class="fa fa-trash"></i></button>
                </form>
            </div>
            <hr class="line">
{% endfor %}

Javascript:

function openForm() {
   document.getElementById("myForm").style.display = "block";
}

function closeForm() {
   document.getElementById("myForm").style.display = "none";
}

css:

/* The popup form - hidden by default */
.form-popup {
  display: none;
  ...
}

除“编辑任务选项”（html 中的部分）外，一切正常，其中 {{ task.id }} Jinja 调用确实仅指第一个任务，无论我单击的是什么编辑按钮上。

我不明白，因为它适用于删除按钮（点击任务 2 的删除按钮将给出 task.id = 2）。我怀疑 javascript 函数与 html 交互并阻止 Jinja 获得正确的任务 ID，我不知道如何解决这个问题？

我知道如何通过将 flask 路由到另一个 html 页面来执行此“编辑任务”选项，但我想使用此弹出表单来执行此操作。

有人能帮帮我吗？

非常感谢！

Answer 1

我认为您有多个具有相同 ID 的项目。您的 javascript 函数总是打开第一个命中。所以它总是第一个条目的形式。

我的建议是在标识中包含任务ID。那么每个元素都有一个唯一的id，可以唯一引用

<button onclick="openForm(event)" data-target="#form-{{ task.id }}"><i class="fa fa-edit"></i></button>
<div class="form-popup" id="form-{{ task.id }}">
  <form>
    <!-- ... -->
    <button type="button" onclick="closeForm(event)" data-dismiss=".form-popup">Close</button>
  </form>
</div>

function openForm(event) {
  const target = event.target.dataset.target;
  const elem = document.querySelector(target);
  elem && (elem.style.display = 'block');
}

function closeForm(event) {
  const target = event.target.dataset.dismiss;
  const elem = event.target.closest(target);
  elem && (elem.style.display = 'none');
}

Html 表单（弹出）与 javascript 和烧瓶

Html form (popup) with javascript and flask

html

javascript

forms

popup

flask