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样式

1 个答案: