将 WTForms 字段的值设置为元素 css 样式

Question

我想将 HiddenField 插入到循环 html 表单中，并将此隐藏字段的值定义为相关可单击 div 元素的 css 颜色。这意味着如果用户单击 div 直到它变红，然后提交他们的表单，我应该收到 #FF0000 的 css 背景样式作为 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']

将 WTForms 字段的值设置为元素 css 样式

Set value of WTForms field to an elements css style

html

css

python

jinja2

flask-wtforms