如何在Python Flask中修改按钮值以防止重复点击并提供反馈

我希望将HTML中编写的按钮的value修改为"records"，并通过Python（Flask）实现这一修改。此举是为了避免因表单请求变化导致录制按钮被重复点击，同时提供操作生效的视觉反馈。我是Python、HTML、Flask及Web开发领域的新手。

现有代码 #

@app.route('/camera', methods=['GET', 'POST'])
def camera(): 
    if request.method == 'POST':
        if request.form['record'] == 'record here' :  # 此处判断按钮的value，运行正常
            print ("is recording")                    #           
            p1 = threading.Thread(target=recording)
            p1.start()
    return render_template('camera.html')

期望实现的效果 #

点击按钮触发录制后，按钮的value从'record here'变为'records'，避免重复点击，同时给用户视觉反馈。

解决方案 #

你不能直接修改request.form，因为它是只读的ImmutableMultiDict类型，直接赋值会报错。正确的做法是通过Flask模板上下文传递变量，动态渲染HTML按钮的value属性，也可以结合JavaScript实现无刷新反馈。

方案1：通过Flask模板动态渲染 #

1. 修改Flask视图函数

添加变量控制按钮value，触发录制后更新该变量：

@app.route('/camera', methods=['GET', 'POST'])
def camera(): 
    button_value = 'record here'  # 默认按钮文本
    if request.method == 'POST':
        if request.form['record'] == 'record here':
            print("is recording")
            p1 = threading.Thread(target=recording)
            p1.start()
            button_value = 'records'  # 更新按钮文本
    # 将变量传递给模板
    return render_template('camera.html', button_value=button_value)

2. 修改HTML模板

用模板变量动态设置按钮的value和显示文本：

<form method="POST">
    <button type="submit" name="record" value="{{ button_value }}">
        {{ button_value }}
    </button>
</form>

方案2：结合JavaScript实现无刷新反馈（更友好） #

如果不想刷新页面就能立即看到反馈，可以用JS直接修改按钮状态：

<form method="POST" id="recordForm">
    <button type="submit" name="record" id="recordBtn" value="record here">
        record here
    </button>
</form>

<script>
document.getElementById('recordForm').addEventListener('submit', function(e) {
    const btn = document.getElementById('recordBtn');
    // 修改按钮的value和显示文本
    btn.value = 'records';
    btn.textContent = 'records';
    // 直接禁用按钮，彻底避免重复点击
    btn.disabled = true;
});
</script>

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