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

【问题标题】：Set value of WTForms field to an elements css style将 WTForms 字段的值设置为元素 css 样式
【发布时间】：2019-01-03 12:43:23
【问题描述】：

我想在循环的 html 表单中插入一个 HiddenField，并将这个隐藏字段的值定义为相关可点击 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 }}

这可以实现吗？

【问题讨论】：

是的，这可能是可以实现的。您能解释一下您需要帮助的部分，或者目前对您不起作用的部分吗？
我不确定哪种方法会奏效。我可以在 jinja2 变量中包含一个 javascript 函数，然后尝试使用它将值提取回 Flask 吗？例如{{ form.chosen_colour(value=myJavascriptFunction()) }}

标签： python html css jinja2 flask-wtforms

【解决方案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']

【讨论】：