如何将表单onsubmit返回的计算得分提交到MongoDB存储

实现方案 #

步骤1：新增隐藏表单字段存储得分 #

在_form_fields.ejs的表单内部新增一个hidden类型的输入框，专门用来传递计算后的得分，同时支持编辑状态下的分数回显：

<!-- 放在表单内部任意位置即可，比如复选框和提交按钮之间 -->
<input type="hidden" name="score" id="score" value="<%= pipeline.score || '' %>">

步骤2：改造表单提交逻辑 #

修改new.ejs里的表单onsubmit绑定，先完成得分计算、赋值给隐藏字段后再提交表单：

<form action="/pipelines" method="POST" onsubmit="handleFormSubmit(event)">
  <%- include('_form_fields') %>
</form>

步骤3：新增提交处理函数关联得分计算 #

在页面JS部分新增提交处理函数，调用你的splitURL方法拿到得分后赋值给隐藏字段：

function handleFormSubmit(e) {
  // 拿到用户输入的URL计算得分
  const urlInput = document.getElementById('url');
  const finalScore = splitURL(urlInput.value);
  // 把得分写入隐藏表单字段
  document.getElementById('score').value = finalScore;
  // 同步计算场景下不需要阻止默认提交，表单会自动带上score字段提交
  // 如果splitURL是异步逻辑（比如需要调用后端接口计算），则需要先阻止默认提交，计算完成后手动触发提交：
  /*
  e.preventDefault();
  const form = e.target;
  splitURL(urlInput.value).then(finalScore => {
    document.getElementById('score').value = finalScore;
    form.submit();
  })
  */
}

步骤4：后端存储适配 #

Express后端接收请求时，直接从req.body.score拿到得分值，和其他字段（url、exampleCheck）一起存入MongoDB即可，逻辑和原有其他字段的存储完全一致。

注意事项 #

• 如果你的splitURL方法有校验逻辑（比如URL格式不对无法计算得分），可以在handleFormSubmit里加校验，不通过的话return false阻止表单提交，给出对应提示。
• 编辑场景下，隐藏字段已经通过<%= pipeline.score %>绑定了数据库里存的旧得分，打开编辑页时会自动填充，提交时如果没有修改会直接提交原有值，符合你需要的绑定效果。

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