如何通过JavaScript事件监听器将表单数据传递给Flask-WTF？

你遇到的核心问题是：手动调用form.submit()时，浏览器不会自动将触发提交的按钮（即你的delete按钮）的name和value包含到表单数据中。request.form.get("delete")能拿到值，大概率是你之前通过按钮默认点击提交测试的结果，但JS手动提交时没带上这个按钮的参数，导致WTForms无法解析到form.delete.data。

方法1：手动添加隐藏字段传递delete值 #

在表单中新增隐藏input，JS确认提交时将原按钮的value赋值给它，让WTForms能正常读取数据：

1. 修改HTML表单：

<form method="POST">
  <!-- 其他表单字段 -->
  <input type="hidden" name="delete" id="delete_hidden">
  <button type="submit" name="delete" value="delete_value" onclick="confirm_delete_submit(event)">删除</button>
</form>

2. 更新JS代码：

function confirm_delete_submit(event) {
  event.preventDefault()

  modbox.confirm({
    title: 'Confirm delete',
    center: true,
    body: 'Do you want to delete this question?',
    okButton: {
      label: 'Delete',
      size: 'sm'
    },
    closeButton: {
      label: 'Cancel',
      size: 'sm'
    }
  })
  .then(() => {
    // 将原按钮的value赋值给隐藏字段
    document.getElementById('delete_hidden').value = event.target.value;
    // 提交表单
    event.target.form.submit(); 
  })
  .catch(() => console.log('No delete'));
}

方法2：触发按钮click事件代替直接提交表单 #

这种方式更贴近浏览器默认提交逻辑，会自动带上按钮的name和value：
修改JS的then回调部分，同时添加标记避免重复触发模态框：

function confirm_delete_submit(event) {
  // 若已确认过，直接放行提交
  if (event.target.dataset.confirmed) {
    return;
  }

  event.preventDefault()

  modbox.confirm({
    title: 'Confirm delete',
    center: true,
    body: 'Do you want to delete this question?',
    okButton: {
      label: 'Delete',
      size: 'sm'
    },
    closeButton: {
      label: 'Cancel',
      size: 'sm'
    }
  })
  .then(() => {
    // 标记已确认，防止再次弹出模态框
    event.target.dataset.confirmed = true;
    // 触发原按钮的click事件，执行默认提交逻辑
    event.target.click();
  })
  .catch(() => {
    console.log('No delete');
    // 取消确认标记
    delete event.target.dataset.confirmed;
  });
}

方法3：检查WTForms表单类配置 #

确保你的WTForms表单类正确定义了delete字段，并且视图中正确实例化：

1. 表单类示例：

from wtforms import Form, SubmitField

class YourForm(Form):
    # 其他表单字段...
    delete = SubmitField('Delete')

2. 视图函数示例：

form = YourForm(request.form)
if form.validate_on_submit():
    delete_value = form.delete.data
    # 执行删除逻辑

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