将WTForms字段的值设置为

Question

我想在循环html表单中插入一个HiddenField，并将这个隐藏字段的值定义为相关可单击div元素的css颜色。这意味着，如果用户单击div直到它变红，然后提交表单，我将收到css背景样式#FF0000作为HiddenField的值

下面是我用来输入的可点击的div和函数：

<div class="cell">
    <div style="background: #00cc00;" onclick="setColor(this)"></div>
</div>

    var backgrounds = ["#ffbf00", "#FF0000", "#00cc00"];
    function setColor(el) {
        el.colorIdx = el.colorIdx || 0;
        el.style.backgroundColor = backgrounds[el.colorIdx++ % backgrounds.length];
    }

这是我隐藏的领域：

{{ form.chosen_colour }}

这是可以实现的吗

Answer 1

对于任何感兴趣的人，我通过用一个隐藏输入替换隐藏字段，并将其链接到JavaScript来解决这个问题，如下所示：

<input type="hidden" name="user_{{ user.user_id }}" id="user_{{ blogpost.blogpost_id }}">

 var backgrounds = ["#ffbf00", "#FF0000", "#00cc00"];
    function setColor(el, state_id) {
        el.colorIdx = el.colorIdx || 0;
        el.style.backgroundColor = backgrounds[el.colorIdx++ % backgrounds.length];
        var hidden_color = document.getElementById('user_' + blogpost_id);
        hidden_color.value = el.style.backgroundColor
    }

我还使用以下方法访问Flask后端中的隐藏输入值：

value = request.form['user_14']