主页 / coding / 问题 / 79285766
Accepted
Tim Payne
Asked: 2024-12-17 02:47:24 +0800 CST

如何在使用小部件时更新表单值

  • 772

我正在构建一个非常简单的颜色输入表单，并使用内置的 wtforms 小部件。这只会显示颜色选择器，不允许输入文本，但我想让用户能够输入任何文本。所以我创建了另一个仅包含文本值的字段。

当其他输入发生变化时，我该如何更新我的颜色/color1 字段？我看不出将“事件”附加到表单条目的任何方法。我对 Python/Flask/WTForms/Jinja 还很陌生，所以解决方案可能很明显，但我无法解决！

这是我的简单表单类

class UserInput(FlaskForm):
  color = StringField('color', default="#00ff00")
  color1 = StringField('color1', widget=widgets.ColorInput(), default='#00ff00')
  submit = SubmitField('Go')

这是我的 html 代码

<form action="" method="post">
     <p>
      {{form.color1.label}} <br>
      {{form.color}} {{form.color1}}
     </p>
     <p>
      {{form.submit()}}
     </p>
   </form>
flask

1 个回答

  1. Best Answer

    由于 jinja 是在服务器端呈现的，因此您无法立即对用户输入做出反应，因此一个输入字段会更新另一个输入字段。要实现这一点，您需要在客户端执行 JavaScript。

    以下示例change在两个输入字段中注册事件监听器。如果用户更改其中一个字段的值，则另一个字段的值将自动更新。

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Index</title>
</head>
<body>
    <form action="" method="post">
        {{ form.csrf_token }}
        <div>
            {{form.color1.label}}
            {{form.color}} {{form.color1}}
        </div>
        <div>
            {{form.submit()}}
        </div>
     </form>

     <script>
        (function() {
            const elems = ['color1', 'color'].map((id) => document.getElementById(id));
            elems.forEach(elem => {
                elem.addEventListener('change', (event) => {
                    const value = event.target.value;
                    elems.forEach(el => el.value = value);
                });
            });
        })();
     </script>
</body>
</html>
    • 0

相关问题