将Quill编辑器内容存入隐藏字段后，如何通过Flask Request获取值？

错误原因分析 #

浏览器报错Uncaught TypeError: Cannot set properties of null (setting 'value')，本质是你的JS代码找不到hiddenArea这个隐藏字段元素，导致无法赋值，最终Flask端拿不到内容。

分步解决方案 #

1. 确保DOM元素正确且JS执行时机正确

首先检查HTML结构，隐藏字段必须在表单内，且id和name属性正确：

<form method="POST" action="/submit">
  <!-- 其他正常字段 -->
  <input type="text" name="normal_field" placeholder="测试字段">
  
  <!-- Quill编辑器容器 -->
  <div id="editor"></div>
  
  <!-- 隐藏字段：id用于JS获取，name用于Flask接收 -->
  <input type="hidden" id="hiddenArea" name="hiddenArea">
  
  <button type="submit">提交</button>
</form>

然后将JS代码放在页面底部（</body>标签前），或者用DOMContentLoaded事件确保DOM加载完成后再执行：

// 等待DOM加载完成
document.addEventListener('DOMContentLoaded', function() {
  // 初始化Quill编辑器
  const quill = new Quill('#editor', {
    theme: 'snow'
  });

  // 监听表单提交事件，在提交前赋值隐藏字段
  document.querySelector('form').addEventListener('submit', function() {
    const hiddenInput = document.getElementById('hiddenArea');
    // 双重确认元素存在
    if (hiddenInput) {
      // 获取Quill的HTML内容存入隐藏字段
      hiddenInput.value = quill.root.innerHTML;
    }
  });
});

2. Flask端接收逻辑验证

确保Flask路由正确接收POST请求，且使用request.form.get时参数与隐藏字段的name一致：

from flask import Flask, request, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/submit', methods=['POST'])
def submit():
    # 用hiddenArea作为参数，对应表单里的name属性
    editor_content = request.form.get('hiddenArea', '')
    normal_field = request.form.get('normal_field', '')
    
    # 打印验证内容
    print(f"普通字段内容: {normal_field}")
    print(f"编辑器内容: {editor_content}")
    return '提交成功，可查看控制台输出内容'

if __name__ == '__main__':
    app.run(debug=True)

常见踩坑点 #

• JS执行顺序：如果把JS放在<head>里，此时表单元素还未渲染，getElementById会返回null，必须确保DOM加载完成后再执行JS。
• 属性拼写错误：隐藏字段的id和JS里的getElementById参数必须完全一致，name和Flask的request.form.get参数也必须一致，别拼错字母。
• 表单提交方式：表单必须用method="POST"，Flask路由也要声明methods=['POST']，否则request.form拿不到数据。
• 避免内联事件：尽量不要用<form onsubmit="xxx()">这种内联提交事件，容易因作用域问题导致元素获取失败，用addEventListener更可靠。

内容的提问来源于stack exchange，提问作者Daniel Wong