使用onSubmit事件调用JS函数获取问卷结果失败求助

让我帮你排查一下这段代码里的问题，几个关键错误导致了onSubmit事件无法正常工作：

1. 表单引用不匹配 #

你的HTML表单name属性是choice1，但JavaScript里却用document.submit_form来获取表单——这根本找不到对应的表单元素，自然没法给输入框赋值。应该改成document.forms['choice1']或者直接document.choice1来正确引用表单。

2. 未定义的变量导致计算失效 #

函数里的total、Details、formElement三个变量完全没有定义和赋值！浏览器会把它们视为undefined，相加后得到NaN，后续的风险等级判断逻辑根本无法执行。你需要先从表单中获取用户输入的数值，并转换为数字类型（避免字符串拼接）。

3. 表单默认提交行为覆盖了结果 #

点击提交按钮时，浏览器默认会发送表单并刷新页面，哪怕你的函数执行了，页面一刷新也看不到结果。必须阻止这个默认行为，才能让结果保留在页面上。

修正后的完整代码示例 #

HTML部分 #

<form name="choice1" onSubmit="return results_addition(event)"> 
  <!-- 假设这里是你的问卷输入项，根据实际情况调整 -->
  <input type="number" name="total" placeholder="请输入总分" required>
  <input type="number" name="details" placeholder="请输入细节分" required>
  <input type="number" name="formElement" placeholder="请输入表单元素分" required>
  
  <br><br>
  <input type="submit" value="提交">
  
  <!-- 用来展示风险等级的输入框 -->
  <br><br>
  <input type="text" name="riskResult" readonly placeholder="风险等级将显示在这里">
</form>

JavaScript部分 #

function results_addition(event){ 
  // 阻止表单默认提交刷新页面的行为
  event.preventDefault();
  
  // 获取表单对象
  const form = document.forms['choice1'];
  
  // 获取输入值并转换为数字，默认值设为0避免空值报错
  const total = Number(form.total.value) || 0;
  const Details = Number(form.details.value) || 0;
  const formElement = Number(form.formElement.value) || 0;
  
  // 计算总分
  const results = total + Details + formElement; 
  let riskLevel;
  
  // 判断风险等级
  if(results < 30){ 
    riskLevel = "Low Risk"; 
  } else if(results > 50){ 
    riskLevel = "High Risk"; 
  } else{ 
    riskLevel = "Medium Risk"; 
  }
  
  // 把结果赋值到对应的输入框
  form.riskResult.value = riskLevel;
  
  // 如果之后需要手动提交表单到服务器，可以在这里添加 form.submit();
  return false;
}

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