英文:
HTML form keep sending the same data to the flask even the values are changed
问题
您的HTML和Flask代码中存在一个问题，导致只有第一行的更新按钮有效，并且发送的数据是第一行的数据。
问题是在HTML代码中，您在<form>标签内包裹了整个表格，但每一行都包含一个<form>标签，这可能导致表单数据混淆。您应该将<form>标签放在每一行的外部，以便每一行都有自己的表单。请修改您的HTML代码如下：
<table contenteditable>
<thead>
<tr>
<th contenteditable="false">ID</th>
<th contenteditable="false">Title</th>
<th contenteditable="false">Description</th>
<th contenteditable="false">Status</th>
<th contenteditable="false">Deadline</th>
<th contenteditable="false">Due Date</th>
<th contenteditable="false">Task Type</th>
<th contenteditable="false">Update</th>
</tr>
</thead>
<tbody>
{% for task in data %}
<tr>
<form action="/tasks" method="POST">
<td><input type="text" name="id" class="form-control" id="id" contenteditable="false" value="{{ task.id }}" readonly></td>
<td><input class="form-control" type="text" id="title" name="title_{{ task.id }}" value="{{ task.title }}"></td>
<td><input class="form-control" type="text" id="description" name="description_{{ task.id }}" value="{{ task.description }}"></td>
<td><input class="form-control" name="status_{{ task.id }}" id="status" value="{{ task.status }}" readonly></td>
<td><input class="form-control" type="text" id="creation_time" name="creation_time_{{ task.id }}" value="{{ task.creation_time }}"></td>
<td><input class="form-control" type="text" id="deadline" name="deadline_{{ task.id }}" value="{{ task.deadline }}"></td>
<td><input class="form-control" type="text" id="task_type" name="task_type_{{ task.id }}" value="{{ task.task_type }}"></td>
<td>
<button type="submit">Update Row</button>
</td>
</form>
</tr>
{% endfor %}
</tbody>
</table>
这将确保每一行都有自己的表单，以便数据不会混淆。希望这可以解决您的问题。
英文:
I am trying to code todo app in HTML and Flask. I tried to send dynamic table values to Flask with HTML but my HTML page keeps sending the same data even though the values are changed here is my code.
<form action="/tasks" method="POST">
<table contenteditable>
<thead>
<tr>
<th contenteditable="false">ID</th>
<th contenteditable="false">Title</th>
<th contenteditable="false">Description</th>
<th contenteditable="false">Status</th>
<th contenteditable="false">Deadline</th>
<th contenteditable="false">Due Date</th>
<th contenteditable="false">Task Type</th>
<th contenteditable="false">Update</th>
</tr>
</thead>
<tbody>
{% for task in data %}
<tr>
<td><input type="text" name = "id" class = "form-control" id = "id" contenteditable = "false" value="{{ task.id }}" readonly></td>
<td><input class = "form-control" type="text" id="title" name="title_{{ task.id }}" value="{{ task.title }}"></td>
<td><input class = "form-control" type="text" id="description" name="description_{{ task.id }}" value="{{ task.description }}"></td>
<td><input class = "form-control" name ="status_{{ task.id }}" id = "status" value="{{ task.status }}" readonly></td>
<td><input class = "form-control" type="text" id="creation_time" name="creation_time_{{ task.id }}" value="{{ task.creation_time }}"></td>
<td><input class = "form-control" type="text" id="deadline" name="deadline_{{ task.id }}" value="{{ task.deadline }}"></td>
<td><input class = "form-control" type="text" id="task_type" name="task_type_{{ task.id }}" value="{{ task.task_type }}"></td>
<td>
<button type="submit">Update Row</button>
</form>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</form>
Here is my flask code
title = request.form.get(f'title_{task_id}')
description = request.form.get(f'description_{task_id}')
status = request.form.get(f'status_{task_id}')
creation_time = request.form.get(f'creation_time_{task_id}')
deadline = request.form.get(f'deadline_{task_id}')
task_type = request.form.get(f'task_type_{task_id}')
print(title, file=sys.stderr)
print(description, file=sys.stderr)
print(task_id, file=sys.stderr)
print(status, file=sys.stderr)
ses_id = session['userid']
query = f"""
UPDATE Task
SET title='{title}', description='{description}', status='{status}', deadline='{deadline}',
creation_time='{creation_time}',user_id='{ses_id}',
task_type='{task_type}'
WHERE id= {task_id};
"""
print(query, file=sys.stderr)
cursor = mysql.connection.cursor(MySQLdb.cursors.DictCursor)
cursor.execute(query)
mysql.connection.commit()
In this code I only get the values from id, title, description, status, deadline etc. from the first row which is my page looks like that
Only first row update button works and sends the data. second row update button does not send its data and sends first row's data only.
Why this is happening?
答案1
得分: 1
<form action="/tasks" method="POST">
<table contenteditable>
<thead>
<tr>
...
</tr>
</thead>
<tbody>
{% for task in data %}
<form action="/tasks" method = "POST">
<tr>
<td><input type="text" name = "id" class = "form-control" id = "id" contenteditable = "false" value="{{ task.id }}" readonly></td>
<td><input class = "form-control" type="text" id="title" name="title_{{ task.id }}" value="{{ task.title }}"></td>
<td><input class = "form-control" type="text" id="description" name="description_{{ task.id }}" value="{{ task.description }}"></td>
<td><input class = "form-control" name ="status_{{ task.id }}" id = "status" value="{{ task.status }}" readonly></td>
<td><input class = "form-control" type="text" id="creation_time" name="creation_time_{{ task.id }}" value="{{ task.creation_time }}"></td>
<td><input class = "form-control" type="text" id="deadline" name="deadline_{{ task.id }}" value="{{ task.deadline }}"></td>
<td><input class = "form-control" type="text" id="task_type" name="task_type_{{ task.id }}" value="{{ task.task_type }}"></td>
<td>
<button type="submit">Update Row</button>
</td>
</tr>
</form>
{% endfor %}
</tbody>
</table>
</form>
英文:
<form action="/tasks" method="POST">
<table contenteditable>
<thead>
<tr>
...
</tr>
</thead>
<tbody>
{% for task in data %}
<tr>
<td><input type="text" name = "id" class = "form-control" id = "id" contenteditable = "false" value="{{ task.id }}" readonly></td>
<td><input class = "form-control" type="text" id="title" name="title_{{ task.id }}" value="{{ task.title }}"></td>
<td><input class = "form-control" type="text" id="description" name="description_{{ task.id }}" value="{{ task.description }}"></td>
<td><input class = "form-control" name ="status_{{ task.id }}" id = "status" value="{{ task.status }}" readonly></td>
<td><input class = "form-control" type="text" id="creation_time" name="creation_time_{{ task.id }}" value="{{ task.creation_time }}"></td>
<td><input class = "form-control" type="text" id="deadline" name="deadline_{{ task.id }}" value="{{ task.deadline }}"></td>
<td><input class = "form-control" type="text" id="task_type" name="task_type_{{ task.id }}" value="{{ task.task_type }}"></td>
<td>
<button type="submit">Update Row</button>
</form>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</form>
Looking at the html code you only initialized a form tag once,
However the first iteration of
{% for task in data %}
includes a closing tag for the form, therefore terminating the scope of the form to only include the data from the first iteration (or the first row).
It's also redundant that you have another </form> at the end of the code.
One of the approach is to encapsulate every column into a form such as
{% for task in data %}
<form action="/tasks" method = "POST">
<tr>
<td><input type="text" name = "id" class = "form-control" id = "id" contenteditable = "false" value="{{ task.id }}" readonly></td>
<td><input class = "form-control" type="text" id="title" name="title_{{ task.id }}" value="{{ task.title }}"></td>
<td><input class = "form-control" type="text" id="description" name="description_{{ task.id }}" value="{{ task.description }}"></td>
<td><input class = "form-control" name ="status_{{ task.id }}" id = "status" value="{{ task.status }}" readonly></td>
<td><input class = "form-control" type="text" id="creation_time" name="creation_time_{{ task.id }}" value="{{ task.creation_time }}"></td>
<td><input class = "form-control" type="text" id="deadline" name="deadline_{{ task.id }}" value="{{ task.deadline }}"></td>
<td><input class = "form-control" type="text" id="task_type" name="task_type_{{ task.id }}" value="{{ task.task_type }}"></td>
<td>
<button type="submit">Update Row</button>
</form>
</td>
</tr>
{% endfor %}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论