如何用<a>标签结合JS向Spring Controller传值？修复提交未定义报错

你遇到的Cannot read property 'submit' of undefined错误，核心原因是错误地调用了复选框元素集合的submit()方法——submit()是表单对象的专属方法，和复选框毫无关系，而且document.getElementsByName("check_Box")返回的是一组元素，直接访问它的checked属性本身就没有意义。

下面是具体的修复步骤和修正后的完整代码：

1. 核心错误修正 #

把调用复选框的submit()改成调用表单的submit()方法，这是提交表单的正确姿势。

2. 优化表单获取方式 #

虽然document.form_Name可以正常工作，但给表单添加id后用document.getElementById()获取会更可靠，也更符合现代JavaScript的编码规范。

3. 阻止a标签的默认跳转 #

点击<a>标签时默认会跳转到#，可能干扰表单提交流程，需要在点击事件中阻止这个默认行为。

完整修正代码 #

<jsp page>
  <a href="#" onClick="return jsFunctionName()">Post_a_link</a>
  <form name="form_Name" id="form_Name" method="post">
    <input type="checkbox" name="check_Box" value="value1"/>
    <input type="checkbox" name="check_Box" value="value2"/>
    <input type="checkbox" name="check_Box" value="value3"/>
  </form>

  <script>
    function jsFunctionName(){
      // 通过id获取表单对象，比name获取更稳定
      const targetForm = document.getElementById("form_Name");
      // 设置表单提交的Controller地址
      targetForm.action = "/spring_Controller.do";
      // 执行表单提交
      targetForm.submit();
      // 阻止a标签默认的跳转行为
      return false;
    }
  </script>
</jsp>

可选增强：添加复选框选中校验 #

如果需要确保用户至少选择一个选项，可以在提交前加入校验逻辑：

function jsFunctionName(){
  const targetForm = document.getElementById("form_Name");
  const checkboxes = document.getElementsByName("check_Box");
  let hasCheckedItem = false;

  // 遍历所有复选框，检查是否有选中项
  for (let cb of checkboxes) {
    if (cb.checked) {
      hasCheckedItem = true;
      break;
    }
  }

  if (!hasCheckedItem) {
    alert("请至少选择一个选项");
    return false;
  }

  targetForm.action = "/spring_Controller.do";
  targetForm.submit();
  return false;
}

Spring Controller接收参数提示 #

在你的Spring Controller中，可以用以下方式接收多个复选框的选中值：

@PostMapping("/spring_Controller.do")
public String handleSubmit(@RequestParam("check_Box") List<String> checkBoxValues) {
  // 处理选中的复选框值
  return "your-view-name";
}

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