Django任务修改功能优化：点击按钮显示预填字段并编辑保存

需求说明 #

当前已实现点击按钮修改数据库记录的功能，需优化交互逻辑：

• 默认隐藏编辑输入框
• 点击「修改」按钮后，显示已填充当前任务内容的输入框
• 编辑完成后点击按钮保存修改，或取消编辑恢复初始状态

现有代码 #

today.html #

<title>Todoist</title>
<h1>Сегодня</h1>
<h2>Задачи</h2>
<form method="POST" action="{% url 'todoist:add' %}">{% csrf_token %}
  <input type="text" name='tasks' pattern=".{2,}" required title='Минимум два символа!!!'>
  <button type="submit" class="save btn btn-default">Добавить задачу</button>
</form>

{% for todo in todos%}
<div>
  <p>  {{todo.tasks}}</p>
  <a href="{% url 'todoist:delete' today_id=todo.id%}">Удалить</a>
  <form action="{% url 'todoist:update' today_id=todo.id%}" method="post"> {% csrf_token %}
    <input type="text" name='tasks'>
    <button type="submit" class="save btn btn-default">Изменить</button>
  </form>
</div>
{% endfor %}

views.py #

from django.shortcuts import render,redirect
from .models import Today
from django.views.decorators.http import require_http_methods


def index(request):
    todos = Today.objects.all()
    return render(request, 'today.html', {'todos':todos})

@require_http_methods(['POST'])
 def add(request):
     tasks = request.POST["tasks"]
     task = Today(tasks=tasks)
     task.save()
     return redirect('todoist:index')
                    
def delete(request, today_id):
    todo = Today.objects.get(id=today_id)
    todo.delete()
    return redirect('todoist:index')

def update(request, today_id):
    todo = Today.objects.get(id=today_id)
    todo.tasks = request.POST.get('tasks')
    todo.save()
    return redirect('todoist:index')

修改方案 #

前端调整（today.html） #

添加JavaScript控制显示/隐藏逻辑，同时优化界面文本为中文：

<title>Todoist</title>
<h1>今日</h1>
<h2>任务</h2>
<form method="POST" action="{% url 'todoist:add' %}">{% csrf_token %}
  <input type="text" name='tasks' pattern=".{2,}" required title='至少两个字符！！！'>
  <button type="submit" class="save btn btn-default">添加任务</button>
</form>

{% for todo in todos%}
<div class="task-item" data-task-id="{{todo.id}}">
  <p class="task-text">{{todo.tasks}}</p>
  <a href="{% url 'todoist:delete' today_id=todo.id%}">删除</a>
  <button class="edit-btn btn btn-default">修改</button>
  
  <!-- 编辑表单默认隐藏 -->
  <form class="edit-form" action="{% url 'todoist:update' today_id=todo.id%}" method="post" style="display: none;"> {% csrf_token %}
    <input type="text" name='tasks' value="{{todo.tasks}}">
    <button type="submit" class="save btn btn-default">保存修改</button>
    <button type="button" class="cancel-btn btn btn-default">取消</button>
  </form>
</div>
{% endfor %}

<script>
// 绑定修改按钮点击事件
document.querySelectorAll('.edit-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    const taskItem = this.closest('.task-item');
    // 切换显示状态：隐藏文本和修改按钮，显示编辑表单
    taskItem.querySelector('.task-text').style.display = 'none';
    taskItem.querySelector('.edit-form').style.display = 'block';
    this.style.display = 'none';
  });
});

// 绑定取消按钮点击事件
document.querySelectorAll('.cancel-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    const taskItem = this.closest('.task-item');
    // 恢复初始显示状态
    taskItem.querySelector('.task-text').style.display = 'block';
    taskItem.querySelector('.edit-form').style.display = 'none';
    taskItem.querySelector('.edit-btn').style.display = 'block';
  });
});
</script>

核心逻辑：

• 给每个任务项添加唯一标识data-task-id，方便DOM元素定位
• 默认隐藏编辑表单，点击「修改」按钮时触发显示，并自动填充当前任务内容
• 新增「取消」按钮，点击后恢复任务文本和修改按钮的显示，隐藏编辑表单

后端调整（views.py） #

后端代码无需修改，现有update视图已能正确接收POST参数并更新数据库记录。

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